<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>