CSS - 渦巻き

HTMLとCSSを使用してシンプルな渦巻きを描画する方法のコード例です。

HTMLコードは渦巻きを描画する要素となる<div>タグのクラス名 "swirl" を設定しています。
渦巻きの形状のために複数の子要素<div>タグを設置しています。

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

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--angle」にて回転させる事が可能です。
外側から半円の角度と位置、サイズを変えながら並べています。

/* 渦巻きアイコン */
.swirl {
	--w: 300px; /* 基準サイズ */
	--color: #40e0d0; /* ベースカラー */
	--angle: -90deg; /* 回転 */
	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%;
}