https://fuma-nama.vercel.app/blog/svg-art
MeProjects
Playground
Blog
#SVG
More about SVG. Note that the example code is written in JSX (or
React), not ordinary HTML.
#Animated Wires
Make the line, using line or path.
Make it a mask.
Add animation.
@keyframes to-down {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(50px);
}
}
Make styles.
@keyframes to-down-2 {
0% {
transform: translateY(calc(var(--height) * -1));
}
100% {
transform: translateY(100%);
}
}
Most of these similar things are using the same technique. Mask out
an animated block, putting some animations and probably designed some
parts in Figma or other SVG editors.
Unkey's landing page is a nice example.
#Clerk TOC
I made a clerk-like style Table Of Contents (TOC) on Fumadocs, you
can try it out and play with the nice TOC.
preview
To implement it, we have to render the TOC outline on server, without
client-side JavaScript to make it compatible with SSR.
Since we're on server, we don't know the exact positions of elements.
My approach is to use absolute positions, render the outline as
different "components", and snitch them together.
toc
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.
Like:
example
I'll call it the thumb. It has to be animated, so we can't just
change the color of these outline components.
toc
We cannot animate the thumb with simple CSS solutions, lucky we have
the exact rendered positions of TOC items, since the thumb is meant
to be interactive, it is rendered on client!
Using the information from our browser, we can construct a "mask map"
on client, look like this:
The method to construct this map is SVG - yes, our old friend.
The d property of SVG isn't a nonsense auto-generated
string, it's a list of commands. See the Web Docs for more details,
it's quite a powerful tool.
With our new tool, we can tell SVG to render a line connecting each
point of the outline.
toc
This constructed a SVG that's identical to our original TOC outline
pre-rendered on server.
Similar to the technique we've learnt from Animated Wires, we can use
the CSS mask-image property to mask an animated div block to render
the thumb - a highlighted part of outline.
...`
)
})`,
}}
>
Check the source code to see my implementation in React.js.
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.
Last Updated:
Fuma Nama
An open-sourcerer.
Back to blog
Leave comment