CODEWITHSUNDEEP
htmlcsssvg
Mujtaba
Mujtaba

Reputation: 260

How to merge two SVG's into one while rotating

I've been trying to make a replica of Google Fonts theme toggle which I want to implement into my site.

How would I animate the transition between them. This could probably use a little tweaking and I've only managed to rotate them. I've tried figuring out how to do that and I don't know what to do next to merge them.

<meta name="color-scheme" content="dark light">
<style type="text/css">
.container {
    display: flex;
    height: 500px;
    align-items: center;
    justify-content: space-evenly;
}

svg {
    height: 200px;
    width: 200px;
    transition: 600ms ease-in-out;
}

svg:hover {
    transform: rotate(360deg);
}
</style>
<div class="container">
    <svg viewBox="0 0 24 24">
        <defs>
            <clipPath id="__lottie_element_144">
                <rect width="24" height="24" x="0" y="0"></rect>
            </clipPath>
        </defs>
        <g clip-path="url(#__lottie_element_144)">
            <g transform="matrix(1.5,0,0,1.5,7.000000476837158,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(69,90,100)" fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path>
                </g>
            </g>
            <g transform="matrix(-1,0,0,-1,12,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(69,90,100)" fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path>
                </g>
            </g>
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="xMidYMid meet">
        <defs>
            <clipPath id="__lottie_element_2">
                <rect width="24" height="24" x="0" y="0"></rect>
            </clipPath>
        </defs>
        <g clip-path="url(#__lottie_element_2)">
            <g transform="matrix(1,0,0,1,12,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="#9AA0A6" fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path>
                </g>
            </g>
            <g transform="matrix(1,0,0,1,12,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="#9AA0A6" fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path>
                </g>
            </g>
        </g>
    </svg></div>

Upvotes: 0

Views: 157

Answers (1)

chrwahl
chrwahl

Reputation: 13176

This can be achieved simpler using basic shapes like rect and circle. And instead of rotating the SVG you can just rotate/translate the elements inside the SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <style>
  #u1 {
    transition: 600ms ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
  }
  #c1 {
    transition: 600ms ease-in-out;
  }
  svg:hover #u1 {
    transform: rotate(360deg);
  }
  svg:hover #c1 {
    transform: translate(-3px,0);
  }
  </style>
  <mask id="m1">
    <rect fill="white" x="0" y="0" width="100%" height="100%"/>
    <circle fill="black" r="7" cx="12" cy="12" />
  </mask>
  <symbol id="s1" mask="url(#m1)">
    <rect id="r1" fill="#9AA0A6" width="16" height="16" x="4" y="4"/>
    <use href="#r1" transform="rotate(45 12 12)"/>
  </symbol>
  <use id="u1" href="#s1" />
  <circle id="c1" fill="#9AA0A6" r="5" cx="12" cy="12" />
  </svg>

Here I embed the SVG document/element into a HTML document. WHen the SVG is clicked the class name of the SVG and the body element will be set to "dark". This will change the background color and run the transitions on the elements inside the SVG.

document.addEventListener('DOMContentLoaded', e => {
  document.querySelector('svg').addEventListener('click', e => {
    let svgElm = e.target.closest('svg');
    svgElm.classList.toggle('dark');
    document.body.classList.toggle('dark');
  });
});
body.dark {
  background-color: #444;
}

body svg {
  cursor: pointer;
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <style>
  #u1 {
    transition: 600ms ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
    fill: #000;
  }
  #c1 {
    transition: 600ms ease-in-out;
    fill: #000;
  }
  #c2 {
    fill: #bbb;
  }
  svg.dark #u1 {
    transform: rotate(360deg);
    fill: #fff;
  }
  svg.dark #c1 {
    transform: translate(3px,0);
    fill: #fff;
  }
  svg.dark #c2 {
    fill: #666;
  }
  </style>
  <circle id="c2" r="12" cx="12" cy="12" />
  <mask id="m1">
    <rect fill="white" x="0" y="0" width="100%" height="100%"/>
    <circle fill="black" r="7" cx="12" cy="12" />
  </mask>
  <symbol id="s1" mask="url(#m1)">
    <rect id="r1" width="16" height="16" x="4" y="4"/>
    <use href="#r1" transform="rotate(45 12 12)"/>
  </symbol>
  <use id="u1" href="#s1" />
  <circle id="c1" r="5" cx="9" cy="12" />
  </svg>
</body>

Upvotes: 2

Related Questions