Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

trace path

Public visualization

trace path

0 stars0🌍 Public
MMTR
Last edited Aug 31, 2023
Created on Aug 31, 2023

A looping sine curve is traced continuously by two animated segments: a solid orange stroke and a trailing grey echo. The SVG paths use the `stroke-dasharray` and `stroke-dashoffset` attributes, with `<animate>` elements driving the dash offset from 0 to 500 over five seconds. The path length is measured via `SVGPathElement.getTotalLength()` in a React hook, while the static grey reference path shows the full curve. The example uses React 18 and inline SVG, with the curve defined by cubic Bézier coordinates in the path data.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed