Vercel’s landing page is cool, but it could be a lot better with this one little trick.
If you’re like me, you tend to focus on the little details that might fly under the radar for most other people. When I visit Vercel’s landing page, the first thing that catches my eye is the big rainbow prism triangle thingie:
While impressive in a way, my eyes bleed every time I see this magnificent symphony of colors. The reason for my angst? Moiré patterns.
These little bastards show up because our screens don’t have high enough resolution relative to the required sampling frequency (y’all remember Nyquist theorem from college, right?). The gaps between individual stripes create these weird interference patterns (I’m sure a mathematician or computer graphics expert could explain that more formally).
Luckily, there’s a pretty simple cure: tweaking the anti-aliasing logic. Changing how SVGs alias things is actually a bit tricky, though you could try adjusting the shape-rendering attribute of individual lines (desired results not guaranteed). However, a surefire workaround to mask the issue is to apply a bit of blur to the whole shebang.
The code for it could look something like this:
<svg class="triangle_blackoutLines">
<filter id="soften">
<feGaussianBlur in="SourceGraphic" stdDeviation="1">feGaussianBlur>
filter>
<g filter="url(#soften)">
g>
svg>
Just play with the stdDeviation value until the Moiré patterns disappear, while still keeping the image crisp enough.
P.S. By the way, LangChain’s landing page has a similar issue, although they’re using a video file instead of canvas + SVG.
P.P.S. As a sidenote, be careful with the id of the filter tag! I once spent hours debugging an issue where two SVGs defined linearGradient elements with the same id. Moral of the story: always make your id‘s unique!
