VN.CSS

A collection of patterns created with two colors on Vietnam's flag

Download

vn.css

vn.min.css

Source code

CSS variable config

I used 2 main colors on Vietnam's flag. They are yellow and red. I also use a variable transparent to make more space for patterns. Below is the variable table

VariableValue
--redred
--yellowyellow
--transparent#0000

Demo

.vn-1 {
  background: linear-gradient(
      135deg,
      var(--transparent) 0 3.8rem,
      var(--red) 3.8rem 4.68rem,
      var(--yellow) 4.68rem 8.04rem,
      var(--red) 8.04rem 8.92rem,
      var(--transparent) 8.92rem
    ),
    linear-gradient(
      -135deg,
      var(--yellow) 0 3.77rem,
      var(--red) 3.77rem 4.21rem,
      var(--yellow) 4.2rem 8rem,
      var(--red) 8rem 8.46rem,
      var(--transparent) 8.46rem 14.4rem,
      var(--red) 14.4rem 14.82rem,
      var(--yellow) 14.82rem
    ),
    linear-gradient(
      135deg,
      var(--yellow) 0 12.28rem,
      var(--red) 12.28rem 13.16rem,
      var(--yellow) 13.16rem
    );
  background-size: 21rem 6rem;
}
.vn-2 {
  background: conic-gradient(
      at 0 2rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    conic-gradient(
      from 135deg at 0 6rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    conic-gradient(
      from 315deg at 100% 2rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    conic-gradient(
      from 45deg at 6rem 100%,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    linear-gradient(
      var(--yellow) 0 0.25rem,
      var(--transparent) 0.25rem 3.75rem,
      var(--yellow) 3.75rem 4.25rem,
      var(--transparent) 4.25rem 7.75rem,
      var(--yellow) 7.75rem
    ),
    linear-gradient(
      0.25turn,
      var(--yellow) 0 0.25rem,
      var(--transparent) 0.25rem 3.75rem,
      var(--yellow) 3.75rem 4.25rem,
      var(--transparent) 4.25rem 7.75rem,
      var(--yellow) 7.75rem
    ),
    linear-gradient(
      45deg,
      var(--yellow) 0 2rem,
      var(--transparent) 2rem 9.3rem,
      var(--yellow) 9.3rem
    ),
    linear-gradient(
      -45deg,
      var(--yellow) 0 2rem,
      var(--transparent) 2rem 9.3rem,
      var(--yellow) 9.3rem
    ),
    linear-gradient(
      var(--red) 0 2.1rem,
      var(--transparent) 2.1rem 5.9rem,
      var(--red) 5.9rem
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0 2.1rem,
      var(--transparent) 2.1rem 5.9rem,
      var(--red) 5.9rem
    ),
    conic-gradient(
      from 135deg at 50% 2.1rem,
      var(--transparent) 90deg,
      var(--red) 90deg 180deg
    ),
    conic-gradient(
      from 315deg at 50% 5.9rem,
      var(--transparent) 90deg,
      var(--red) 90deg 180deg
    ),
    var(--yellow);
  background-size: 8rem 8rem;
}
.vn-3 {
  background: radial-gradient(
      var(--transparent) 0 3.5rem,
      var(--yellow) 3.5rem 4rem,
      var(--transparent) 4rem
    ),
    radial-gradient(
      at 0 0,
      var(--transparent) 0 3.5rem,
      var(--yellow) 3.5rem 4rem,
      var(--transparent) 4rem
    ),
    radial-gradient(
      at 0 100%,
      var(--transparent) 0 3.5rem,
      var(--yellow) 3.5rem 4rem,
      var(--transparent) 4rem
    ),
    radial-gradient(
      at 100% 0,
      var(--transparent) 0 3.5rem,
      var(--yellow) 3.5rem 4rem,
      var(--transparent) 4rem
    ),
    radial-gradient(
      at 100% 100%,
      var(--transparent) 0 3.5rem,
      var(--yellow) 3.5rem 4rem,
      var(--transparent) 4rem
    ),
    var(--red);
  background-size: 8rem 8rem;
}
.vn-4 {
  background: radial-gradient(var(--yellow) 0 1.5rem, var(--transparent) 1rem),
    radial-gradient(at 0% 0%, var(--yellow) 0 1.5rem, var(--transparent) 1rem),
    radial-gradient(at 0% 100%, var(--yellow) 0 1.5rem, var(--transparent) 1rem),
    radial-gradient(at 100% 0%, var(--yellow) 0 1.5rem, var(--transparent) 1rem),
    radial-gradient(
      at 100% 100%,
      var(--yellow) 0 1.5rem,
      var(--transparent) 1rem
    ),
    linear-gradient(
      0deg,
      var(--transparent) 0 2.5rem,
      var(--yellow) 2.5rem 3rem,
      var(--transparent) 3rem 7rem,
      var(--yellow) 7rem 7.5rem,
      var(--transparent) 7.5rem 10rem
    ),
    linear-gradient(
      90deg,
      var(--transparent) 0 2.5rem,
      var(--yellow) 2.5rem 3rem,
      var(--transparent) 3rem 7rem,
      var(--yellow) 7rem 7.5rem,
      var(--transparent) 7.5rem 10rem
    ),
    var(--red);
  background-size: 10rem 10rem;
}
.vn-5 {
  background: linear-gradient(
      0.25turn,
      var(--transparent) 0 2.85rem,
      var(--yellow) 2.85rem 3.15rem,
      var(--transparent) 3.15rem
    ),
    conic-gradient(
      at 50% 0,
      var(--red) 105deg,
      var(--transparent) 95deg 255deg,
      var(--red) 255deg
    ),
    conic-gradient(
      at 50% 5.1rem,
      var(--transparent) 75deg,
      var(--red) 75deg 285deg,
      var(--transparent) 285deg
    ),
    linear-gradient(
      -15deg,
      var(--transparent) 0 3.5rem,
      var(--red) 3.5rem 3.8rem,
      var(--transparent) 3.8rem 8.3rem,
      var(--red) 8.3rem 8.6rem,
      var(--transparent) 8.6rem
    ),
    linear-gradient(
      15deg,
      var(--transparent) 0 3.5rem,
      var(--red) 3.5rem 3.8rem,
      var(--transparent) 3.8rem 8.3rem,
      var(--red) 8.3rem 8.6rem,
      var(--transparent) 8.6rem
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0 0.15rem,
      var(--transparent) 0.15rem 5.85rem,
      var(--red) 5.85rem
    ),
    var(--yellow);
  background-size: 6rem 8rem;
}
.vn-6 {
  background: conic-gradient(
      at 50% 7rem,
      var(--transparent) 40deg,
      var(--red) 40deg 45deg,
      var(--yellow) 45deg 130deg,
      var(--red) 130deg 230deg,
      var(--yellow) 205deg 315deg,
      var(--red) 315deg 320deg,
      var(--transparent) 320deg
    ),
    radial-gradient(
      circle at 50% 7rem,
      var(--transparent) 2rem,
      var(--red) 2rem 2.2rem,
      var(--yellow) 2.2rem 6rem,
      var(--red) 6rem 6.2rem,
      var(--yellow) 6.2rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 0 3.9rem,
      var(--red) 3.95rem 4.05rem,
      var(--transparent) 4.1rem
    ),
    linear-gradient(
      60deg,
      var(--transparent) 0 3.9rem,
      var(--red) 3.95rem 4.05rem,
      var(--transparent) 4.1rem
    ),
    linear-gradient(
      -60deg,
      var(--transparent) 0 3.9rem,
      var(--red) 3.95rem 4.05rem,
      var(--transparent) 4.1rem
    );
  background-size: 8rem 8rem;
}
.vn-7 {
  background: conic-gradient(
      from 180deg at 3.5rem 5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 90deg at 4.5rem 5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0 0.5rem,
      var(--transparent) 0.5rem 7.5rem,
      var(--red) 7.5rem
    ),
    linear-gradient(
      var(--red) 0 1rem,
      var(--yellow) 1rem 4rem,
      var(--red) 4rem 5rem,
      var(--transparent) 5rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 0 3.5rem,
      var(--red) 3.5rem 4.5rem,
      var(--transparent) 4.5rem
    );
  background-size: 8rem 8rem;
}
.vn-8 {
  background: linear-gradient(
      var(--yellow) 0 0.25rem,
      var(--transparent) 0.25rem 7.75rem,
      var(--yellow) 7.75rem
    ),
    linear-gradient(
      0.25turn,
      var(--yellow) 0 0.25rem,
      var(--transparent) 0.25rem 7.75rem,
      var(--yellow) 7.75rem
    ),
    conic-gradient(at 5.5rem 2rem, var(--red) 90deg, var(--transparent) 90deg),
    conic-gradient(
      from 90deg at 6rem 5.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 180deg at 2.5rem 6rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 270deg at 2rem 2.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(
      var(--transparent) 0 2rem,
      var(--yellow) 2rem 2.5rem,
      var(--transparent) 2.5rem 5.5rem,
      var(--yellow) 5.5rem 6rem,
      var(--transparent) 6rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 0 2rem,
      var(--yellow) 2rem 2.5rem,
      var(--transparent) 2.5rem 5.5rem,
      var(--yellow) 5.5rem 6rem,
      var(--transparent) 6rem
    ),
    var(--red);
  background-size: 8rem 8rem;
}
.vn-9 {
  background: conic-gradient(
      at 50% 0.25rem,
      var(--red) 120deg,
      var(--transparent) 120deg 240deg,
      var(--red) 240deg
    ),
    linear-gradient(var(--transparent) 8.5rem, var(--red) 8.5rem),
    linear-gradient(
      0.25turn,
      var(--red) 0.25rem,
      var(--transparent) 0.25rem 1.75rem,
      var(--yellow) 1.75rem 2.25rem,
      var(--transparent) 2.25rem 3.75rem,
      var(--red) 3.75rem
    ),
    conic-gradient(
      at 50% 1.5rem,
      var(--yellow) 30deg,
      var(--transparent) 30deg 330deg,
      var(--yellow) 330deg
    ),
    conic-gradient(
      at 50% 3rem,
      var(--red) 30deg,
      var(--transparent) 30deg 330deg,
      var(--red) 330deg
    ),
    conic-gradient(
      at 50% 4rem,
      var(--yellow) 30deg,
      var(--transparent) 30deg 330deg,
      var(--yellow) 330deg
    ),
    conic-gradient(
      at 50% 5rem,
      var(--red) 30deg,
      var(--transparent) 30deg 330deg,
      var(--red) 330deg
    ),
    conic-gradient(
      at 50% 6rem,
      var(--yellow) 30deg,
      var(--transparent) 30deg 330deg,
      var(--yellow) 330deg
    ),
    conic-gradient(
      at 50% 7rem,
      var(--red) 30deg,
      var(--transparent) 30deg 330deg,
      var(--red) 330deg
    ),
    conic-gradient(
      at 50% 8rem,
      var(--yellow) 30deg,
      var(--red) 30deg 330deg,
      var(--yellow) 330deg
    );
  background-size: 4rem 9rem;
}
.vn-10 {
  background: linear-gradient(
      var(--transparent) 2rem,
      var(--yellow) 2rem 4rem,
      var(--transparent) 4rem
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0 2rem,
      var(--transparent) 2rem 6rem,
      var(--red) 6rem
    ),
    linear-gradient(var(--yellow) 6rem, var(--red) 6rem);
  background-size: 8rem 8rem;
}
.vn-11 {
  background: linear-gradient(
      0.25turn,
      var(--red) 0.25rem,
      var(--transparent) 0.25rem 1.25rem,
      var(--red) 1.25rem 1.75rem,
      var(--transparent) 1.75rem 2.75rem,
      var(--red) 2.75rem
    ),
    conic-gradient(
      at 50% -0.5rem,
      var(--red) 135deg,
      var(--transparent) 135deg 225deg,
      var(--red) 225deg
    ),
    conic-gradient(
      at 50% 6.5rem,
      var(--transparent) 45deg,
      var(--red) 45deg 315deg,
      var(--transparent) 315deg
    ),
    conic-gradient(
      at 50% 2rem,
      var(--yellow) 135deg,
      var(--transparent) 135deg 225deg,
      var(--yellow) 225deg
    ),
    conic-gradient(
      at 50% 4rem,
      var(--red) 45deg,
      var(--yellow) 45deg 315deg,
      var(--red) 315deg
    );
  background-size: 3rem 6rem;
}
.vn-12 {
  background: linear-gradient(to top, var(--red) 1rem, var(--transparent) 1rem),
    linear-gradient(
      0.25turn,
      var(--red) 0.5rem,
      var(--transparent) 0.5rem 3.5rem,
      var(--red) 3.5rem 4.5rem,
      var(--transparent) 4.5rem 7.5rem,
      var(--red) 7.5rem
    ),
    linear-gradient(
      var(--yellow) 1rem,
      var(--transparent) 1rem 3rem,
      var(--yellow) 3rem 4rem,
      var(--red) 4rem 5rem,
      var(--yellow) 5rem 6rem,
      var(--transparent) 6rem 8rem,
      var(--yellow) 8rem 9rem,
      var(--transparent) 9rem
    ),
    conic-gradient(
      from 270deg at 2.5rem 3rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(at 5.5rem 3rem, var(--red) 90deg, var(--transparent) 90deg),
    conic-gradient(
      at 5.5rem 3rem,
      var(--red) 90deg,
      var(--transparent) 90deg 270deg,
      var(--yellow) 270deg
    ),
    linear-gradient(
      0.25turn,
      var(--yellow) 1.5rem,
      var(--transparent) 1.5rem 6.5rem,
      var(--yellow) 6.5rem
    ),
    var(--red);
  background-size: 8rem 10rem;
}
.vn-13 {
  background: linear-gradient(
      45deg,
      var(--transparent) 0 3.3rem,
      var(--yellow) 3.3rem 3.8rem,
      var(--transparent) 3.8rem 10.35rem,
      var(--yellow) 10.35rem 10.85em,
      var(--transparent) 10.85rem
    ),
    linear-gradient(
      -45deg,
      var(--transparent) 0 3.3rem,
      var(--yellow) 3.3rem 3.8rem,
      var(--transparent) 3.8rem 10.35rem,
      var(--yellow) 10.35rem 10.85em,
      var(--transparent) 10.85rem
    ),
    conic-gradient(
      from 135deg at 1rem 6.2rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 135deg at 9rem 6.2rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 135deg at 50% 7rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 225deg at 1.5rem 3.5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 45deg at 8.5rem 3.5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(
      to bottom,
      var(--transparent) 3.5rem,
      var(--red) 3.5rem 5rem,
      var(--transparent) 5rem
    ),
    linear-gradient(
      45deg,
      var(--transparent) 0 5.5rem,
      var(--red) 5.5rem 9.1rem,
      var(--transparent) 9.1rem
    ),
    linear-gradient(
      -45deg,
      var(--transparent) 0 5.74rem,
      var(--red) 5.5rem 9.1rem,
      var(--transparent) 9.1rem
    ),
    linear-gradient(
      45deg,
      var(--transparent) 0 9rem,
      var(--yellow) 9rem 9.5rem,
      var(--transparent) 9.5rem
    ),
    linear-gradient(
      -45deg,
      var(--transparent) 0 9rem,
      var(--yellow) 9rem 9.5rem,
      var(--transparent) 9.5rem
    ),
    var(--red);
  background-size: 10rem 10rem;
}
.vn-14 {
  background: linear-gradient(
      var(--red) 0.25rem,
      var(--transparent) 0.25rem 3.5rem,
      var(--red) 3.5rem 4rem,
      var(--transparent) 4rem 7.25rem,
      var(--red) 7.25rem
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0.25rem,
      var(--transparent) 0.25rem 3.5rem,
      var(--red) 3.5rem 4rem,
      var(--transparent) 4rem 7.25rem,
      var(--red) 7.25rem
    ),
    conic-gradient(
      at 2.5rem 2rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 90deg at 5.5rem 2.5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 180deg at 5rem 5.5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 270deg at 2rem 5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(
      var(--transparent) 2rem,
      var(--red) 2rem 2.5rem,
      var(--transparent) 2.5rem 5rem,
      var(--red) 5rem 5.5rem,
      var(--transparent) 5.5rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 2rem,
      var(--red) 2rem 2.5rem,
      var(--transparent) 2.5rem 5rem,
      var(--red) 5rem 5.5rem,
      var(--transparent) 5.5rem
    ),
    var(--red);
  background-size: 7.5rem 7.5rem;
}
.vn-15 {
  background: linear-gradient(
      var(--red) 0.5rem,
      var(--transparent) 0.5rem 9.5rem,
      var(--red) 9.5rem
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0.5rem,
      var(--transparent) 0.5rem 4.5rem,
      var(--red) 4.5rem 5.5rem,
      var(--transparent) 5.5rem 9.5rem,
      var(--red) 9.5rem
    ),
    linear-gradient(
      var(--yellow) 1.5rem,
      var(--transparent) 1.5rem 4.5rem,
      var(--yellow) 4.5rem 5.5rem,
      var(--transparent) 5.5rem 8.5rem,
      var(--yellow) 8.5rem
    ),
    conic-gradient(
      at 8.5rem 4.5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 270deg at 1.5rem 4.5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(at 8.5rem 6.5rem, var(--red) 90deg, var(--transparent) 90deg),
    conic-gradient(
      from 270deg at 1.5rem 6.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(at 7.5rem 4.5rem, var(--red) 90deg, var(--transparent) 90deg),
    conic-gradient(
      from 270deg at 2.5rem 4.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(
      var(--transparent) 3.5rem,
      var(--red) 3.5rem 4.5rem,
      var(--transparent) 4.5rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 3.5rem,
      var(--yellow) 3.5rem 4.5rem,
      var(--transparent) 4.5rem 5.5rem,
      var(--yellow) 5.5rem 6.5rem,
      var(--transparent) 6.5rem
    ),
    linear-gradient(
      0.25turn,
      var(--yellow) 1.5rem,
      var(--transparent) 1.5rem 8.5rem,
      var(--yellow) 8.5rem
    ),
    linear-gradient(
      var(--red) 2.5rem,
      var(--yellow) 2.5rem 3.5rem,
      var(--transparent) 3.5rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 2.5rem,
      var(--red) 2.5rem 7.5rem,
      var(--transparent) 7.5rem
    ),
    linear-gradient(
      to top,
      var(--red) 2.5rem,
      var(--yellow) 2.5rem 3.5rem,
      var(--transparent) 3.5rem
    ),
    var(--red);
  background-size: 10rem 10rem;
}
.vn-16 {
  background: linear-gradient(
      0.25turn,
      var(--transparent) 3.25rem,
      var(--yellow) 3.25rem 3.75rem,
      var(--transparent) 3.75rem
    ),
    linear-gradient(
      0.25turn,
      var(--red) 0.5rem,
      var(--transparent) 0.5rem 6.5rem,
      var(--red) 6.5rem
    ),
    radial-gradient(
      circle at 50% 0.87rem,
      var(--transparent) 3.5rem,
      var(--yellow) 3.5rem 3.75rem,
      var(--red) 3.75rem
    ),
    conic-gradient(
      from 120deg at 50% 1rem,
      var(--yellow) 120deg,
      var(--red) 120deg
    );
  background-size: 7rem 6rem;
}
.vn-17 {
  background: linear-gradient(
      0.25turn,
      var(--red) 0.5rem,
      var(--transparent) 0.5rem 4.5rem,
      var(--red) 4.5rem
    ),
    radial-gradient(
      circle at -4rem 50%,
      var(--red) 5.5rem,
      var(--transparent) 5.5rem
    ),
    radial-gradient(
      circle at 9rem 50%,
      var(--red) 5.5rem,
      var(--transparent) 5.5rem
    ),
    linear-gradient(
      var(--yellow) 0.25rem,
      var(--red) 0.25rem 0.75rem,
      var(--yellow) 0.75rem 7.25rem,
      var(--red) 7.25rem 7.75rem,
      var(--yellow) 7.75rem
    );
  background-size: 6rem 8rem;
}
.vn-18 {
  background: linear-gradient(
      0.25turn,
      var(--red) 0.5rem,
      var(--transparent) 0.5rem 6.5rem,
      var(--red) 6.5rem
    ),
    linear-gradient(
      var(--transparent) 3.05rem,
      var(--yellow) 3.05rem 3.55rem,
      var(--transparent) 3.55rem 4.45rem,
      var(--yellow) 4.45rem 4.95rem,
      var(--transparent) 4.95rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 3rem,
      var(--red) 3rem 4rem,
      var(--transparent) 4rem
    ),
    radial-gradient(
      circle,
      var(--transparent) 3rem,
      var(--yellow) 3rem 3.5rem,
      var(--red) 3.5rem
    ),
    conic-gradient(at 4.5rem 3.5rem, var(--red) 90deg, var(--transparent) 90deg),
    conic-gradient(
      from 90deg at 4.5rem 4.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 180deg at 2.5rem 4.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    conic-gradient(
      from 270deg at 2.5rem 3.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 1.5rem,
      var(--yellow) 1.5rem 2rem,
      var(--transparent) 2rem 5rem,
      var(--yellow) 5rem 5.5rem,
      var(--transparent) 5.5rem
    ),
    linear-gradient(
      var(--transparent) 3rem,
      var(--red) 3rem 5rem,
      var(--transparent) 5rem
    ),
    linear-gradient(
      var(--transparent) 2.5rem,
      var(--red) 2.5rem 3rem,
      var(--transparent) 3rem 5rem,
      var(--red) 5rem 5.5rem,
      var(--transparent) 5.5rem
    ),
    linear-gradient(
      0.25turn,
      var(--transparent) 2.5rem,
      var(--yellow) 2.5rem 3rem,
      var(--transparent) 3rem 4rem,
      var(--yellow) 4rem 4.5rem,
      var(--transparent) 4.5rem
    );
  background-size: 7rem 8rem;
}
.vn-19 {
  background: conic-gradient(
      from 342deg at 5rem 3.49rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ),
    conic-gradient(
      from 270deg at 3rem 3.49rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ),
    conic-gradient(
      from 198deg at 2.4rem 5.2rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ),
    conic-gradient(
      from 126deg at 4rem 6.2rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ),
    conic-gradient(
      from 54deg at 5.6rem 5.2rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ),
    var(--yellow);
  background-size: 8rem 8rem;
}
.vn-20 {
  background: conic-gradient(
      from 315deg at 50% 1.5rem,
      var(--red) 90deg,
      var(--transparent) 90deg
    ),
    linear-gradient(var(--yellow) 1rem, var(--transparent) 1rem),
    conic-gradient(
      from 45deg at 50% 3rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    conic-gradient(
      from 270deg at 50% 3rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    conic-gradient(
      from 90deg at 70% 3rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    conic-gradient(
      from 225deg at 30% 3rem,
      var(--red) 45deg,
      var(--transparent) 45deg
    ),
    linear-gradient(var(--yellow) 4rem, var(--transparent) 4rem),
    linear-gradient(
      45deg,
      var(--transparent) 6.1rem,
      var(--yellow) 6.1rem 7.1rem,
      var(--transparent) 7.1rem
    ),
    linear-gradient(
      -45deg,
      var(--transparent) 6.1rem,
      var(--yellow) 6.1rem 7.1rem,
      var(--transparent) 7.1rem
    ),
    var(--red);
  background-size: 10rem 6rem;
}