Get the latest tech news
Nice things with SVG
Exploring SVG and its visual effects applications
To implement it, we have to render the TOC outline on server, without client-side JavaScript to make it compatible with SSR. This isn't hard, but we also want to render a highlighted part of outline where the items are active, or their corresponding heading is visible in the viewport. <div style={{ maskImage: `url("data:image/svg+xml,${ // URI encoded SVG image encodeURIComponent( `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 236">...</svg>` ) })`, }}> <div style={{ width: 1, height: thumb.height, transform: `translateY(${thumb.top}px)`, transition: "all 500ms", backgroundColor: "white", }} /></div> Huge thanks to Clerk for inspiring me on this, I've never thought the TOC of a documentation site can be that interesting to play with.
Or read this on Hacker News