Ana Tudor 🐯

Another little pure #CSS pattern: rhombic 🔥 https://codepen.io/thebabydino/pen/mdKQXqg

Minified compiled CSS is under 380 bytes. Can you figure out how before checking the code? 😊

Palette:
ed7b32 f19b36 966459 824739
b65333 fadc9c f4bb3a d6552b
Rhombi have a 60° acute angle and are 4em wide.

#cssPatterns #CodePen

Dec 5, 2022 at 9:38amWeb
Show threadJoe LanmanDec 5, 2022
@anatudor nice! Reminds me of Moquette
https://www.ltmuseum.co.uk/collections/stories/design/history-moquette
A history of moquette | London Transport Museum

Moquette - from the French for carpet - is London's most recognisable fabric. Discover its history since its first introduction in the 1920s to today.

London Transport Museum
Show threadAna Tudor 🐯Dec 5, 2022

@joelanman I actually have a coolection of textile-looking patterns too https://codepen.io/thebabydino/full/OJmpzya

Might be able to pull off CSS-ing a couple of the ones in that link too.

Show threadyuanchuanDec 5, 2022

@anatudor

A quick SVG version:

https://css-doodle.com/svg/?code=viewBox%3A+0+0+1+1%3B%0ApreserveAspectRatio%3A+xMidYMid+slice%3B%0Arect+%7B%0A++width%2C+height%3A+100%25%3B%0A++fill%3A+defs+pattern+%7B%0A+++style+transform%3A+rotateY%28-60deg%29+rotate%2845deg%29%3B%0A++++width%2C+height%3A+65%25%3B%0A++++viewBox%3A+0+0+8+8%3B%0A++++rect*9x9+%7B%0A++++++x%2C+y%2C+width%2C+height%3A+%40nx%28-1%29%2C+%40ny%28-1%29+1+1%3B%0A++++++fill%3A+%40pn%28%0A++++++++%23ed7b32%2C+%23f19b36%2C+%23966459%2C+%23824739%2C%0A++++++++%23b65333%2C+%23fadc9c%2C+%23f4bb3a%2C+%23d6552b%0A++++++%29%0A++++%7D%0A++%7D%0A%7D

SVG playground