Svg Draw On Scroll

Renders an SVG path that animates as the user scrolls. The path draws itself based on scroll position, with optional marker at the tip. Use for scroll-triggered visual effects in a layout.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/svg-draw-on-scroll

npx layro-cli add @educlopez/svg-draw-on-scroll

npx layro-cli add @educlopez/svg-draw-on-scroll

bunx layro-cli add @educlopez/svg-draw-on-scroll

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  type MotionValue,
  motion,
  useMotionValue,
  useMotionValueEvent,
  useReducedMotion,
  useScroll,
  useSpring,
  useTransform,
} from "motion/react";
import {