$s: 12.5em;
$o: 1px;
html {
--l: transparent calc(50% - #{$o}), #fff 0 calc(50% + #{$o}), transparent 0;
background:
linear-gradient(-45deg, var(--l)),
linear-gradient(45deg, var(--l)),
repeating-conic-gradient(#123750 0% 12.5%, #bc4a33 0% 25%) .5*$s .5*$s,
conic-gradient(from 90deg at 2*$o 2*$o, transparent 25%, #fff 0%) (-1*$o) (-1*$o),
repeating-conic-gradient(from 45deg, #000 0% 25%, #0000 0% 50%) .5*$s 0,
repeating-conic-gradient(#fed475 0% 12.5%, #dc9d5c 0% 25%);
background-size: .5*$s .5*$s, .5*$s .5*$s, $s $s, .5*$s .5*$s, $s $s, $s $s;
background-blend-mode: normal, normal, lighten
}
View Compiled
// Code ping-pong inspired by https://codepen.io/t_afif/pen/KKeZWjj
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.