File to Route Diagram

Overview

Stagger a file tree. Highlight the target row. Draw an SVG stroke to a typing URL.

Build

1. 01

   Tree rows slide in by depth.

2. 02

   Target row glows.

3. 03

   Bracket or arrow stroke-draws to the right.

4. 04

   URL types.

path { stroke-dashoffset: from-full → 0 }
.url { animation: typewriter-reveal }