logo svelte /motion v0.7.14
FIG-001/ SVG

one spring, three attributes.

A single useSpring drives the ring’s stroke-dashoffset, the dot’s cx, and the line’s x2. No keyframes and no re-render: Motion subscribes to the value and writes each attribute on the channel it belongs to.

  • One useSpring feeds every bound attribute through useTransform, so they stay in lockstep.
  • cx and stroke-dashoffset are CSS properties, so they are written to element.style.
  • x2 is not a CSS property, so it is written with setAttribute — same value, different channel.
↩ all examples
api · motion.circleinput · useSpringchannels · style + attribute mode · live running source
one MotionValue Bound straight to SVG attributes — no keyframes
stroke-dashoffset progress ring
0%
cx & x2 both DOM channels

cx is a CSS property, so Motion writes it to element.style. x2 is not, so it is written with setAttribute. Same MotionValue, different channels.

category · svg
sheet · sheet 01 / 01
⟳ to re-run