svgEffect

svgEffect applies the output of motion values to styles and attributes of one or more elements.

When these motion values update, the element will re-render once per frame during the render step of the frameloop.

const cx = motionValue(100)

svgEffect("circle", { cx })

In addition to regular styles, svgEffect also supports simple 0-1 progress values for drawing-style animations.

These values can be used with any SVG element that supports stroke, for instance <rect>, <path> etc.

By default, svgEffect applies valid styles via .style. In cases where there's also a valid attribute equivalent with the same name, these can be set with the attr prefix:

const width = motionValue(400)

svgEffect("rect", { attrWidth: width })