Create an Animated SVG Logo for International Women’s Day 2019
To mark International Women’s Day 2019 we’ll be creating an animated SVG version of the event’s logo you can use along with this year’s hashtag #BalanceforBetter.
In the process we’ll be learning about using Figma and its boolean operations, as well as inline SVG animation via the animateTransform element.
This is what we’ll be creating:
So head over to Figma, create a fresh file to work in, and let’s begin!
Creating the Logo in Figma
The way we’ll be creating our logo illustration is by drawing multiple shapes and then combining them via boolean operations. You’ll find the boolean operations in the middle of the top toolbar of Figma. We’ll be using the Union Selection and Subtract Selectionoperations, and you’ll see what each of these do as we step through the tutorial.
The Main Circle
Start by grabbing the ellipse tool and drawing out a circle 300px wide by 300px, with a fill color of #46296E.
Create another circle, this time 180px by 180px.
Select both your first and second circles by clicking one shape, holding Shift, then clicking the other shape. Use the alignment tools at the top of the right sidebar to vertically and horizontally align the two circles so their centers are in the same position.
Then, with both shapes still selected, choose Subtract Selection from the boolean operations menu.
When you use the subtract boolean operation, the shape of the top most item will be subtracted from the shape of the lower item. This creates a hollow center in our original circle shape.
The Bottom Left Cutout
Now we’re going to create the slim rectangular cutout section on the bottom left of the logo.
Using the rectangle tool, draw out a rectangle 14px wide by 100px high.
Rotate the rectangle by -45 degrees. You can do this by entering the correct figure into the shape’s rotation field in the right sidebar.
Then position the rectangle over the bottom left corner of the circle.
Select the rectangle and the circle and again choose Subtract Selection from the boolean operations menu to generate the cutout effect.
The Arrow Head Triangles
Next up we’re going to make the triangular head of the arrow shape, and the matching triangular cutout.
To ensure we end up with a triangle that has a perfect right angle, instead of using the polygon tool we’ll use the rectangle tool. Draw out a square that’s 72px by 72px. It should share the same purple color of #46296E we’ve been using so far.
We need to delete one of the square’s nodes in order to to turn it into a right angle triangle. Go into node editing mode by either double-clicking the square, or choosing the Edit Object menu item from the same top menu section in which the boolean operations are located.
Once in node editing mode, use the Move tool to select the bottom right mode. Because we need to delete this node you might think you should press the backspace or delete button, but if you do it will just leave the three remaining nodes open with no fill.
Instead, press Shift + Backspace to use the Delete and heal selection function, which will close the shape when the node is deleted.
Click the blue Done button at the left of the top menu to finish editing this shape.
Move the triangle over to the top right of our circle shape.
We’re going to need one triangle to form the arrow head, and another to cut a matching triangle shape out of the circle. To this end, duplicate the triangle by selecting it then pressing Ctrl + D. Move the duplicate up and to the left by about 6 pixels.
Temporarily hide the first triangle, (the lower one), by clicking its eye icon in the layers panel so we can see the duplicate triangle more clearly.
Select the duplicate triangle and the main circle shape and use the Subtract Selection from the boolean operations menu to create this cutout effect:
Set the original triangle to show again, select it and the main circle shape, then combine the two by choosing Union Selection from the boolean operations menu. This completes our arrow head area.
The Bottom Right Cutout
Now we can move on to creating the small, rounded end, cross shaped cutout at the bottom right of the circle.
First, draw a rectangle 12px wide by 80px high, and increase the corner rounding via the shape’s Corner Radius field in the right sidebar until you see the corners aren’t getting any rounder. (6px or higher). This will create perfectly rounded caps on either end of the rectangle.
Duplicate the rounded rectangle, change its height to 50px, and rotate it by 90 degrees. Select both shapes and align them horizontally by pressing the Align Horizontal Centers button at the top of the right sidebar. Position this new rectangle near the bottom of the first rectangle like so:
Combine the two shapes by selecting them and choosing Union Selection from the boolean operations menu. Then select the newly unified shape and rotate it by 45 degrees.
Position the shape over our main circle shape at the bottom right, as seen below:
With the cross and main circle shape selected, choose Subtract Selection from the boolean operations menu to make the final cutout.
Your completed logo should look like this:
Note on “Flatten” and SVG
At this point you will have a series of nested shapes in the layers panel, combined by various boolean operations. You can optionally right-click the illustration, choose Flatten, and that nesting will be collapsed into a single layer. In many cases this will be preferable to having several nested shapes.
However, in our case it would create two separated sections, the top left and bottom right halves, and those would in turn be converted into two path elements in SVG code. As such we will leave our nested shapes as is, because when we convert it to code shortly Figma will give us a single path, which is easier to animate.
Translation Into Code
With the illustration complete we’re now ready to turn it into SVG and embed it into an HTML page for animation.
Setup the HTML
Let’s start by creating the HTML document. Create a file named index.html and add this code:
In between the <style>...</style> tags add this CSS so we vertically center our SVG and make a little space above it.
margin: 50px auto;
Preview your file in a browser and you should see your SVG image appear:
We can now go ahead and animate the SVG to slowly rotate. We’ll be doing this with the animateTransform element, which can be placed between the opening and closing tags of an SVG shape.
Our pasted code currently has a self closing path element, i.e. like so:
We’ll need to change this so we have a pair of <path></path> tags we can add our animateTransform element between. Delete the forward slash (/) at the end of the current path tag, then add a closing </path> tag after it as well.
Our path element is now ready to be animated. Paste the following code in before the closing </path> tag:
Let’s take a quick look at what the properties in our animateTransform element do via the values we’ve set:
type="rotate" Animate rotation, as opposed to scaling or translating
from="0 150 150" The coordinates of the animation starting point. The first of the three values is the initial degrees of rotation, while the second and third values are the x and y position of the center. We start at 0 degrees of rotation, and set the center to 150 in both directions as that position is right in the middle of our 300 by 300 shape.
to="-360 150 150" The coordinates of the animation finishing point, again representing degrees of rotation and the center’s x and y position. We leave the center at the same position, and set the finishing degrees of rotation to -360 for a full rotation. The negative value makes the rotation turn counter-clockwise, in the direction the arrow is pointing.
begin="0s" Setting this value to 0 seconds means the animation will start right away. If a positive number were used it would cause a delay in starting the animation.
dur="10s" Here we set the duration to 10 seconds so the animation has a fairly slow pace.
repeatCount="indefinite" Setting this value to indefinite means the animation will loop endlessly
When you refresh the browser you should see the logo rotating.
Adjust viewBox to Prevent Clipping
As you can see in the above image, when the arrow head rotates near the outer edges of the SVG it gets clipped off. To fix this we’ll adjust the viewBox. By adjusting the viewBox we can essentially zoom out on our vector image a little bit.
Adjust the viewBox values on the opening svg tag to -20 -20 340 340, like so:
The first two numbers control the “panning” of the shape, and the last two numbers control the “zooming”.
By setting those last two numbers to 340 and 340, we’re effectively telling the SVG to show us the equivalent of 340px by 340px of image in the 300px by 300px of space provided for by the width and height properties. To achieve this the SVG has to be shrunk, or “zoomed out”, giving us some space around the logo.
We then “pan” the image down and to the right by 20px with the first two numbers. If we didn’t do this the image would just stay up in the top left corner of the viewBox and continue to be clipped on its top and left side when rotating. This “panning” gives us empty space all around, and when the image rotates the arrow no longer gets clipped.
The completed animated SVG looks like this:
We’ll now add a little text below the animation, with the 2019 International Women’s Day hashtag. Paste in the following code beneath your SVG:
And style it by adding the following CSS to your style tags: