html {
--u: 1.185vmin;
--hue: hue-rotate(0deg);
--c1: #000000;
--c2: #9a1f22;
--c3: #e35e13;
--gp: 50%/calc(var(--u) * 12) calc(var(--u) * 17.05);
height: 100vh;
filter: var(--hue);
background:
conic-gradient(from 0deg at 13.68% 94.08%, #fff0 0 50%, var(--c2) 0% 83.33%, #fff0 0 100%) var(--gp), /* left red end */
conic-gradient(from 0deg at 86.12% 94.08%, #fff0 0 16.66%, var(--c2) 0% 50%, #fff0 0 100%) var(--gp), /* right red end */
conic-gradient(from 0deg at 28.42% 88.14%, #fff0 0 50%, var(--c1) 0% 83.33%, #fff0 0 100%) var(--gp), /* left black end */
conic-gradient(from 0deg at 71.57% 88.14%, #fff0 0 16.66%, var(--c1) 0% 50%, #fff0 0 100%) var(--gp), /* right black end */
conic-gradient(from 0deg at 7.36% 43.70%, #fff0 0 50%, var(--c1) 0% 75%, #fff0 0 100%) var(--gp), /* left black vert*/
conic-gradient(from 0deg at 92.64% 43.70%, #fff0 0 25%, var(--c1) 0% 50%, #fff0 0 100%) var(--gp), /* right black vert */
conic-gradient(from 0deg at 43.15% 82.22%, #fff0 0 50%, var(--c3) 0% 83.33%, #fff0 0 100%) var(--gp), /* left orange end */
conic-gradient(from 0deg at 56.84% 82.22%, #fff0 0 16.66%, var(--c3) 0% 50%, #fff0 0 100%) var(--gp), /* right orange end */
conic-gradient(from 0deg at 23.15% 50.37%, #fff0 0 50%, var(--c3) 0% 75%, #fff0 0 100%) var(--gp), /* left orange vert */
conic-gradient(from 0deg at 76.85% 50.37%, #fff0 0 25%, var(--c3) 0% 50%, #fff0 0 100%) var(--gp), /* right orange vert */
conic-gradient(from 0deg at 50% 73.33%, #fff0 0 16.66%, var(--c1) 0% 83.33%, #fff0 0 100%) var(--gp), /* middle black */
conic-gradient(from 0deg at 36.84% 56.29%, #fff0 0 50%, var(--c1) 0% 75%, #fff0 0 100%) var(--gp), /* left black middle */
conic-gradient(from 0deg at 63.15% 56.29%, #fff0 0 25%, var(--c1) 0% 50%, #fff0 0 100%) var(--gp), /* right black middle*/
conic-gradient(from 0deg at 50% 51.11%, #fff0 0 33.33%, var(--c2) 0% 66.66%, #fff0 0 100%) var(--gp), /* middle red */
conic-gradient(from 0deg at 50% 39.25%, #fff0 0 33.33%, var(--c1) 0% 66.66%, #fff0 0 100%) var(--gp), /* middle black */
conic-gradient(from 0deg at 50% 26.66%, #fff0 0 33.33%, var(--c3) 0% 66.66%, #fff0 0 100%) var(--gp), /* middle orange */
conic-gradient(from 0deg at 13.68% 5.92%, #fff0 0 66.66%, var(--c2) 0% 100%) var(--gp), /* left red top */
conic-gradient(from 0deg at 86.12% 5.92%, var(--c2) 0 33.33%, #fff0 0% 100%) var(--gp), /* right red top */
conic-gradient(from 0deg at 28.42% 11.85%, #fff0 0 66.66%, var(--c1) 0% 100%) var(--gp), /* left black top */
conic-gradient(from 0deg at 71.58% 11.85%, var(--c1) 0 33.33%, #fff0 0% 100%) var(--gp), /* right black top */
conic-gradient(from 0deg at 43.15% 17.77%, #fff0 0 66.66%, var(--c3) 0% 100%) var(--gp), /* left orange top */
conic-gradient(from 0deg at 56.84% 17.77%, var(--c3) 0 33.33%, #fff0 0% 100%) var(--gp) /* right orange top*/
;
background-color: var(--c1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.