# svg

UI Elements⚛ TSX Live preview

Animated Gradient Progress Rings

Three SVG rings that stroke-draw to 82/64/95% with glow and count-up labels.

HTMLCSSJavaScriptAdvanced

3.7k28.5k6.7kOpen

Stroke-draw success checkmark

On action the button draws a circle then a check via stroke-dashoffset animation and tints green — completion feedback.

35800Open

Animations Live preview

Circular progress ring

SVG ring fills with a glowing fuchsia arc and mono percentage — +10% and reset buttons animate it.

33100Open

Rotating circular text badge

Text runs around an SVG circle and slowly rotates around a glowing gradient core — seal/badge stamp.

34400Open

Draw-on Checkbox · Deep Indigo

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Deep Indigo palette.

66600Open

Draw-on Checkbox · Aurora Teal

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Aurora Teal palette.

22400Open

Draw-on Checkbox · Mono Pearl

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Mono Pearl palette.

18900Open

Draw-on Checkbox · Ultra Violet

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Ultra Violet palette.

42900Open

Draw-on Checkbox · Cyber Lime

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Cyber Lime palette.

75400Open

Draw-on Checkbox · Sunset Amber

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Sunset Amber palette.

72100Open

Draw-on Checkbox · Rose Gold

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Rose Gold palette.

66900Open

Draw-on Checkbox · Ocean Sky

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Ocean Sky palette.

59300Open

Energy Gauge Meter · Candy Pink

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Candy Pink palette.

47500Open

Energy Gauge Meter · Royal Gold

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Royal Gold palette.

14300Open

Energy Gauge Meter · Crimson Heat

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Crimson Heat palette.

65100Open

Energy Gauge Meter · Deep Indigo

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Deep Indigo palette.

14200Open

Energy Gauge Meter · Aurora Teal

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Aurora Teal palette.

48000Open

Energy Gauge Meter · Mono Pearl

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Mono Pearl palette.

60100Open

Energy Gauge Meter · Ultra Violet

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Ultra Violet palette.

35700Open

Energy Gauge Meter · Cyber Lime

A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Cyber Lime palette.

38600Open

Animations Live preview

Wave Divider

Animated SVG wave divider at section boundaries.

000Open

Animations Live preview

Line Draw SVG

Hand-drawn SVG path drawing itself on load.