Jeremie Roberrini

📖 ARTICLE

Making your first SVG animations

Story of a designer trying to code animations instead of asking a dev to figure it out.

 

Coded animations are the future of Webdesign

Introduction to SVG and animation

This is the general structure of an SVG:

<svg>
<object1 “definition of this object” />
<object2 “definition of this object” />
</svg>

This is what we are going to do:

<svg>
<object “definition of this object” >
<animate “do a bunch of cool stuff please” />
</object>
</svg>

A tip to get the best of Figma

 

Image for post

Step 1: load with a linear movement

loading animation svg

<object >
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”translate”
dur=”1.5s”
values=”0,0;-60,0″
repeatCount=”indefinite”
/>
</object>

Step2: the rotating swimming fish.

swimming fish loading svg

<object >
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
dur=”2s”
values=”-1.5 30 -10;1.5 30 -10;-1.5 30 -10″
repeatCount=”indefinite”
/>
</object>

Step3: the secret behind the lighthouse

lighthouse animation svg
tip on how to make a lighthouse effect

Step4: go in space with SVG path

solar system animation svg

<circle id=”Venus” cx=”10″ cy=”20″ r=”3″ fill=”#FC5FAB”>

<animateMotion
dur=”3s”
begin=”0″
repeatCount=”indefinite”
fill=”freeze”
path=”M-6 84.5C-6 84.5 7.5 65 30.5 65C53.5 65 66.5 84.5 66.5 84.5″
/>
</circle>

You are AWESOME!