CSS - 猫の足跡アイコン

HTMLとCSSを使用して猫の足跡アイコンを描画する方法のコード例です。

このHTMLコードは猫の足跡アイコンを描画する要素となる<div>タグのクラス名 "cat-prints-icon" を設定しています。

<div class="cat-prints-icon">
	<div class="top">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="under"></div>
</div>

最初の子要素<div>では子要素「top」と「under」で上下のパーツを作成しています。
「top」では疑似クラスnth-child()を利用して4つの円を配置しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
またカスタムプロパティ「--angle」を使ってアイコンを回転させる事が可能です。

/* 猫の足跡アイコン */
.cat-prints-icon {
	--w: 300px; /* 基本サイズ */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 上部パーツ */
.cat-prints-icon .top div {
	position: absolute;
	width: 15%;
	height: 20%;
	background: #FFF000;
	border-radius: 50%;
}


.cat-prints-icon .top div:nth-child(1) {
	top: 25%;
	left: 12%;
	transform: rotate(-30deg);
}

.cat-prints-icon .top div:nth-child(2) {
	top: 12%;
	left: 30%;
	transform: rotate(-5deg);
}

.cat-prints-icon .top div:nth-child(3) {
	top: 10%;
	left: 54%;
	transform: rotate(5deg);
}

.cat-prints-icon .top div:nth-child(4) {
	top: 25%;
	left: 73%;
	transform: rotate(30deg);
}

/* 下部パーツ */
.cat-prints-icon .under {
	position: absolute;
	top: 40%;
	left: 25%;
	width: 50%;
	height: 50%;
	background: #FFF000;
	border-radius: 40% 60% 40% 60% / 60% 60% 50% 60%;
}