Daily Sketch 1 - Warming up

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)
);