Under Construction
--size: min(400px, 60vw);
$s: var(--size) / 100;
width: var(--size);
height: var(--size);
position: absolute;
top: calc(50vh - 0.5 * var(--size));
left: calc(40vw - 0.5 * var(--size));
background:
repeating-linear-gradient(
45deg,
#fb7900 0px calc(10 * $s),
#dddddd calc(10 * $s) calc(20 * $s),
) 0% calc(35 * $s) / 100% 15% no-repeat,
repeating-linear-gradient(
45deg,
#fb7900 0px calc(10 * $s),
#dddddd calc(10 * $s) calc(20 * $s),
) 0% calc(55 * $s) / 100% 15% no-repeat,
radial-gradient(
closest-side circle at center,
#ffcc6c 0%,
#ffb224 40%,
#ff8724 45%,
#ff9924 80%,
#e75912 82%,
#db500b 95%,
#e26628 95% 100%,
transparent
) calc(9 * $s) calc(19 * $s) / 12% 12% no-repeat,
radial-gradient(
closest-side circle at center,
#ffcc6c 0%,
#ffb224 40%,
#ff8724 45%,
#ff9924 80%,
#e75912 82%,
#db500b 95%,
#e26628 95% 100%,
transparent
) calc(79 * $s) calc(19 * $s) / 12% 12% no-repeat,
linear-gradient(
to right,
transparent 10%,
#bbbbbb 10% 20%,
transparent 20% 80%,
#bbbbbb 80% 90%,
transparent 90%
) 0% 100% / 100% 70% no-repeat;
}