I'm a huge fan of Okan Uckun's work with minimal line designs, they'd make for a great tattoo one day. Here are a couple of examples:
Their art is subtle and beautiful (& I'm a sucker for tasteful minimal design 😌). I wanted to replicate some of the simpler designs with CSS and allow them to generate themselves with some JS, and this was the result!
Features
- Clicking on a pattern will enlarge it & encode its randomized parameters in the URL so you can share/bookmark them. Here's one I like!
- Hovering over a pattern will pause the auto-update timer.
- Pressing spacebar will regenerate all patterns at once.
Tech notes
-
preact/picostylefor20Kbtotal build size - Fast, performant animations 🔥
-
wmrfor near-instant builds & native TS support
Some things I learned along the way 👨🏫
- Inverse logarithm for hover state: I wanted a way to have a consistent hover experience across different sizes without re-rendering a pattern. The solution I ended up with uses
transform: scalewith a scale percentage relative to each pattern diameter. The calculation was simple in the end though I had to plot a line by hand to get to it 😄. It ended up being1 + Math.log(maxDiameter/diameter), bringing me back to my calculus/geometry days. -
wmris really nice, will be using it in the future! - I'll never use
query-string(or any other library) overURLSearchParamsagain.
Smooth animations how? 🧐
Relying primarily on transform: translate and transition: transform would overload the GPU. Instead I used position, which trades smoother, more expensive transition animations for much cheaper animations. After experimenting with both methods this performed better on both my M1 Macbook Pro and an older Intel Macbook Air when regenerating the full page of patterns.
The browser is recalculating layout each time a pattern's internal state is updated, but this calculation is still cheaper than hundreds (or thousands) of individual GPU threads to handle complex translations! I may do more research into this as it was interesting how relying on browser recalculation was faster than offloading to GPU, which I presumed would be faster.
What's next?
Not really sure, just made this for fun. I may add more geometry for additional pattern possibilities. Maybe one day I'll use it for a gallery wall with a projector? Or make some NFTs? Who knows. Thanks for reading and share any patterns that you like in the comments!
Top comments (1)
Interesting read