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