The simplest way to animate SVG with just CSS!

SVG File

First off, prepare the SVG file you would like to use. In this case I'm going to use SAYS logo. You can get the SVG code from opening the SVG file in mostly any text editor such as SublimeText. This is how usually the code will look like:

See the Pen SAYS SVG by Wawan (@wwnla) on CodePen.

Don't worry about the codes. The most important part is to make sure your SVG is in this sequence: svg > g > path

You don't really need to understand all these codes for now but you can learn more about it here. In this tutorial we're only gonna use these SVG attributes:

HTML

Now, insert the SVG code into your html:

See the Pen svg-html by Wawan (@wwnla) on CodePen.

SVG Attributes

In your SVG code, set the 'stroke-width' to any number that you desire. For this one, I set it to '0.3'. 'Stroke-width' or in the more layman term is actually the border width for the SVG. While 'stroke' attribute is to set the color of the stroke. Here I set it to '#FFFFFF'. Before we move on to the CSS part, set the value for 'fill' attribute to 'none' to keep the graphic background transparent. Check back on the code above as reference if you aren't sure where to apply these codes to.

CSS

And now for the final part. The main secret ingredient to animate the SVG which is lies in the CSS, simply by using the CSS3 keyframes animation!

See the Pen SVG-css by Wawan (@wwnla) on CodePen.

View it live in action here.


1,263 0 0