Webkomponens minták CSS-sel történő rajzolásához!

Kattintásra változó CSS minták a < css-doodle /> eszközzel! Ide kattintva bővebb információkat találhatunk róla.

:doodle { @grid: 18 / 50vmax; background: #0a0c27; } --hue: calc(180 + 1.5 * @row * @col); background: hsl(var(--hue), 50%, 70%); margin: -.5px; transition: @r(.5s) ease; clip-path: polygon(@pick( '0 0, 100% 0, 100% 100%', '0 0, 100% 0, 0 100%', '0 0, 100% 100%, 0 100%', '100% 0, 100% 100%, 0 100%' ));

:doodle { @grid: 7 / 50vmax; background: #0a0c27; } @shape: clover 5; background: hsla( calc(360 - @i * 4), 70%, 68%, @r.8 ); transform: scale(@r(.2, 1.5)) translate(@m2.@r(±50%));

:doodle { @size: 36em; } background: rgba(96, 86, 158, @rand(.9)); transition: .2s ease @rand(200ms); will-change: transform; transform: rotate(@rand(360deg)); clip-path: polygon( @rand(100%) 0, 100% @rand(100%), 0 @rand(100%) );