SVG Animations: Vector Motion and Effects

This article picks up where SVG UI Tricks left off. We already covered how to change fills and strokes with class toggles and how to reveal paths with stroke-dashoffset . Here we will briefly cover how to turn those same techniques into CSS keyframe animations and find all SVG-specific animation constraints in Gameface collected in one place.

Inline SVGs are part of the DOM, so every animation technique from the UI Animations article (transitions, @keyframes, the Web Animations API) applies to SVG elements exactly the same way it applies to a <div> or a <button>. There is no special SVG animation mode to learn.

Prerequisite

If you are not yet comfortable with inline SVG fills, strokes, CSS variables, or the stroke-dash progress technique, read the SVG UI Tricks article first. This article builds directly on those examples.

Keyframe Animations on SVG Elements

The SVG UI Tricks article used CSS transitions on the weapon rarity icon to interpolate between two states on a class change. Transitions work well for that one-time reactive change, but effects that should loop continuously (a blinking spark, a breathing glow, a pulsing opacity) call for @keyframes instead.

Since SVG presentation attributes (fill, stroke, opacity, transform) are valid CSS properties on inline elements, you write keyframe rules for them the same way you would for any HTML element. The following examples all build on the same weapon icon from the SVG UI Tricks article and demonstrate different properties being animated:

Legendary: spark blink and blade glow

rarity-animations.css

