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

Boolean Operations

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 Selection operations, 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:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Animated SVG Logo</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> <style> </style>
</head>
<body> </body>
</html>

This is just a basic shell where we have a set of style tags ready for some CSS, and we’re loading in a Google font we’ll be using in a moment.

Convert to SVG

Figma makes converting our illustration to SVG extremely quick and easy. Just right-click on the image and choose Copy as > Copy as SVG.

Then paste the resulting code into the body section of your HTML.

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E"/>
</svg>

In between the <style>...</style> tags add this CSS so we vertically center our SVG and make a little space above it.

svg { display: block; margin: 50px auto;
}

Preview your file in a browser and you should see your SVG image appear:

Add Animation

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:

<path... />

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:

<animateTransform attributeName="transform" type="rotate" from="0 150 150" to="-360 150 150" begin="0s" dur="10s" repeatCount="indefinite" />

The resulting SVG code should look like this:

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E"> <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="-360 150 150" begin="0s" dur="10s" repeatCount="indefinite" /> </path>
</svg>

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:

<svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">

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:

Add Text

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:

<h1>#BalanceforBetter</h1>

And style it by adding the following CSS to your style tags:

body { text-align: center;
}
h1 { background: #46296E; color: #fff; display: inline-block; font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 42px; padding: 0.2em 0.5em; margin: 0;
}

With this CSS we do the following:

• Center align the text via the body tag.
• Set its background to purple and text color to white via the h1 tag.
• Set the display to inline-block – the “inline” part means it will still behave like text, but the “block” part gives us greater control over its spacing and alignment.
• Set the font-family to “Open Sans”, with a stack of fallback fonts.
• Set the font size.
• Add some padding around the inside so the purple background isn’t flush with the edges of the text.
• Set the margin to 0 so there isn’t too much space between the SVG and the text.

Refresh and your completed page should look like this:

Wrapping Up

Your final code should be:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Animated SVG Logo</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> <style> svg { display: block; margin: 50px auto; } body { text-align: center; } h1 { background: #46296E; color: #fff; display: inline-block; font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 42px; padding: 0.2em 0.5em; margin: 0; } </style>
</head>
<body> <svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E"> <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="-360 150 150" begin="0s" dur="10s" repeatCount="indefinite" /> </path> </svg> <h1>#BalanceforBetter</h1> </body>
</html>

Check it out!

Hopefully you picked up some useful tips on using Figma, creating SVGs, and animating them via animateTransform.

For more on Figma, SVG and animateTransform enjoy these additional learning resources: