SVGANIM Operating Manual

SVGANIM is an instrument for animating SVG drawings in the browser. A drawing is received, its parts are set in motion upon a timeline, and the result is delivered as one SVG file animated by CSS alone.

No player library ships with the drawing. No account is required. No fee is charged. Drawings never leave the machine: all work is done in the browser and retained there between sessions.

Every keyframe carries the easing of the motion leaving it. The last key of a track has none. Set default fixes an easing for every key made afterward.

Bezier

Exported as CSS cubic-bezier(). Handles may overshoot, for anticipation and recoil.

Hold

The value stands until the next key, then jumps. Exported as steps(1, end).

Roving keys

Select an inner key and press R. Its time is then derived: the easing of the fixed key before it runs on to the next fixed key, and the roving key is placed by its share of the distance, so the motion passes through without slowing. Press R again to fix it in time; the motion is kept as it stands. On export the span is cut into plain keyframes at the exact points, so the CSS replays it faithfully.

Bounce, elastic, spring

No single Bezier describes these. They are exported as CSS linear(), a polyline held within 0.15 percent of the true curve, with a cubic-bezier() fallback for older browsers.

Double-click a shape, or select it and press Enter, to edit its path. Rectangles, circles, ellipses, lines and polygons are converted to paths on entry.

• Drag an anchor to move it. Drag a handle to shape the curve. ⌥ breaks a smooth handle.
• Click the outline to add an anchor. ⌥-click or double-click an anchor to switch it between corner and smooth.
• ⇧ while dragging locks anchors to an axis, and handles to 45° steps.
• Drag across empty space to box anchors. Hold ⌥ to swing the box about its first corner; it clings to the path’s own axes, and ⇧ steps it by 15°.
• ⌫ deletes the selected anchors. ⌥ and the arrow keys nudge them.
• The pen (P) draws a new path. Click for corners, drag for curves, Enter to finish.

With auto-key on, a path edited at the playhead records a shape keyframe. Between two shape keyframes the path morphs. Anchors added or deleted apply to every keyframe of that path, so its forms always correspond point for point.

Morphs are delivered as SVG <animate> on the path’s d attribute. Safari does not animate the CSS d property; <animate> runs in every browser, inside <img> as well.

Two forms are offered. Both carry the same keyframes.

SVG and CSS

One self-contained .svg file, its keyframes written in a <style> block within. Place it in static/ and reference it with an image tag, or import it raw and render it inline. Hover and manual playback require it inline.

<!-- static/gear.svg -->
<img src="/gear.svg" alt="Gear" width="240" height="240" />

<!-- inline, for hover and manual playback -->
<script>
  import gear from '$lib/gear.svg?raw';
</script>

{@html gear}

Svelte 5 component

The same drawing as a .svelte file. It takes a playing prop and passes class and all other attributes through to the svg.

<script>
  import Gear from '$lib/Gear.svelte';
  let playing = $state(true);
</script>

<Gear class="w-48" {playing} />

Options

• Repeat. A set count, or forever.
• Direction. Forward, or ping-pong.
• Playback. Autoplay, on hover, or manual. Manual playback holds until the custom property --sa-play is set to running on the svg or a parent.
• Reduced motion. Under prefers-reduced-motion the drawing freezes at the first frame, freezes at the end, or ignores the preference, as chosen.