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

    &__patchwork {
      background-size: calc(var(--unit) * 10) calc(var(--unit) * 10);
      background-image:
        conic-gradient(
          var(--color3) 90deg,
          var(--color1) 90deg,
          var(--color1) 180deg,
          var(--color2) 180deg,
          var(--color2) 270deg,
          var(--color1) 270deg,
          var(--color1) 300deg
        ),
        repeating-linear-gradient(
          45deg,
          var(--color2) 0%,
          var(--color2) 2%,
          var(--color3) 2%,
          var(--color3) 4%
        )
      ;
    }
  }
}