SVG animations with Examples

Resources

SVG Optimizers

Helpers

Learn more

Libraries

Create sprite with IcoMoon

To accelerate animations use

transform: translate3d: (0,0,0)

SVG transform origin is at (0,0)
To set it in the middle of the object use

transform-origin: 50% 50%

In Firefox only absolute values work (you can also use cx and cy from a circle to position it.

Basic Shapes

line
rect
circle
ellipse
polygon
polyline
path

Sample rectangle

<svg>
    <rect x="10" y="10"
            width="500" height="500"
            fill="yellow"
            stroke="blue"
            stroke-width="5" />
</svg>

Sample circle

<svg>
    <circle cx="50" cy="20" r="15"
            fill="yellow"
            stroke="blue"
            stroke-width="5" />
</svg>

Sample polygon

<svg>
    <polygon points="32.8, 72.3 54.2,65.1 ..."
            fill="yellow"
            stroke="blue"
            stroke-width="5" />
</svg>

Sample Linear Gradient

<svg>
    <linearGradient id="gradient"
                        x1="0%" y1="0%"
                        x2="0%" y2="100%"
                        spreadMethod="pad">
          <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
          <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>

    <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry=50 />
</svg>

Include SVG into HTML

The options are:

SVG as `<img>` in HTML. SVG is content!

<img src="nerds.svg" alt="Nerds being nerds." />

SVG as `background-image` in CSS. SVG is design!

.main-header {
    background-image: url(people.svg);
}

Inline SVG in HTML

<svg viewBox="0 0 1000 1000">
    <rect x="10" y="10"
            width="500" height="500"
            fill="yellow"
            stroke="blue"
            stroke-width="5" />
</svg>

Other are> object, embed, iframe – not so useful

Examples

View animations in Chrome as some of them are not optimized for FF and it’s issues with relative transform-origin property.

CSS Transform

See the Pen CSS transform by 22nds (@22nds) on CodePen.0

CSS 3D Transforms

See the Pen CSS 3d Transforms by 22nds (@22nds) on CodePen.0

CSS animation basics

See the Pen CSS animation basics by 22nds (@22nds) on CodePen.0

SVG flag animation

See the Pen Slovenian flag – css animation of SVG by 22nds (@22nds) on CodePen.0

SVG animation of rectangle

See the Pen SVG animation – rect by 22nds (@22nds) on CodePen.0

Airbnb balance.gif as SVG

See the Pen Airbnb balance.gif as SVG by 22nds (@22nds) on CodePen.0

CSS animation – paused/running on hover

See the Pen CSS animation – paused/running on hover by 22nds (@22nds) on CodePen.0

CSS animation – cat walk cycle

See the Pen CSS animation – walk cycle by 22nds (@22nds) on CodePen.0

SVG Square animation

See the Pen SVG square animation by 22nds (@22nds) on CodePen.0

Letter animation – SVG path

See the Pen Animating letter by 22nds (@22nds) on CodePen.0

Animated circle – path

See the Pen Animated SVG – circle path by 22nds (@22nds) on CodePen.0

Animated circles – paths

See the Pen SVG path animation – multiple paths by 22nds (@22nds) on CodePen.0

Animated circles – paths with dashes

See the Pen SVG path animation – multiple paths dashed by 22nds (@22nds) on CodePen.0

Animated SVG Path

See the Pen Animating SVG path by 22nds (@22nds) on CodePen.0

Animated SVG path – snail

See the Pen Draw SVG path by 22nds (@22nds) on CodePen.0

SVG loader

See the Pen SVG loader by 22nds (@22nds) on CodePen.0

Animated icon

See the Pen Animated SVG icon by 22nds (@22nds) on CodePen.0