I've decided to start sharing my daily generative art sketches and demos on my blog. I regret not doing this years ago, but better late than never!
Warming up
@grid: 16x10 / 100% auto 1.8;
@size: @r(15%, 99%);
background: @p(#282846, #fed049, #0000);
margin: auto;
border: 1px solid #282846;
border-radius: @p.cycle(98% 0 0 0);
Safari has a rendering bug for border-radius
to be 100% 0
, so 98%
is used.
Marine life
@grid: 12x8 / 100% auto / #333 +1.4;
@seed: 1676215965847;
@size: 37%;
margin: auto;
background: #222;
border-radius: 50%;
z-index: calc(@I - @hypot(@dx, @dy));
translate: @rn(±100%, 5) @rn(±100%, 5);
font-size: .1vmin;
box-shadow: @m40(
calc(@dx*@n*@rn(-2em))
calc(@dy*@n*@rn(-2em))
0 hsl(@n(*7) 80% 50% / @n(3/))
);
I really love this one and saved it for wallpapers.
Compact circles
@grid: | 11x1 / 100% auto 1.5 / #9a923e +2 *45deg;
@seed: 1676332860181;
flex: calc(@hypot(@dx, @dy) + 1);
transform: skew(calc(@dx * 8deg));
background: @doodle(
@grid: - 15x1;
flex: calc(@hypot(@dx, @dy) + 1);
transform: skew(calc(@dx * 8deg));
border: 1px solid #5A3905;
border-radius: 50%;
--c: #feedd8,#fe8a57,#edc263, #faa78c;
background: radial-gradient(
circle at @M2.r(100%),
@stripe(@p(--c) @r(20%, 50%), @P)
);
);
It's not straightforward to achieve this layout with CSS Grid alone. Using Flexbox and different flex
values is much easier.
Spiral rings
@grid: 1x1x9 / 100% auto 1.5 / #abc1e8 +2.5 *@r(360deg);
@seed: 1676339343815;
@size: 61.8% auto 1;
position: absolute;
inset: @pn.@cycle(8% auto auto 8%);
border: 1px solid #fff;
border-radius: 50%;
--c: #fcb29e,#77ac64,#f0422b,#002044;
background: radial-gradient(
circle at @M2.r(100%), @stripe(@p(--c), @p)
);
:)