24

Motion SVG Plugin

Smooth, reactive SVG attribute animations with Datastar signals

Interactive Bar Chart

Move the slider to animate bar heights with spring physics. The motion-svg plugin animates actual SVG attributes (height, y), not CSS transforms.

0.6
ABCD

Animated Gauge

The circle radius animates smoothly as you change the value. Uses the 'bouncy' spring preset for playful overshoot.

50
50

Position Animation

Animate both x and y positions with computed signals. The circle follows a diagonal path across the grid.

50

Stroke Animation

Animate stroke-width with signal values. The line thickness changes based on the signal value.

3

Path Drawing Animation

Animate stroke-dashoffset for progressive path drawing effects. Great for line drawing animations and progress indicators.

%
%

Transform Animations

Animate rotation, scale, and translation transforms. These are applied via the SVG transform attribute.

Rotate
Scale
Translate

Filter Effects Animation

Animate SVG filter parameters like blur (stdDeviation). Creates smooth transitions for visual effects.

Text Animation

Animate text properties like font-size and letter-spacing. Great for emphasis effects and dynamic typography.

50
Motion

Path Morphing

Morph between arbitrary SVG shapes using Flubber for smooth interpolation. Click the buttons to morph between different shapes.

600ms

The Flubber library handles point normalization and alignment automatically, creating smooth transitions even between shapes with different point counts.

API Reference

The motion-svg plugin uses Datastar signals for attribute animation. Use computed signals for derived values:

Syntax

from starhtml.plugins import track

# Define computed signals for derived values
(value := Signal("value", 0.5)),
(bar_height := Signal("bar_height", value * 100)),
(bar_y := Signal("bar_y", 120 - value * 100)),

# Pass Signal objects directly to track()
Rect(
    data_motion_svg=track(
        height=bar_height,
        y=bar_y,
        spring="gentle"
    )
)

Animatable Properties

  • height, width, x, y - Rectangle geometry
  • cx, cy, r, rx, ry - Circle/ellipse geometry
  • x1, y1, x2, y2 - Line endpoints
  • stroke-width, stroke-dashoffset - Stroke properties
  • rotate, scale, translate-x, translate-y - Transforms
  • opacity, fill-opacity, stroke-opacity - Opacity
  • font-size, letter-spacing - Text properties
  • stdDeviation - Filter effects (blur)
  • d - Path morphing (via Flubber)

Animation Options

  • duration:300 - Animation duration in ms
  • delay:100 - Delay before animation
  • spring:gentle|bouncy|tight|slow|snappy - Spring physics preset
  • ease:ease-in|ease-out|ease-in-out - Easing function