I'm working on a project for a client that includes some pretty gnarly canvas animation. On one slide, the animation (a bunch of dots) converges to the center and a set of icons rotate around it. I created the icons in Illustrator and exported the inline SVG code, so they aren't part of the canvas element.

The Problem

Well, as you can see in the pen below, the whole image rotates but the icons don't stay upright (duh!). We're going to have to figure out how to rotate each icon as the entire image is rotate to create the illusion that the icons stay upright.

The Solution

The solution is pretty clever. In Illustrator, we can giv each icon (including its surrounding circle) their own group and re-export the SVG code. For each group ( element), we add a class('circle-1', 'circle-2', and 'circle-3'). This way, we can target each group individually. (See the pen for the entire SVG markup, noting that elements and their class names).

Here is the ingenious part. Because we are rotating the entire SVG element clockwise, we now have to rotate each individual icon counter clockwise at the same rate to create the illustion that the icons stay upright. This requires us to know the center of each icon. Luckily, we can easily determine this by looking at the SVG code.

   <circle fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" cx="112.1" cy="34" r="31.4"/>

Boom. We see that the circle's x position is 112.1px and its y position is 34px, as denoted by cx and cy. Now, all we have to do is set that icons transform-origin to the its x and y position, like so:

  .circle-2{
        ...
        @include transform-origin(112.1px, 34px);
}

Now, we have some pretty cool rotating icons.

Sadly, this method only works in Chrome as of right now.


6,591 3 27