CSS - Cat Prints Icon

Code example for drawing a cat prints icon using HTML and CSS.

This HTML code sets the class name "cat-prints-icon" for the <div> tag which will make up the cat prints icon element.

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

The first child <div> element creates the top and under parts with the "top" and "under" child elements.
The "top" positions the 4 circles using the nth-child() pseudo class.

The CSS custom property "--w" sets the base width for the icon shape.
The custom property "--angle" can be used to rotate the icon.

/* Cat Prints Icon */
.cat-prints-icon {
	--w: 300px; /* Base Size */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* Top Part */
.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);
}

/* Under Part */
.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%;
}