endernet.io

Transforming SVGs

☕️ 5 min read

How to transform certain parts of an SVG

I'll start with my basic html template
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="manifest" href="site.webmanifest" />

    <link rel="stylesheet" href="css/stylesheet.css" />
    <title>Transform your SVG</title>
  </head>
  <body></body>
</html>

Let’s create a stylesheet and give the body a nice background radial-gradient to accent the SVG.

body {
  background: radial-gradient(
    ellipse at center,
    rgba(165, 146, 191, 1) 0%,
    rgba(219, 195, 255, 1) 0%,
    rgba(110, 97, 127, 1) 99.9%,
    rgba(198, 175, 229, 1) 100%
  );
}

Don’t be alarmed if it looks a bit off, it will fix itself when we add the container.

It should look something like this:

svg1

Next, create a container for our SVG, then add the content of the SVG straight into the container. You can use my SVG as an example, or your own SVG will fit here.

<body>
  <div class="container">
    <svg
      class="icon"
      version="1.0"
      xmlns="http://www.w3.org/2000/svg"
      width="700.000000pt"
      height="700.000000pt"
      viewBox="0 0 700.000000 700.000000"
      preserveAspectRatio="xMidYMid meet"
    >
      <g
        transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
        fill="#EBDCFF"
        stroke="none"
      >
        <path
          class="tri"
          d="M2384 5219 c-15 -30 -432 -754 -1019 -1769 -681 -1179 -825 -1429
        -831 -1444 -6 -15 70 -16 1046 -14 l1053 3 238 413 c132 228 239 420 239 428
        0 8 -4 14 -9 14 -5 0 -41 25 -80 56 l-71 55 -57 -50 c-69 -62 -191 -124 -297
        -151 -100 -25 -270 -27 -365 -4 -270 66 -490 282 -562 551 -29 108 -29 278 0
        386 72 270 291 485 565 552 97 24 258 22 361 -4 105 -27 229 -90 299 -153 l56
        -50 48 38 c26 20 51 41 55 44 8 7 -610 1089 -638 1119 -11 11 -16 8 -31 -20z
        m337 -550 c164 -282 298 -522 298 -531 1 -18 -44 -58 -65 -58 -8 0 -39 20 -68
        44 -127 103 -291 157 -478 157 -142 0 -221 -17 -343 -76 -204 -99 -358 -284
        -417 -502 -29 -109 -29 -297 0 -406 59 -218 213 -403 417 -502 122 -59 196
        -75 342 -75 191 0 351 52 480 157 65 53 76 52 147 -10 l49 -43 -21 -41 c-12
        -23 -59 -106 -105 -185 -46 -78 -139 -239 -207 -356 -88 -153 -130 -216 -147
        -223 -14 -5 -443 -9 -1019 -9 -865 0 -995 2 -1000 15 -3 8 29 75 74 152 166
        288 916 1587 1312 2273 227 393 417 721 423 728 5 7 15 11 20 9 6 -2 144 -235
        308 -518z"
        ></path>
        <path
          class="cir1"
          d="M2285 4206 c-438 -85 -694 -518 -555 -937 33 -99 96 -196 180 -280
      61 -61 96 -86 171 -123 126 -62 200 -80 329 -80 161 0 287 41 426 139 92 66
      92 66 49 122 -194 254 -194 652 0 906 31 40 35 50 24 63 -20 25 -129 99 -186
      128 -124 62 -306 88 -438 62z"
        ></path>
        <path
          class="cir2"
          d="M3415 4214 c-102 -20 -133 -29 -188 -51 -156 -63 -288 -186 -363
      -338 -60 -122 -78 -197 -78 -325 0 -129 18 -203 80 -328 37 -75 61 -110 127
      -176 68 -68 98 -91 177 -129 52 -26 124 -55 160 -64 87 -22 253 -22 340 0 86
      22 234 97 289 145 l44 38 -40 55 c-59 79 -88 134 -119 224 -26 74 -28 92 -28
      235 0 144 1 160 27 235 31 88 71 162 125 233 l35 46 -39 34 c-92 80 -226 141
      -355 161 -63 11 -154 13 -194 5z"
        ></path>
        <path
          class="cir3"
          d="M4440 4206 c-351 -76 -583 -357 -583 -706 0 -332 218 -612 543 -697
      76 -19 249 -22 325 -4 264 61 473 264 540 522 100 383 -132 773 -520 874 -85
      23 -226 27 -305 11z m290 -32 c36 -8 103 -33 150 -56 70 -33 101 -57 176 -132
      75 -75 99 -106 132 -176 52 -108 75 -202 75 -310 0 -297 -193 -563 -478 -658
      -141 -47 -276 -47 -425 0 -207 65 -377 235 -446 444 -26 81 -29 101 -28 219 0
      113 4 141 27 211 67 203 241 376 447 443 127 42 231 46 370 15z"
        ></path>
      </g>
    </svg>
  </div>
</body>

Note: For the sake of simplicity, I’m placing the SVG directly in the html to give the CSS an easy path for the classes.

Now we’ll need to give some styling to the container and SVG.

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.icon {
  width: 100%;
}

With our styles in place, things are starting to come together nicely:

svg2

On to the fun part!

We are going to create some styles for classes we have given the path tags of the SVG.

.tri,
.cir1,
.cir2,
.cir3 {
  transition: all 1s ease-in-out;
}

.tri:hover,
.cir1:hover,
.cir2:hover,
.cir3:hover {
  fill: #fdd0ff;
  transform: rotate3d(1, 2, 3, 10deg);
}

First we are giving all of the objects a nice transition to give a smooter animation. Then when we hover over those objects, we are changing the fill color while rotating the object around.

Here’s our finished product:

Thank you for reading!