React SVGPathPlayer Demos

View the source to see how to use this React Component in a plain HTML file.

Path, Segments, Marker, Units, Scale, Time, Loading & Controls

Marker's position along the length and step numbers update when using buttons. Converts path inches to yards and display units.

Segments, Marker, Units, Scale, Loading & Controls

Step through path segments. Position along length and step numbers update. Converts path inches to meters and display units.

Path, Marker, Units, Time, Loading & Controls

Animate path/marker along path. Position along length updates. Units displayed without scaling.

Path, Segments, Time, Loading & Controls

Path is drawn, length, step numbers update via controls without marker.

Path, Marker, Time, Loading, Start & Repeat

Hide controls and continuously play path animation with marker.

Path, Marker, Time, Loading & Start

Hide controls and automatically play path animation with marker at start. Only plays one time.