Butterfly

Fork

Code

@grid: 5x4 / auto 600px / #f4efe6;

--lobe(w, k, a):
  $w * exp($k * (cos(atan2(sin(t), abs(cos(t))) - $a) - 1));

background: @P(
  #d1495b, #edae49, #00798c, #30638e,
  #003d5b, #6a4c93, #f26419
);

rotate: @r(±8deg);
clip-path: @shape(
  points: 240;
  r: .06
    + $lobe(1, @r(4, 10), @r(.3, .8))
    + $lobe(@r(.5, .9), @r(5, 14), -@r(.5, 1.1))
    + $lobe(@r(.7), 400, -@r(1.1, 1.35))
    + $lobe(.55, 900, 1.33);
  scale: .62;
);

::before, ::after {
  content: ''; position: absolute; inset: 0;
  clip-path: inherit;
  background: @pn(#fff8, #222);
  scale: @pn(.72, @r(.3, .5));
}