SVG Draw
SVGドロー
A stroke that draws itself along the scroll, laid over a faint copy of the full path so the remaining distance stays legible. The progress runs through a spring, which keeps a fast scroll from snapping the line without detaching it from your scroll position. Built with Framer Motion path drawing↗↗ and Tailwind CSS.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion, useScroll, useSpring } from "framer-motion"
import { useRef, type ReactNode } from "react"
type SvgDrawProps = {
path?: string,
viewBox?: string,
height?: number,
strokeWidth?: number,
How to use it3
"use client"
import { SvgDraw } from "@/components/ui/svg-draw"
export default function Page() {
return (
<SvgDraw path="M20 20 C 120 20, 120 140, 220 140 S 320 260, 420 260">
<p>Scroll to draw the line.</p>
</SvgDraw>
)
Props
SvgDraw
| Name | Default | Description |
|---|---|---|
| path | a cubic curve | string The SVG path data to draw |
| viewBox | "0 0 440 280" | string viewBox for the SVG, matched to the path |
| height | 420 | number Height of the scrollable viewport in pixels |
| strokeWidth | 3 | number Width of both the track and the drawn stroke |
| children | — | ReactNode Content scrolled past behind the drawing |
| dark | false | boolean Render the dark palette |