To get the most out of this article, it’s presumed you have at least a core knowledge of CSS and HTML. If you’re just starting with web development, there are some great resources for learning and getting help, such as learning resources on sitePoint, the very helpful SitePoint forums, and also freecodecamp.
Drawing Effect Animation
This is an impressive animation that’s deceptively easy to create. Below is a screenshot of what we’re aiming for.
We first need to create the SVG for our logo:
<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1"> <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/> <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/> </svg>
Here’s a Pen with that SVG set up. Feel free to fork it so you can follow along with the steps below.
With our SVG in place, we now set the
0. We’ll animate this back in later:
svg fill-opacity: 0;
We can now concentrate on drawing the SVG. We’ll achieve this by using the CSS
stroke-dasharray property controls the pattern of gaps and dashes used to make a stroke a path. For example,
stroke-dasharray: 10 applied to the paths in the SVG creates a dashed effect with stroke and gap lengths of ten pixels:
Now, for the animation we’re creating here, we want our gap and dash to be the same length as our
path. That is, the whole length of our logo outline will be considered “one dash”, so to speak, and one gap will also be the whole length of the outline too. The idea is that we’ll start with the logo outline as a gap, and then animate in the outline as the dash.
But how long is the logo’s outline? An easy way to deal with this is to set the length. Let’s edit our SVG code by adding
pathLength="1" to each path:
… <path pathLength="1" d="M110.57 … > …
This makes it much easier to do the drawing animation. Now that we’ve set the
pathLength, we can also set the
1 in the CSS:
svg path stroke-dasharray: 1;
Now, it appears that nothing has changed here, but that’s okay. The whole path for each part of the logo is just one big dash now. (You can experiment by removing
pathLength="1" from one of the paths. It will suddenly become a dotted line of 1px line and gaps.)
We can now use
stroke-dashoffset, which specifies how far into the dash pattern we should start the dash. In our case, we want to set
1, so we start on a
gap rather than a
dash. Since the length of each of our gaps is the entire length of our
path, we’ll now see a blank screen:
svg path stroke-dasharray: 1; stroke-dashoffset: 1;
We can now animate
stroke-dashoffset back to
0, which will give a drawing effect:
svg path stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2s forwards; @keyframes draw from stroke-dashoffset: 1; to stroke-dashoffset: 0;
Cool! With this in place we now have this:
To complete our animation, we just have to animate in our
svg width: 40%; fill-opacity: 0; // we set a delay of 2s so it won't start until our drawing is finished animation: fadeOpacity 2s forwards 2s; @keyframes fadeOpacity from fill-opacity: 0; to fill-opacity: 1;
We now have our final animation:
I bet that was a lot easier than you thought! I know the
stroke-dasharray attributes can be a little confusing, but when you set your
path to have a length of
1, they’re much easier to work with.
That’s a quick example of the power of CSS combined with SVG. Now let’s push this further in our next example.