Seeding

index.html

<css-doodle>
  <style>
    @grid: 50x1 / 50vmin;
    :container {
      perspective: 23vmin;
    }
    background: @m(
      @r(200, 240), 
      radial-gradient(
        @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%,
        transparent 50%
      ) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat
    );

    @size: 80%;
    @place-cell: center;

    border-radius: 50%;
    transform-style: preserve-3d;
    animation: scale-up 20s linear infinite;
    animation-delay: calc(@i * -.4s);

    @keyframes scale-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0);
      }
      10% { 
        opacity: 1; 
      }
      95% {
        transform:
          translate3d(0, 0, @r(50vmin, 55vmin))
          rotate(@r(-360deg, 360deg));
      }
      100% {
        opacity: 0;
        transform: translate3d(0, 0, 1vmin);
      }
    }
  </style>
</css-doodle>

scripts

<script src="https://unpkg.com/css-doodle@0.17.2/css-doodle.min.js"></script>

seeding.markdown

Seeding

A Pen by Álvaro on CodePen.

License.

style.css

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