Back

SVG Curved TOC

Interactive Table of Contents

Click any item — or wait for auto-cycle

Cubic Bezier Connector

C 8 56 24 4 24 60

Thumb Animation Method

clip-path

Only clip-path is animated — no layout recalc

offset-path / offset-distance

distance: 30% — element follows the path

Techniques from the article

  • 1.Cubic Bezier curves — the SVG C command creates smooth S-curves between TOC items at different indent depths using control points offset by ±4px.
  • 2.clip-path animation — instead of mask-image + transform, use clip-path: inset() to mask the highlighted SVG. Only the clip rect is transitioned, avoiding costly layout recalculation.
  • 3.Thumb box positioning — a small circle at the thumb edge. Keeping it on the curved path requires solving the Bezier polynomial or using getPointAtLength() iteratively.
  • 4.offset-path — CSS property that pins an element to an SVG path using offset-distance, but only accepts path distance, not y-position.

Based on Some Nice Things with SVG (Part 2) by @fuma_nama

Component Code (Next.js)

Use Copy Code to load the current local source for the SVG Curved TOC component.

Claude / Codex Prompt

Build an interactive SVG Table of Contents component in Next.js demonstrating techniques from Fuma Nama's "Some Nice Things with SVG (Part 2)" blog post.

Requirements:
- Render a nested TOC with items at varying indent depths (0, 1, 2)
- Connect items with smooth SVG cubic Bezier curves using the C path command
- Animate the active item highlight using clip-path (not mask-image) to avoid layout recalculation
- Include a small "thumb box" circle indicator that follows the active item
- Show an interactive Bezier connector demo with adjustable depth controls
- Show a clip-path vs mask-image comparison demonstrating the performance difference
- Show an offset-distance demo illustrating how elements follow SVG paths
- Auto-cycle through items to demonstrate the animation
- Use Tailwind CSS, keep the Proteus clean theme
- Credit: https://x.com/fuma_nama
- Source: https://www.fuma-nama.dev/blog/svg-art-2