<style>
  css-doodle {
    --color: @p(#010059, #52437b, #ff7a8a, #fcf594)@p([2-9a-d])@lp();
    --rule: (
      :doodle {
        @grid: 8 / 120vmin 80vmin;
        max-width: 100vw;
        background: linear-gradient(#ff7a8a, #fcf594);
        filter: hue-rotate(-22deg);
        overflow: hidden;
      }
      @size: @r(4vmin, 15vmin);
      mix-blend-mode: multiply;
      transform: translate(@m2(@r(-80%, 100%)));
      border-radius: 50%;
      --n: @p(-1, 1);
      --c: var(--color);
      box-shadow: @m100(
        calc(@sin(@n() / 10) * 1.8vmin * @var(--n))
        calc(@n() * 1vmin) 0
        @var(--c)
      );
      background: @m(@p(0, @ri(500)), (
        radial-gradient(var(--color) 50%, transparent 0)
        @r(100%) @r(100%) / @r(1px, 3px) @lr()
        no-repeat
      ));
      background-color: var(--color);
    );
  }   
</style>
<css-doodle use="var(--rule)" click-to-update></css-doodle>
html, body {  
  height: 100%;  
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js