SVG Animations Concept

Svg animations

Concept which helps to create simple animations based on existing svg illustrations.

Here you can see a simple svg illustration of the ball:

And its animated version.

Animations with jumping ball:

Ball with moving gradient:

Variants of usage for Eteo

We use road illustration SVGs in Eteo to test users’ knowledge of traffic rules: Each illustration presents several answer options, where every option represents a possible traffic scenario
For every scenario, we can create an SVG animation:

  • – if the user selects a wrong answer, they’ll see a simulated accident;
  • – if they choose the correct one, all vehicles move safely through the intersection.

Breaking Down the Animation Code

To understand how the jumping ball animation works, let’s look at the SMIL (Synchronized Multimedia Integration Language) code inside the SVG file. This is the <animateTransform> element that makes the ball move.

<animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -30; 0 0"
        dur="1.5s"
        repeatCount="indefinite"
        keyTimes="0; 0.5; 1"
        calcMode="spline"
        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
/>

Here is a short breakdown of what each attribute does:

  • attributeName="transform": Specifies which attribute of the parent element we want to animate. Here, we are changing its transform property.
  • type="translate": Defines the type of transformation. translate means we are moving the object along the X and Y axes.
  • values="0 0; 0 -30; 0 0": A semicolon-separated list of values for the animation. The ball starts at its original position (0 0), moves 30 units up on the Y-axis (0 -30), and then returns to the start (0 0).
  • dur="1.5s": The duration of a single animation cycle. The entire jump takes 1.5 seconds.
  • repeatCount="indefinite": Makes the animation loop forever.
  • keyTimes="0; 0.5; 1": A list of time markers (from 0% to 100%) that correspond to the values. This means the animation reaches the 0 -30 position at the halfway point (0.5) of the duration.
  • calcMode="spline": Sets the interpolation mode. spline means the animation’s speed will follow a custom curve defined in keySplines, rather than being linear.
  • keySplines="0.42 0 0.58 1; ...": Defines the cubic Bézier curve for the timing. These specific values create a smooth “ease-in-out” effect, making the movement look much more natural.

Analyzing the Glowing Ball Animation

The glowing effect on the second ball is created by animating the radial gradient that fills it. This creates the illusion of a moving light source. The animation is controlled by two separate tags working together.

<animate
        attributeName="fx"
        values="35%; 65%; 35%"
        dur="3s"
        repeatCount="indefinite" />
<animate
        attributeName="fy"
        values="35%; 25%; 35%"
        dur="3s"
        repeatCount="indefinite" />
  • attributeName="fx": This animates the horizontal (X-axis) position of the gradient’s focal point, or “hotspot”.
  • attributeName="fy": This animates the vertical (Y-axis) position of the same focal point.
  • values="35%; 65%; 35%" (for fx): Moves the highlight from a point 35% across the shape to 65% and back again, creating a side-to-side motion.
  • values="35%; 25%; 35%" (for fy): Moves the highlight from a 35% vertical position up to 25% and back down.
  • dur="3s": The duration for a complete cycle of this light movement is 3 seconds.
  • repeatCount="indefinite": Ensures the animation plays in a continuous loop.

By animating both the fx and fy coordinates simultaneously, we create a smooth, diagonal movement of the “glow” across the ball’s surface.

Tools for creating animations

All these concepts are useful to know, but it’s very hard and time-wasting to create animations manually.
To create animations it’s better to use specific tools like SVGator - for now the best tool to create svg animations