JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/52982/css-doodle.v0.2.0.min.js"></script>
 <css-doodle>
:doodle {
    @grid: 9 / 61.8vmin; 
    @shape: circle;
  }

  will-change: transform;
  transition: .4s @rand(600ms);
  transform: rotate(@rand(360deg));
  @shape: triangle;

  --n: calc(
      @abs(@abs(@row() - 5)
    + @abs(@col() - 5) - 9) / 9 
  );

  background: hsla(
    calc(var(--n) * 360 + 120),
    60%, 68%, var(--n)
  );
</css-doodle>

CSS

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #0a0c27;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

css-doodle {
  cursor: pointer;
}

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

css-doodle:not(:defined) {
  display: none;
}

JavaScript

document.querySelector('css-doodle')
  .addEventListener('click', function(e) {
    e.target.update();
  })