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
/picostyle
for20Kb
total build size - Fast, performant animations π₯
-
wmr
for 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: scale
with 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. -
wmr
is really nice, will be using it in the future! - I'll never use
query-string
(or any other library) overURLSearchParams
again.
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