Animating SVG with CSS

I did a course on Skillshare called “Creative Coding: Animating SVG with Simple CSS Code”. The course is relatively short (28 minutes) and covers the basics of animating SVG with CSS. I would say it’s aimed at people who already have a foundational understanding in HTML and CSS and want to level up their web development game.

To practice this, I created the SVG below using Illustrator and animated it.

The SVG

To do this, I inserted the SVG code into the HTML code.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.77 229.77" height="200px">
  <defs>
    <style>
      .cls-1{fill:#f0be59;}
      .cls-1,.cls-2{stroke:#231f20;}
      .cls-1,.cls-2,.cls-4{stroke-miterlimit:10;}
      .cls-1,.cls-4{stroke-width:3px;}
      .cls-2{fill:#fff;stroke-width:4px;}
      .cls-3{fill:#231f20;}
      .cls-4{fill:none;stroke:#fff;stroke-linecap:round;}
    </style>
  </defs><title>eye</title>
    <rect class="cls-1" x="1.5" y="1.5" width="226.77" height="226.77"/>
    <path class="cls-2" d="M191.79,114.72a110.81,110.81,0,0,1-156.81,0A110.81,110.81,0,0,1,191.79,114.72Z" transform="translate(1.5 1.5)"/>
    <g class="eye-center"> <!--added a <g> element to group the two components -->
      <circle class="cls-3" cx="114.89" cy="114.89" r="24.16"/>
      <path class="cls-4" d="M99.31,104.39c0-4.19,3.74-7.58,8.36-7.58" transform="translate(1.5 1.5)"/>
  </g>
</svg>

Using the web developer inspector tool, I could see that the SVG consists of four components:

1. The yellow square with the black outline <rect class="cls-1"...
2. The white oval with a black outline <path class="cls-2"...
3. The black circle <circle class="cls-3"...
4. The white curved line inside the black circle which represents the speck of light <path class="cls-4"...

Because I wanted to move the centre of the eye, which consists of components #3 and #4, I had to group these two components together by adding a <g> element in lines 15 and 18.

Editing the CSS code

This is the CSS code I used to animate my SVG. I could add this CSS code on a separate CSS file or within the <style> element in the SVG code.

.eye-center {
  animation-name: moveEye;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes moveEye {
  20% {
    transform: translateX(-30px);
  }
  60% {
    transform: translateY(-10px) scale(1.1);
  }

}

To define the animation in CSS, we use @keyframes followed by the given name of the animation, which in this case is @keyframes moveEye. The progress of the animation is defined using percentages. For this animation, I wanted to move (i.e. translate) and change the size (i.e. scale) of the centre of the eye. This can be done using the transform property.

Finally, I created a class called eye-center¹ and assigned it to the <g> element in the SVG code. This class consists of the animation name, how long one animation cycle should last, and how many cycles should be done.

Replacing the preloader of a website

So one of my side projects is developing and maintaining a symposium website. I created it from this Jekyll-based conference website which has an animated preloader. Armed with my newfound knowledge, I decided it was time I replaced the original preloader with an animation of the symposium’s logo pulsating.

Future Learning

I found this informative article that talks a bit more in-depth about animating SVG with CSS code. I’m looking forward to creating hover animations.

1. The only you’ll ever see me use American spelling is when I’m writing code. ↩