<css-doodle click-to-update>
  <style>
    @grid: 5 / 70vmin;
    background: linear-gradient(@rand(360deg),
      @m(5, (@pick-n(#00fffc, #fffc00, #fc00ff) calc((@n - 1) * 100% / 2.5),
          @lp calc(@n * 100% / 5.5))));
    clip-path: @shape(split: 300;
      scale: .35;
      x: sin(@pick(1, 2, 3, 4)t) + cos(7t) + cos(2t) + .35;
      y: cos(@pick(1, 2, 3, 4)t) + sin(4t) + sin(t);
    );
    transform: rotate(@r(360)deg) scale(@r(.1, 4)) translate(@r(0%, 100%), @r(0, 150%));
  </style>
</css-doodle>
<a href="//sparklingman.com">&#60;/&copy;2021_sparklingman&#62;</a>

:root {
  --turquoise: #00fffc;
  --yellow: #fffc00;
  --pink: #fc00ff;
}

*,
html,
body {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}
body {
  align-items: center;
  background: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
}
css-doodle {
  background: black;
  box-shadow: 0 5vh 10vh hsla(0, 0%, 0%, 0.5);
  border: 7vmin solid black;
  position: fixed;
  z-index: 1;
  user-select: none;
  overflow: hidden;
}
a {
  bottom: 2vmin;
  color: black;
  font: 2vmin/1 monospace;
  position: fixed;
  text-decoration: none;
}