@keyframes spark-blink {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes blade-glow {
    0% {
        filter: drop-shadow(0 0 0.3vh rgba(78, 242, 217, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 1.2vh rgba(78, 242, 217, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 0.3vh rgba(78, 242, 217, 0.2));
    }
}

.weapon-button--legendary .weapon-icon__spark {
    animation: spark-blink 1.6s ease-in-out infinite;
}

.weapon-button--legendary .weapon-icon {
    animation: blade-glow 2s ease-in-out infinite;
}

Rare: stroke color shimmer

rarity-animations.css

@keyframes stroke-shimmer {
    0% {
        stroke: #ffd89d;
    }
    50% {
        stroke: #f2a34e;
    }
    100% {
        stroke: #ffd89d;
    }
}

.weapon-button--rare .weapon-icon__blade {
    animation: stroke-shimmer 2.4s ease-in-out infinite;
}

Locked: slow dim pulse

rarity-animations.css

@keyframes locked-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.weapon-button--disabled .weapon-icon {
    animation: locked-pulse 3s ease-in-out infinite;
}

Each animation starts when its modifier class is applied and stops when the class is removed, the same toggle pattern as the static rarity variants. The SVG structure and the CSS-variable system from the examples in the SVG UI Tricks article stay completely untouched - the keyframes just layer on top of it.

The same applies to the stroke-dash techniques from SVG UI Tricks. The stroke-dashoffset property is animatable through both transitions and keyframes, so you can use @keyframes for creating complex multi-stage stroke animations.

SVG Animation Gotchas

Animating inline SVGs works the same as animating any other DOM element, but there are several SVG-specific constraints in Gameface worth being aware of.

No SMIL Support

Gameface does not support SMIL (<animate>, <animateTransform>, <set>). If you encounter SVG code that uses these elements, convert the effect into CSS @keyframes, CSS transitions, or JavaScript setAttribute() calls.

Don’t use SMIL in your SVGs.

<!-- This will NOT work in Gameface -->
<rect width="100" height="100" fill="red">
    <animate attributeName="fill" from="red" to="blue" dur="2s" repeatCount="indefinite" />
</rect>

Convert the SMIL animation to CSS keyframes instead.

<!-- Use CSS keyframes instead -->
<rect class="color-swap" width="100" height="100" />

@keyframes color-swap {
    from {
        fill: red;
    }
    to {
        fill: blue;
    }
}

.color-swap {
    fill: red;
    animation: color-swap 2s infinite alternate;
}

Some CSS Properties Fail Silently on SVG Shapes

Not all CSS properties work on SVG child elements the way they do on HTML elements. Properties like filter (e.g., drop-shadow) and box-shadow

will not produce any visible effect when applied directly to a <path>, <rect>, or other SVG shape. The declaration is accepted without error, but nothing renders.

Always test animated properties on SVG elements in the Gameface Player to verify they take effect. When a property does not work on an SVG shape, apply it to the parent <svg> element or a wrapping HTML container instead:

/* No visible effect on the path */
path.weapon-icon__blade {
    filter: drop-shadow(0 0 1vh rgba(78, 242, 217, 0.6));
}

/* Works when applied to the parent <svg> or a wrapper */
svg.weapon-icon {
    filter: drop-shadow(0 0 1vh rgba(78, 242, 217, 0.6));
}

transform-origin Defaults to the SVG Origin

Unlike HTML elements where transform-origin defaults to the center of the element’s box, SVG elements default to the coordinate system origin (0, 0). When animating transform: scale() or transform: rotate() on an SVG path, set transform-origin explicitly to the visual center of the shape:

.weapon-icon__spark {
    transform-origin: 49px 18px;
}

Prefer <path> for Animated SVG Elements

Not all SVG elements support having their properties animated equally. For example, stroke-dasharray and stroke-dashoffset do not work on <circle> elements in Gameface. As a general rule, <path> is the safest element to animate since it has the broadest css-animated properties support. If you need a circular or rectangular shape that will be animated, draw it as a <path> with the appropriate commands rather than relying on <circle> or <rect>.

Units Required for Shared CSS/SVG Property Names

Properties like width, height, and font-size exist in both CSS and SVG but follow different parsing rules. In SVG attributes, these values can be unitless. In CSS keyframes, they must include units (px, em, etc.) even when the target is an SVG element. SVG-only attributes (like x, y, cx, cy) remain unitless.

svg-keyframe-units.css

@keyframes resize-rect {
    0% {
        y: 0; /* SVG-only, unitless is correct */
        width: 85px; /* Shared with CSS, units required */
    }
    100% {
        y: 100;
        width: 125px;
    }
}

If you omit the unit on a shared property, the keyframe value will not parse correctly and the animation will fail silently.

Arc Commands May Break Path Interpolation

When animating the d attribute between two path shapes, the engine interpolates commands point by point. This works for lines, quadratic, and cubic curves, but elliptical arc commands (A / a) are not guaranteed to interpolate correctly .

The engine converts arcs into up to four quadratic Bezier curves internally, and two similar-looking arcs may decompose into different curve counts:

M 10,30 A 20,20 0,0,1 50,30   →  2 internal curves
M 10,30 A 40,20 0,0,1 50,30   →  1 internal curve

Prefer quadratic (Q) or cubic (C) curves when animating between path shapes.

Anime.js Cannot Animate SVGs

SVG animations using Anime.js are not supported in Gameface. This includes path animations, SVG attribute tweening, and any SVG-specific Anime.js feature. Standard DOM element animations through Anime.js work normally. For SVG animation, use CSS @keyframes, CSS transitions, the Web Animations API (getAnimations(), playFromTo()), or direct setAttribute() calls.

Performance Considerations

Not all SVG properties carry the same animation cost. Inline SVGs are never cached in GPU textures, they follow DOM redraw rules and are re-tessellated (vector paths converted to renderable geometry) when their geometry changes. Appearance-only properties avoid this cost.

Lower cost (appearance only)	Higher cost (geometry changes)
fill, stroke, opacity	width, height
stroke-dashoffset	d (path data)
filter (on parent element)	transform (scale, when it changes bounds)

The Performance Win

stroke-dashoffset animation is particularly efficient. It changes which portion of an already-tessellated stroke is visible without altering the path geometry, so the engine skips re-tessellation entirely.

Transform-Based Animations

For transform-based animations (rotating icons, scaling indicators), keep the SVG geometry simple. A looping rotation on a 5-path icon is inexpensive. The same rotation on a detailed 200-path illustration would cause significantly more work each frame.