CSS - Swirl Icon

Code example for drawing a simple swirl using HTML and CSS.

The HTML code sets the class name "swirl" for the <div> tag which will make up the swirl icon element.
It uses multiple child <div> tags to create the swirl shape.

<div class="swirl">
	<div></div><div></div><div></div><div></div>
	<div></div><div></div><div></div><div></div>
</div>

The CSS custom properties:
"--w" sets the base size.
"--angle" allows rotating the element.

It stacks semicircles of varying angles, positions and sizes from the outside in.

/* Swirl */
.swirl {
	--w: 300px; /* Base Size */
	--color: #40e0d0; /* Base Color */
	--angle: -90deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.swirl div {
	position: absolute;
	border: solid calc(var(--w) * 0.07) var(--color);
	border-radius: calc(var(--w) * 0.45) calc(var(--w) * 0.45) 0 0;
	border-bottom: 0;
	box-sizing: border-box;
}

.swirl div:nth-of-type(even) {
	transform: rotate(0deg);
}

.swirl div:nth-of-type(odd) {
	transform: rotate(180deg);
}

.swirl div:nth-of-type(1) {
	width: 90%;
	height: 45%;
	top: 50%;
	left: 5%;
}

.swirl div:nth-of-type(2) {
	width: 80%;
	height: 40%;
	top: 10%;
	left: 5%;
}

.swirl div:nth-of-type(3) {
	width: 70%;
	height: 35%;
	top: 50%;
	left: 15%;
}

.swirl div:nth-of-type(4) {
	width: 60%;
	height: 30%;
	top: 20%;
	left: 15%;
}

.swirl div:nth-of-type(5) {
	width: 50%;
	height: 25%;
	top: 50%;
	left: 25%;
}

.swirl div:nth-of-type(6) {
	width: 40%;
	height: 20%;
	top: 30%;
	left: 25%;
}

.swirl div:nth-of-type(7) {
	width: 30%;
	height: 15%;
	top: 50%;
	left: 35%;
}

.swirl div:nth-of-type(8) {
	width: 20%;
	height: 10%;
	top: 40%;
	left: 35%;
}