<div class="css-pattern-component pattern pattern__carpet"></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)
        )
      ;
    };

    &__carpet {
      background-size: calc(var(--unit) * 14) calc(var(--unit) * 14);
      background-position: calc(var(--unit) * -10) calc(var(--unit) * 3), calc(var(--unit) * -9) calc(var(--unit) * 2), calc(var(--unit) * -8) calc(var(--unit) * 1), calc(var(--unit) * -7) 0, calc(var(--unit) * -3) calc(var(--unit) * 3), calc(var(--unit) * -2) calc(var(--unit) * 2), calc(var(--unit) * -1) calc(var(--unit) * 1), 0 0, calc(var(--unit) * -10) calc(var(--unit) * 10), calc(var(--unit) * -9) calc(var(--unit) * 9), calc(var(--unit) * -8) calc(var(--unit) * 8), calc(var(--unit) * -7) calc(var(--unit) * 7), calc(var(--unit) * -3) calc(var(--unit) * 10), calc(var(--unit) * -2) calc(var(--unit) * 9), calc(var(--unit) * -1) calc(var(--unit) * 8), 0 calc(var(--unit) * 7);
      background-image:
        conic-gradient(
          from 0 at calc(var(--unit) * 13) calc(var(--unit) * 1),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 11) calc(var(--unit) * 3),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 9) calc(var(--unit) * 5),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 7) calc(var(--unit) * 7),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 13) calc(var(--unit) * 1),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 11) calc(var(--unit) * 3),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 9) calc(var(--unit) * 5),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 7) calc(var(--unit) * 7),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 13) calc(var(--unit) * 1),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 11) calc(var(--unit) * 3),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 9) calc(var(--unit) * 5),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 7) calc(var(--unit) * 7),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 13) calc(var(--unit) * 1),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 11) calc(var(--unit) * 3),
          var(--color1) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 9) calc(var(--unit) * 5),
          var(--color2) 90deg,
          var(--color3) 90deg
        ),
        conic-gradient(
          from 0 at calc(var(--unit) * 7) calc(var(--unit) * 7),
          var(--color1) 90deg,
          var(--color3) 90deg
        )
      ;
    }
  }
}