<div class="css-pattern-component pattern pattern__chocolate-rain"></div>

:root {
  --width: 100vw;
  --height: 100vh;
  --unit: 10px;
  --color1: #060389;
  --color2: #1425C2;
  --color3: transparent;
  --color5: #0818AE;
}

.css-pattern-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  &.pattern {
    display: block;
    position: relative;
    overflow: hidden;
    width: var(--width);
    height: var(--height);
    background-color: var(--color1);

    &:after {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: 
        radial-gradient(
          circle at center center,
          var(--color3), 
          var(--color3) 40%,
          var(--color1) 110%,
          var(--color1)
        )
      ;
    };

    &__chocolate-rain {
      background-size: calc(var(--unit) * 2.4) calc(var(--unit) * 3.2);
      background-position: calc(var(--unit) * -2) calc(var(--unit) * -2), calc(var(--unit) * -0.8) calc(var(--unit) * -0.4), calc(var(--unit) * 0.2) calc(var(--unit) * 0.2), calc(var(--unit) * 0.2) calc(var(--unit) * 1.2), calc(var(--unit) * -1) calc(var(--unit) * 1.8), calc(var(--unit) * -1) calc(var(--unit) * -0.4);
      background-image:
        conic-gradient(
          from 0 at calc(var(--unit) * 2) calc(var(--unit) * 2.2),
          var(--color3) 90deg,
          var(--color2) 90deg,
          var(--color2) 180deg,
          var(--color3) 180deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 2) calc(var(--unit) * 2.2),
          var(--color3) 90deg,
          var(--color2) 90deg,
          var(--color2) 180deg,
          var(--color3) 180deg
        ),
        radial-gradient(
          circle at center center,
          var(--color2) calc(var(--unit) * 0.2),
          var(--color3) calc(var(--unit) * 0.2)
        ),
        radial-gradient(
          circle at center center,
          var(--color2) calc(var(--unit) * 0.2),
          var(--color3) calc(var(--unit) * 0.2)
        ),
        radial-gradient(
          circle at center center,
          var(--color2) calc(var(--unit) * 0.2),
          var(--color3) calc(var(--unit) * 0.2)
        ),
        radial-gradient(
          circle at center center,
          var(--color2) calc(var(--unit) * 0.2),
          var(--color3) calc(var(--unit) * 0.2)
        )
      ;
    }
  }
}