Chart animation 1.2.2

Five keyframes and matching utility classes used by the new Sparkline, Counter, and Live dot Web Components. Use them directly to animate plain SVG/HTML — no chart library required. Deutsch: Chart-Animation

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Animate chart/sparkline presentations with the documented chart animation utilities.

When not

Provide static fallbacks when motion is reduced.

Keyframes

Name	What it animates
`velin-stroke-draw`	SVG stroke draw-in via `stroke-dashoffset`
`velin-sparkline-glow`	Pulsing drop-shadow halo around a path
`velin-value-bump`	Scale + colour pop for ticked values
`velin-live-pulse`	Concentric box-shadow ring (live dot)
`velin-count-fade`	Opacity + translate-Y fade for counters

Utility classes

Class	Effect
`.velin-chart-line`	SVG path with auto stroke-draw using `--velin-chart-len` custom prop
`.velin-chart-area`	Fade-in for area fill beneath a chart
`.velin-chart-glow`	Loops `velin-sparkline-glow` on the host element
`.velin-spark-tick`	One-shot value bump for KPI updates
`.velin-live-pulse`	Looping ring around a dot/badge
`.velin-count-fade`	Single fade for new counter values

Custom properties

`--velin-chart-len`	Path length; set automatically by `<velin-sparkline>`
`--velin-chart-glow-color`	Halo colour; defaults to `--velin-color-primary`
`--velin-chart-bump-color`	Tick flash colour
`--velin-chart-area-fill`	Area fill paint
`--velin-live-color`	Live-pulse colour

Usage

<svg viewBox="0 0 320 96">
  <path class="velin-chart-line" style="--velin-chart-len: 320" d="M0,90 L80,55 L160,30 L240,18 L320,10"/>
</svg>

Reduced motion

All chart utility classes are disabled under prefers-reduced-motion: reduce: strokes display fully drawn, glows stop, and pulses freeze. No author code required.