<main>
<h2>Clip Paths with Trig</h2>
<ul>
<li class="trig regular-triangle"></li>
<li class="trig square"></li>
<li class="trig regular-pentagon"></li>
<li class="trig regular-pentagon-tilted"></li>
<li class="trig regular-hexagon"></li>
<li class="trig regular-star"></li>
<li class="rounded-square"></li>
<li class="rotated-ellipse"></li>
<li class="snowperson"></li>
<li class="moon"></li>
</ul>
<h2>Clip Path Cutouts</h2>
<ul>
<li class="cutout-regular-hexagon"></li>
<li class="cutout-circle"></li>
<li class="star-inside-cutout"></li>
<li class="nested-pentagons"></li>
<li class="nested-triangles"></li>
<li class="eight"></li>
</ul>
</main>.circle::after {
/* circle with a 2rem radius, at center of element */
clip-path: circle(2rem);
}
.circle-2::after {
/* circle with a 20% radius, centered offset from the top right */
clip-path: circle(50% at 100% 1rem);
}
.ellipse::after {
/* tall ellipse, at center of element */
clip-path: ellipse(20% 50%);
}
.ellipse-wide::after {
/* tall ellipse, offset near bottom of element */
clip-path: ellipse(50% 20% at 50% 90%);
}
.inset::after {
clip-path: inset(10% 10% 25% 20%);
}
.inset-round::after {
clip-path: inset(10% 10% 25% 20% round 15%);
}
.wide-rectangle::after {
/* wide rectangle */
clip-path: polygon(0% 20%, 100% 20%, 100% 60%, 0% 60%);
}
.parallelogram::after {
clip-path: polygon(25% 20%, 90% 20%, 70% 90%, 5% 90%);
}
.triangle::after {
/* triangle */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle-2::after {
/* triangle */
clip-path: polygon(70% 10%, 2% 40%, 95% 90%);
}
.regular-triangle::after {
/* triangle */
--radius: 50%;
--center: 50%;
clip-path: polygon(
calc(var(--center) + (sin(0turn) * var(--radius)))
calc(var(--center) - (cos(0turn) * var(--radius))),
calc(var(--center) + (sin(0.333turn) * var(--radius)))
calc(var(--center) - (cos(0.333turn) * var(--radius))),
calc(var(--center) + (sin(0.667turn) * var(--radius)))
calc(var(--center) - (cos(0.667turn) * var(--radius)))
);
}
.square::after {
/* triangle */
--radius: 50%;
--center: 50%;
clip-path: polygon(
calc(var(--center) + (cos(0.125turn) * var(--radius)))
calc(var(--center) - (sin(0.125turn) * var(--radius))),
calc(var(--center) + (cos(0.375turn) * var(--radius)))
calc(var(--center) - (sin(0.375turn) * var(--radius))),
calc(var(--center) + (cos(0.625turn) * var(--radius)))
calc(var(--center) - (sin(0.625turn) * var(--radius))),
calc(var(--center) + (cos(0.875turn) * var(--radius)))
calc(var(--center) - (sin(0.875turn) * var(--radius)))
);
}
.regular-pentagon::after {
--radius: 50%;
--center: 50%;
clip-path: polygon(
calc(var(--center) + (cos(0turn) * var(--radius)))
calc(var(--center) - (sin(0turn) * var(--radius))),
calc(var(--center) + (cos(0.2turn) * var(--radius)))
calc(var(--center) - (sin(0.2turn) * var(--radius))),
calc(var(--center) + (cos(0.4turn) * var(--radius)))
calc(var(--center) - (sin(0.4turn) * var(--radius))),
calc(var(--center) + (cos(0.6turn) * var(--radius)))
calc(var(--center) - (sin(0.6turn) * var(--radius))),
calc(var(--center) + (cos(0.8turn) * var(--radius)))
calc(var(--center) - (sin(0.8turn) * var(--radius)))
);
}
.regular-hexagon::after {
--radius: 50%;
--center: 50%;
clip-path: polygon(
calc(var(--center) + (cos(0turn) * var(--radius)))
calc(var(--center) - (sin(0turn) * var(--radius))),
calc(var(--center) + (cos(0.167turn) * var(--radius)))
calc(var(--center) - (sin(0.167turn) * var(--radius))),
calc(var(--center) + (cos(0.333turn) * var(--radius)))
calc(var(--center) - (sin(0.333turn) * var(--radius))),
calc(var(--center) + (cos(0.5turn) * var(--radius)))
calc(var(--center) - (sin(0.5turn) * var(--radius))),
calc(var(--center) + (cos(0.667turn) * var(--radius)))
calc(var(--center) - (sin(0.667turn) * var(--radius))),
calc(var(--center) + (cos(0.833turn) * var(--radius)))
calc(var(--center) - (sin(0.833turn) * var(--radius)))
);
}
.regular-pentagon-tilted::after {
--radius: 50%;
--center: 50%;
clip-path: polygon(
calc(var(--center) + (cos(0.125turn) * var(--radius)))
calc(var(--center) - (sin(0.125turn) * var(--radius))),
calc(var(--center) + (cos(0.325turn) * var(--radius)))
calc(var(--center) - (sin(0.325turn) * var(--radius))),
calc(var(--center) + (cos(0.525turn) * var(--radius)))
calc(var(--center) - (sin(0.525turn) * var(--radius))),
calc(var(--center) + (cos(0.725turn) * var(--radius)))
calc(var(--center) - (sin(0.725turn) * var(--radius))),
calc(var(--center) + (cos(0.925turn) * var(--radius)))
calc(var(--center) - (sin(0.925turn) * var(--radius)))
);
}
.rotated-ellipse::after {
/*
Polygon parameters generated by function in JS
*/
--radius-x: 30%;
--radius-y: 55%;
--center-x: 50%;
--center-y: 50%;
--rotation: 0.125turn;
clip-path: polygon(
calc(
var(--center-x) + (cos(0deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(0deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(0deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(0deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(10deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(10deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(10deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(10deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(20deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(20deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(20deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(20deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(30deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(30deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(30deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(30deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(40deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(40deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(40deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(40deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(50deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(50deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(50deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(50deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(60deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(60deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(60deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(60deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(70deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(70deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(70deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(70deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(80deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(80deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(80deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(80deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(90deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(90deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(90deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(90deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(100deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(100deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(100deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(100deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(110deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(110deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(110deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(110deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(120deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(120deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(120deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(120deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(130deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(130deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(130deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(130deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(140deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(140deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(140deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(140deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(150deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(150deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(150deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(150deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(160deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(160deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(160deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(160deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(170deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(170deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(170deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(170deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(180deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(180deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(180deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(180deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(190deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(190deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(190deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(190deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(200deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(200deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(200deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(200deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(210deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(210deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(210deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(210deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(220deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(220deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(220deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(220deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(230deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(230deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(230deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(230deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(240deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(240deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(240deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(240deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(250deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(250deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(250deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(250deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(260deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(260deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(260deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(260deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(270deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(270deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(270deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(270deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(280deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(280deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(280deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(280deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(290deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(290deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(290deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(290deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(300deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(300deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(300deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(300deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(310deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(310deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(310deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(310deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(320deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(320deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(320deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(320deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(330deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(330deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(330deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(330deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(340deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(340deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(340deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(340deg) * cos(var(--rotation)) * var(--radius-y))
),
calc(
var(--center-x) + (cos(350deg) * cos(var(--rotation)) * var(--radius-x)) -
(sin(350deg) * sin(var(--rotation)) * var(--radius-y))
)
calc(
var(--center-y) + (cos(350deg) * sin(var(--rotation)) * var(--radius-x)) +
(sin(350deg) * cos(var(--rotation)) * var(--radius-y))
)
);
}
.snowperson::after {
/* snowperson (two circles overlapped) */
--radius-top: 20%;
--radius-bottom: 25%;
--center-x: 50%;
--center-y-top: 30%;
--center-y-bottom: 65%;
clip-path: polygon(
calc(var(--center-x) + (sin(0deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(0deg) * var(--radius-top))),
calc(var(--center-x) + (sin(10deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(10deg) * var(--radius-top))),
calc(var(--center-x) + (sin(20deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(20deg) * var(--radius-top))),
calc(var(--center-x) + (sin(30deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(30deg) * var(--radius-top))),
calc(var(--center-x) + (sin(40deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(40deg) * var(--radius-top))),
calc(var(--center-x) + (sin(50deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(50deg) * var(--radius-top))),
calc(var(--center-x) + (sin(60deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(60deg) * var(--radius-top))),
calc(var(--center-x) + (sin(70deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(70deg) * var(--radius-top))),
calc(var(--center-x) + (sin(80deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(80deg) * var(--radius-top))),
calc(var(--center-x) + (sin(90deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(90deg) * var(--radius-top))),
calc(var(--center-x) + (sin(100deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(100deg) * var(--radius-top))),
calc(var(--center-x) + (sin(110deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(110deg) * var(--radius-top))),
calc(var(--center-x) + (sin(120deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(120deg) * var(--radius-top))),
calc(var(--center-x) + (sin(130deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(130deg) * var(--radius-top))),
calc(var(--center-x) + (sin(140deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(140deg) * var(--radius-top))),
calc(var(--center-x) + (sin(150deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(150deg) * var(--radius-top))),
calc(var(--center-x) + (sin(160deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(160deg) * var(--radius-top))),
calc(var(--center-x) + (sin(170deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(170deg) * var(--radius-top))),
calc(var(--center-x) + (sin(180deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(180deg) * var(--radius-top))),
calc(var(--center-x) + (sin(190deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(190deg) * var(--radius-top))),
calc(var(--center-x) + (sin(200deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(200deg) * var(--radius-top))),
calc(var(--center-x) + (sin(210deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(210deg) * var(--radius-top))),
calc(var(--center-x) + (sin(220deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(220deg) * var(--radius-top))),
calc(var(--center-x) + (sin(230deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(230deg) * var(--radius-top))),
calc(var(--center-x) + (sin(240deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(240deg) * var(--radius-top))),
calc(var(--center-x) + (sin(250deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(250deg) * var(--radius-top))),
calc(var(--center-x) + (sin(260deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(260deg) * var(--radius-top))),
calc(var(--center-x) + (sin(270deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(270deg) * var(--radius-top))),
calc(var(--center-x) + (sin(280deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(280deg) * var(--radius-top))),
calc(var(--center-x) + (sin(290deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(290deg) * var(--radius-top))),
calc(var(--center-x) + (sin(300deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(300deg) * var(--radius-top))),
calc(var(--center-x) + (sin(310deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(310deg) * var(--radius-top))),
calc(var(--center-x) + (sin(320deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(320deg) * var(--radius-top))),
calc(var(--center-x) + (sin(330deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(330deg) * var(--radius-top))),
calc(var(--center-x) + (sin(340deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(340deg) * var(--radius-top))),
calc(var(--center-x) + (sin(350deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(350deg) * var(--radius-top))),
calc(var(--center-x) + (sin(360deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(360deg) * var(--radius-top))),
calc(var(--center-x) + (sin(0deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(0deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(10deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(10deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(20deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(20deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(30deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(30deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(40deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(40deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(50deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(50deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(60deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(60deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(70deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(70deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(80deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(80deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(90deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(90deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(100deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(100deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(110deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(110deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(120deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(120deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(130deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(130deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(140deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(140deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(150deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(150deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(160deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(160deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(170deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(170deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(180deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(180deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(190deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(190deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(200deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(200deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(210deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(210deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(220deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(220deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(230deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(230deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(240deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(240deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(250deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(250deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(260deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(260deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(270deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(270deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(280deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(280deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(290deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(290deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(300deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(300deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(310deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(310deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(320deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(320deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(330deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(330deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(340deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(340deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(350deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(350deg) * var(--radius-bottom))),
calc(var(--center-x) + (sin(360deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(360deg) * var(--radius-bottom)))
);
}
.moon::after {
--outer-x: 50%;
--inner-x: 35%;
--outer-y: 50%;
--inner-y: 45%;
--center: 50%;
--center-inner-x: 63%;
clip-path: polygon(
calc(var(--center) + (cos(60deg) * var(--outer-x)))
calc(var(--center) + (sin(60deg) * var(--outer-y))),
calc(var(--center) + (cos(70deg) * var(--outer-x)))
calc(var(--center) + (sin(70deg) * var(--outer-y))),
calc(var(--center) + (cos(80deg) * var(--outer-x)))
calc(var(--center) + (sin(80deg) * var(--outer-y))),
calc(var(--center) + (cos(90deg) * var(--outer-x)))
calc(var(--center) + (sin(90deg) * var(--outer-y))),
calc(var(--center) + (cos(100deg) * var(--outer-x)))
calc(var(--center) + (sin(100deg) * var(--outer-y))),
calc(var(--center) + (cos(110deg) * var(--outer-x)))
calc(var(--center) + (sin(110deg) * var(--outer-y))),
calc(var(--center) + (cos(120deg) * var(--outer-x)))
calc(var(--center) + (sin(120deg) * var(--outer-y))),
calc(var(--center) + (cos(130deg) * var(--outer-x)))
calc(var(--center) + (sin(130deg) * var(--outer-y))),
calc(var(--center) + (cos(140deg) * var(--outer-x)))
calc(var(--center) + (sin(140deg) * var(--outer-y))),
calc(var(--center) + (cos(150deg) * var(--outer-x)))
calc(var(--center) + (sin(150deg) * var(--outer-y))),
calc(var(--center) + (cos(160deg) * var(--outer-x)))
calc(var(--center) + (sin(160deg) * var(--outer-y))),
calc(var(--center) + (cos(170deg) * var(--outer-x)))
calc(var(--center) + (sin(170deg) * var(--outer-y))),
calc(var(--center) + (cos(180deg) * var(--outer-x)))
calc(var(--center) + (sin(180deg) * var(--outer-y))),
calc(var(--center) + (cos(190deg) * var(--outer-x)))
calc(var(--center) + (sin(190deg) * var(--outer-y))),
calc(var(--center) + (cos(200deg) * var(--outer-x)))
calc(var(--center) + (sin(200deg) * var(--outer-y))),
calc(var(--center) + (cos(210deg) * var(--outer-x)))
calc(var(--center) + (sin(210deg) * var(--outer-y))),
calc(var(--center) + (cos(220deg) * var(--outer-x)))
calc(var(--center) + (sin(220deg) * var(--outer-y))),
calc(var(--center) + (cos(230deg) * var(--outer-x)))
calc(var(--center) + (sin(230deg) * var(--outer-y))),
calc(var(--center) + (cos(240deg) * var(--outer-x)))
calc(var(--center) + (sin(240deg) * var(--outer-y))),
calc(var(--center) + (cos(250deg) * var(--outer-x)))
calc(var(--center) + (sin(250deg) * var(--outer-y))),
calc(var(--center) + (cos(260deg) * var(--outer-x)))
calc(var(--center) + (sin(260deg) * var(--outer-y))),
calc(var(--center) + (cos(270deg) * var(--outer-x)))
calc(var(--center) + (sin(270deg) * var(--outer-y))),
calc(var(--center) + (cos(280deg) * var(--outer-x)))
calc(var(--center) + (sin(280deg) * var(--outer-y))),
calc(var(--center) + (cos(290deg) * var(--outer-x)))
calc(var(--center) + (sin(290deg) * var(--outer-y))),
calc(var(--center) + (cos(300deg) * var(--outer-x)))
calc(var(--center) + (sin(300deg) * var(--outer-y))),
calc(var(--center-inner-x) + (cos(300deg) * var(--inner-x)))
calc(var(--center) + (sin(300deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(290deg) * var(--inner-x)))
calc(var(--center) + (sin(290deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(280deg) * var(--inner-x)))
calc(var(--center) + (sin(280deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(270deg) * var(--inner-x)))
calc(var(--center) + (sin(270deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(260deg) * var(--inner-x)))
calc(var(--center) + (sin(260deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(250deg) * var(--inner-x)))
calc(var(--center) + (sin(250deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(240deg) * var(--inner-x)))
calc(var(--center) + (sin(240deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(230deg) * var(--inner-x)))
calc(var(--center) + (sin(230deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(220deg) * var(--inner-x)))
calc(var(--center) + (sin(220deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(210deg) * var(--inner-x)))
calc(var(--center) + (sin(210deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(200deg) * var(--inner-x)))
calc(var(--center) + (sin(200deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(190deg) * var(--inner-x)))
calc(var(--center) + (sin(190deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(180deg) * var(--inner-x)))
calc(var(--center) + (sin(180deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(170deg) * var(--inner-x)))
calc(var(--center) + (sin(170deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(160deg) * var(--inner-x)))
calc(var(--center) + (sin(160deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(150deg) * var(--inner-x)))
calc(var(--center) + (sin(150deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(140deg) * var(--inner-x)))
calc(var(--center) + (sin(140deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(130deg) * var(--inner-x)))
calc(var(--center) + (sin(130deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(120deg) * var(--inner-x)))
calc(var(--center) + (sin(120deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(110deg) * var(--inner-x)))
calc(var(--center) + (sin(110deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(100deg) * var(--inner-x)))
calc(var(--center) + (sin(100deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(90deg) * var(--inner-x)))
calc(var(--center) + (sin(90deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(80deg) * var(--inner-x)))
calc(var(--center) + (sin(80deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(70deg) * var(--inner-x)))
calc(var(--center) + (sin(70deg) * var(--inner-y))),
calc(var(--center-inner-x) + (cos(60deg) * var(--inner-x)))
calc(var(--center) + (sin(60deg) * var(--inner-y)))
);
}
.regular-star::after {
--radius: 50%;
--center: 50%;
clip-path: polygon(
calc(var(--center) + (sin(0turn) * var(--radius)))
calc(var(--center) - (cos(0turn) * var(--radius))),
calc(var(--center) + (sin(0.4turn) * var(--radius)))
calc(var(--center) - (cos(0.4turn) * var(--radius))),
calc(var(--center) + (sin(0.8turn) * var(--radius)))
calc(var(--center) - (cos(0.8turn) * var(--radius))),
calc(var(--center) + (sin(0.2turn) * var(--radius)))
calc(var(--center) - (cos(0.2turn) * var(--radius))),
calc(var(--center) + (sin(0.6turn) * var(--radius)))
calc(var(--center) - (cos(0.6turn) * var(--radius)))
);
}
.rounded-square::after {
--top: 25%;
--right: 75%;
--bottom: 75%;
--left: 25%;
--radius: 20%;
--offset-start: 5%;
--offset-end: 95%;
--offset-alt: 55%;
clip-path: polygon(
50% var(--offset-start),
calc(var(--left) + (cos(270deg) * var(--radius)))
calc(var(--top) + sin(270deg) * var(--radius)),
calc(var(--left) + (cos(264deg) * var(--radius)))
calc(var(--top) + sin(264deg) * var(--radius)),
calc(var(--left) + (cos(258deg) * var(--radius)))
calc(var(--top) + sin(258deg) * var(--radius)),
calc(var(--left) + (cos(252deg) * var(--radius)))
calc(var(--top) + sin(252deg) * var(--radius)),
calc(var(--left) + (cos(246deg) * var(--radius)))
calc(var(--top) + sin(246deg) * var(--radius)),
calc(var(--left) + (cos(240deg) * var(--radius)))
calc(var(--top) + sin(240deg) * var(--radius)),
calc(var(--left) + (cos(234deg) * var(--radius)))
calc(var(--top) + sin(234deg) * var(--radius)),
calc(var(--left) + (cos(228deg) * var(--radius)))
calc(var(--top) + sin(228deg) * var(--radius)),
calc(var(--left) + (cos(222deg) * var(--radius)))
calc(var(--top) + sin(222deg) * var(--radius)),
calc(var(--left) + (cos(216deg) * var(--radius)))
calc(var(--top) + sin(216deg) * var(--radius)),
calc(var(--left) + (cos(210deg) * var(--radius)))
calc(var(--top) + sin(210deg) * var(--radius)),
calc(var(--left) + (cos(204deg) * var(--radius)))
calc(var(--top) + sin(204deg) * var(--radius)),
calc(var(--left) + (cos(198deg) * var(--radius)))
calc(var(--top) + sin(198deg) * var(--radius)),
calc(var(--left) + (cos(192deg) * var(--radius)))
calc(var(--top) + sin(192deg) * var(--radius)),
calc(var(--left) + (cos(186deg) * var(--radius)))
calc(var(--top) + sin(186deg) * var(--radius)),
calc(var(--left) + (cos(180deg) * var(--radius)))
calc(var(--top) + sin(180deg) * var(--radius)),
calc(var(--left) + (cos(180deg) * var(--radius)))
calc(var(--bottom) + (sin(180deg) * var(--radius))),
calc(var(--left) + (cos(174deg) * var(--radius)))
calc(var(--bottom) + (sin(174deg) * var(--radius))),
calc(var(--left) + (cos(168deg) * var(--radius)))
calc(var(--bottom) + (sin(168deg) * var(--radius))),
calc(var(--left) + (cos(162deg) * var(--radius)))
calc(var(--bottom) + (sin(162deg) * var(--radius))),
calc(var(--left) + (cos(156deg) * var(--radius)))
calc(var(--bottom) + (sin(156deg) * var(--radius))),
calc(var(--left) + (cos(150deg) * var(--radius)))
calc(var(--bottom) + (sin(150deg) * var(--radius))),
calc(var(--left) + (cos(144deg) * var(--radius)))
calc(var(--bottom) + (sin(144deg) * var(--radius))),
calc(var(--left) + (cos(138deg) * var(--radius)))
calc(var(--bottom) + (sin(138deg) * var(--radius))),
calc(var(--left) + (cos(132deg) * var(--radius)))
calc(var(--bottom) + (sin(132deg) * var(--radius))),
calc(var(--left) + (cos(126deg) * var(--radius)))
calc(var(--bottom) + (sin(126deg) * var(--radius))),
calc(var(--left) + (cos(120deg) * var(--radius)))
calc(var(--bottom) + (sin(120deg) * var(--radius))),
calc(var(--left) + (cos(114deg) * var(--radius)))
calc(var(--bottom) + (sin(114deg) * var(--radius))),
calc(var(--left) + (cos(108deg) * var(--radius)))
calc(var(--bottom) + (sin(108deg) * var(--radius))),
calc(var(--left) + (cos(102deg) * var(--radius)))
calc(var(--bottom) + (sin(102deg) * var(--radius))),
calc(var(--left) + (cos(96deg) * var(--radius)))
calc(var(--bottom) + (sin(96deg) * var(--radius))),
calc(var(--left) + (cos(90deg) * var(--radius)))
calc(var(--bottom) + (sin(90deg) * var(--radius))),
calc(var(--right) + (cos(90deg) * var(--radius)))
calc(var(--bottom) + (sin(90deg) * var(--radius))),
calc(var(--right) + (cos(84deg) * var(--radius)))
calc(var(--bottom) + (sin(84deg) * var(--radius))),
calc(var(--right) + (cos(78deg) * var(--radius)))
calc(var(--bottom) + (sin(78deg) * var(--radius))),
calc(var(--right) + (cos(72deg) * var(--radius)))
calc(var(--bottom) + (sin(72deg) * var(--radius))),
calc(var(--right) + (cos(66deg) * var(--radius)))
calc(var(--bottom) + (sin(66deg) * var(--radius))),
calc(var(--right) + (cos(60deg) * var(--radius)))
calc(var(--bottom) + (sin(60deg) * var(--radius))),
calc(var(--right) + (cos(54deg) * var(--radius)))
calc(var(--bottom) + (sin(54deg) * var(--radius))),
calc(var(--right) + (cos(48deg) * var(--radius)))
calc(var(--bottom) + (sin(48deg) * var(--radius))),
calc(var(--right) + (cos(42deg) * var(--radius)))
calc(var(--bottom) + (sin(42deg) * var(--radius))),
calc(var(--right) + (cos(36deg) * var(--radius)))
calc(var(--bottom) + (sin(36deg) * var(--radius))),
calc(var(--right) + (cos(30deg) * var(--radius)))
calc(var(--bottom) + (sin(30deg) * var(--radius))),
calc(var(--right) + (cos(24deg) * var(--radius)))
calc(var(--bottom) + (sin(24deg) * var(--radius))),
calc(var(--right) + (cos(18deg) * var(--radius)))
calc(var(--bottom) + (sin(18deg) * var(--radius))),
calc(var(--right) + (cos(12deg) * var(--radius)))
calc(var(--bottom) + (sin(12deg) * var(--radius))),
calc(var(--right) + (cos(6deg) * var(--radius)))
calc(var(--bottom) + (sin(6deg) * var(--radius))),
calc(var(--right) + (cos(0deg) * var(--radius)))
calc(var(--bottom) + (sin(0deg) * var(--radius))),
var(--offset-alt) 50%,
calc(var(--right) + (cos(0deg) * var(--radius)))
calc(var(--top) + (sin(0deg) * var(--radius))),
calc(var(--right) + (cos(-6deg) * var(--radius)))
calc(var(--top) + (sin(-6deg) * var(--radius))),
calc(var(--right) + (cos(-12deg) * var(--radius)))
calc(var(--top) + (sin(-12deg) * var(--radius))),
calc(var(--right) + (cos(-18deg) * var(--radius)))
calc(var(--top) + (sin(-18deg) * var(--radius))),
calc(var(--right) + (cos(-24deg) * var(--radius)))
calc(var(--top) + (sin(-24deg) * var(--radius))),
calc(var(--right) + (cos(-30deg) * var(--radius)))
calc(var(--top) + (sin(-30deg) * var(--radius))),
calc(var(--right) + (cos(-36deg) * var(--radius)))
calc(var(--top) + (sin(-36deg) * var(--radius))),
calc(var(--right) + (cos(-42deg) * var(--radius)))
calc(var(--top) + (sin(-42deg) * var(--radius))),
calc(var(--right) + (cos(-48deg) * var(--radius)))
calc(var(--top) + (sin(-48deg) * var(--radius))),
calc(var(--right) + (cos(-54deg) * var(--radius)))
calc(var(--top) + (sin(-54deg) * var(--radius))),
calc(var(--right) + (cos(-60deg) * var(--radius)))
calc(var(--top) + (sin(-60deg) * var(--radius))),
calc(var(--right) + (cos(-66deg) * var(--radius)))
calc(var(--top) + (sin(-66deg) * var(--radius))),
calc(var(--right) + (cos(-72deg) * var(--radius)))
calc(var(--top) + (sin(-72deg) * var(--radius))),
calc(var(--right) + (cos(-78deg) * var(--radius)))
calc(var(--top) + (sin(-78deg) * var(--radius))),
calc(var(--right) + (cos(-84deg) * var(--radius)))
calc(var(--top) + (sin(-84deg) * var(--radius))),
calc(var(--right) + (cos(-90deg) * var(--radius)))
calc(var(--top) + (sin(-90deg) * var(--radius)))
);
}
.cutout-regular-hexagon::after {
--radius: 50%;
--center: 50%;
clip-path: polygon(
evenodd,
var(--center) 0%,
0% 0%,
0% 100%,
100% 100%,
100% 0%,
var(--center) 0%,
calc(var(--center) + (cos(0turn) * var(--radius)))
calc(var(--center) - (sin(0turn) * var(--radius))),
calc(var(--center) + (cos(0.167turn) * var(--radius)))
calc(var(--center) - (sin(0.167turn) * var(--radius))),
calc(var(--center) + (cos(0.333turn) * var(--radius)))
calc(var(--center) - (sin(0.333turn) * var(--radius))),
calc(var(--center) + (cos(0.5turn) * var(--radius)))
calc(var(--center) - (sin(0.5turn) * var(--radius))),
calc(var(--center) + (cos(0.667turn) * var(--radius)))
calc(var(--center) - (sin(0.667turn) * var(--radius))),
calc(var(--center) + (cos(0.833turn) * var(--radius)))
calc(var(--center) - (sin(0.833turn) * var(--radius))),
calc(var(--center) + (cos(1turn) * var(--radius)))
calc(var(--center) - (sin(1turn) * var(--radius)))
);
}
.cutout-circle::after {
--radius-top: 40%;
--center-x: 50%;
--center-y-top: 50%;
clip-path: polygon(
evenodd,
var(--center-x) 0%,
0% 0%,
0% 100%,
100% 100%,
100% 0%,
var(--center-x) 0%,
calc(var(--center-x) + (sin(0deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(0deg) * var(--radius-top))),
calc(var(--center-x) + (sin(10deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(10deg) * var(--radius-top))),
calc(var(--center-x) + (sin(20deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(20deg) * var(--radius-top))),
calc(var(--center-x) + (sin(30deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(30deg) * var(--radius-top))),
calc(var(--center-x) + (sin(40deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(40deg) * var(--radius-top))),
calc(var(--center-x) + (sin(50deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(50deg) * var(--radius-top))),
calc(var(--center-x) + (sin(60deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(60deg) * var(--radius-top))),
calc(var(--center-x) + (sin(70deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(70deg) * var(--radius-top))),
calc(var(--center-x) + (sin(80deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(80deg) * var(--radius-top))),
calc(var(--center-x) + (sin(90deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(90deg) * var(--radius-top))),
calc(var(--center-x) + (sin(100deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(100deg) * var(--radius-top))),
calc(var(--center-x) + (sin(110deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(110deg) * var(--radius-top))),
calc(var(--center-x) + (sin(120deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(120deg) * var(--radius-top))),
calc(var(--center-x) + (sin(130deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(130deg) * var(--radius-top))),
calc(var(--center-x) + (sin(140deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(140deg) * var(--radius-top))),
calc(var(--center-x) + (sin(150deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(150deg) * var(--radius-top))),
calc(var(--center-x) + (sin(160deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(160deg) * var(--radius-top))),
calc(var(--center-x) + (sin(170deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(170deg) * var(--radius-top))),
calc(var(--center-x) + (sin(180deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(180deg) * var(--radius-top))),
calc(var(--center-x) + (sin(190deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(190deg) * var(--radius-top))),
calc(var(--center-x) + (sin(200deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(200deg) * var(--radius-top))),
calc(var(--center-x) + (sin(210deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(210deg) * var(--radius-top))),
calc(var(--center-x) + (sin(220deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(220deg) * var(--radius-top))),
calc(var(--center-x) + (sin(230deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(230deg) * var(--radius-top))),
calc(var(--center-x) + (sin(240deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(240deg) * var(--radius-top))),
calc(var(--center-x) + (sin(250deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(250deg) * var(--radius-top))),
calc(var(--center-x) + (sin(260deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(260deg) * var(--radius-top))),
calc(var(--center-x) + (sin(270deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(270deg) * var(--radius-top))),
calc(var(--center-x) + (sin(280deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(280deg) * var(--radius-top))),
calc(var(--center-x) + (sin(290deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(290deg) * var(--radius-top))),
calc(var(--center-x) + (sin(300deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(300deg) * var(--radius-top))),
calc(var(--center-x) + (sin(310deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(310deg) * var(--radius-top))),
calc(var(--center-x) + (sin(320deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(320deg) * var(--radius-top))),
calc(var(--center-x) + (sin(330deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(330deg) * var(--radius-top))),
calc(var(--center-x) + (sin(340deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(340deg) * var(--radius-top))),
calc(var(--center-x) + (sin(350deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(350deg) * var(--radius-top))),
calc(var(--center-x) + (sin(360deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(360deg) * var(--radius-top)))
);
}
.star-inside-cutout::after {
--radius: 50%;
--center: 50%;
clip-path: polygon(
evenodd,
calc(var(--center) + (sin(0turn) * var(--radius)))
calc(var(--center) - (cos(0turn) * var(--radius))),
calc(var(--center) + (sin(0.4turn) * var(--radius)))
calc(var(--center) - (cos(0.4turn) * var(--radius))),
calc(var(--center) + (sin(0.8turn) * var(--radius)))
calc(var(--center) - (cos(0.8turn) * var(--radius))),
calc(var(--center) + (sin(0.2turn) * var(--radius)))
calc(var(--center) - (cos(0.2turn) * var(--radius))),
calc(var(--center) + (sin(0.6turn) * var(--radius)))
calc(var(--center) - (cos(0.6turn) * var(--radius)))
);
}
.nested-pentagons::after {
--radius: 50%;
--radius2: 40%;
--radius3: 30%;
--radius4: 20%;
--radius5: 10%;
--center: 50%;
clip-path: polygon(
evenodd,
calc(var(--center) + (sin(0turn) * var(--radius)))
calc(var(--center) - (cos(0turn) * var(--radius))),
calc(var(--center) + (sin(0.2turn) * var(--radius)))
calc(var(--center) - (cos(0.2turn) * var(--radius))),
calc(var(--center) + (sin(0.4turn) * var(--radius)))
calc(var(--center) - (cos(0.4turn) * var(--radius))),
calc(var(--center) + (sin(0.6turn) * var(--radius)))
calc(var(--center) - (cos(0.6turn) * var(--radius))),
calc(var(--center) + (sin(0.8turn) * var(--radius)))
calc(var(--center) - (cos(0.8turn) * var(--radius))),
calc(var(--center) + (sin(0turn) * var(--radius)))
calc(var(--center) - (cos(0turn) * var(--radius))),
calc(var(--center) + (sin(0turn) * var(--radius2)))
calc(var(--center) - (cos(0turn) * var(--radius2))),
calc(var(--center) + (sin(0.2turn) * var(--radius2)))
calc(var(--center) - (cos(0.2turn) * var(--radius2))),
calc(var(--center) + (sin(0.4turn) * var(--radius2)))
calc(var(--center) - (cos(0.4turn) * var(--radius2))),
calc(var(--center) + (sin(0.6turn) * var(--radius2)))
calc(var(--center) - (cos(0.6turn) * var(--radius2))),
calc(var(--center) + (sin(0.8turn) * var(--radius2)))
calc(var(--center) - (cos(0.8turn) * var(--radius2))),
calc(var(--center) + (sin(0turn) * var(--radius2)))
calc(var(--center) - (cos(0turn) * var(--radius2))),
calc(var(--center) + (sin(0turn) * var(--radius3)))
calc(var(--center) - (cos(0turn) * var(--radius3))),
calc(var(--center) + (sin(0.2turn) * var(--radius3)))
calc(var(--center) - (cos(0.2turn) * var(--radius3))),
calc(var(--center) + (sin(0.4turn) * var(--radius3)))
calc(var(--center) - (cos(0.4turn) * var(--radius3))),
calc(var(--center) + (sin(0.6turn) * var(--radius3)))
calc(var(--center) - (cos(0.6turn) * var(--radius3))),
calc(var(--center) + (sin(0.8turn) * var(--radius3)))
calc(var(--center) - (cos(0.8turn) * var(--radius3))),
calc(var(--center) + (sin(0turn) * var(--radius3)))
calc(var(--center) - (cos(0turn) * var(--radius3))),
calc(var(--center) + (sin(0turn) * var(--radius4)))
calc(var(--center) - (cos(0turn) * var(--radius4))),
calc(var(--center) + (sin(0.2turn) * var(--radius4)))
calc(var(--center) - (cos(0.2turn) * var(--radius4))),
calc(var(--center) + (sin(0.4turn) * var(--radius4)))
calc(var(--center) - (cos(0.4turn) * var(--radius4))),
calc(var(--center) + (sin(0.6turn) * var(--radius4)))
calc(var(--center) - (cos(0.6turn) * var(--radius4))),
calc(var(--center) + (sin(0.8turn) * var(--radius4)))
calc(var(--center) - (cos(0.8turn) * var(--radius4))),
calc(var(--center) + (sin(0turn) * var(--radius4)))
calc(var(--center) - (cos(0turn) * var(--radius4))),
calc(var(--center) + (sin(0turn) * var(--radius5)))
calc(var(--center) - (cos(0turn) * var(--radius5))),
calc(var(--center) + (sin(0.2turn) * var(--radius5)))
calc(var(--center) - (cos(0.2turn) * var(--radius5))),
calc(var(--center) + (sin(0.4turn) * var(--radius5)))
calc(var(--center) - (cos(0.4turn) * var(--radius5))),
calc(var(--center) + (sin(0.6turn) * var(--radius5)))
calc(var(--center) - (cos(0.6turn) * var(--radius5))),
calc(var(--center) + (sin(0.8turn) * var(--radius5)))
calc(var(--center) - (cos(0.8turn) * var(--radius5))),
calc(var(--center) + (sin(0turn) * var(--radius5)))
calc(var(--center) - (cos(0turn) * var(--radius5)))
);
}
.nested-triangles::after {
clip-path: polygon(
evenodd,
50% 0%,
/* cut interior shape */ 50% 5%,
5% 95%,
95% 95%,
50% 5%,
/* cut interior shape */ 50% 15%,
12.5% 90%,
87.5% 90%,
50% 15%,
/* cut interior shape */ 50% 25%,
20% 85%,
80% 85%,
50% 25%,
/* cut interior shape */ 50% 35%,
27.5% 80%,
72.5% 80%,
50% 35%,
/* cut interior shape */ 50% 45%,
35% 75%,
65% 75%,
50% 45%,
/* cut interior shape */ 50% 55%,
42.5% 70%,
57.5% 70%,
50% 55%,
/* cut interior shape */ 50% 62%,
48% 67%,
52% 67%,
50% 62%
);
}
.eight::after {
/* snowperson (two circles overlapped) */
--radius-top: 20%;
--radius-bottom: 25%;
--radius-inner-top: 10%;
--radius-inner-bottom: 15%;
--center-x-top: 50%;
--center-x-bottom: 50%;
--center-y-top: 22.5%;
--center-y-bottom: 72.5%;
clip-path: polygon(
evenodd,
calc(var(--center-x-top) + (sin(0deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(0deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(10deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(10deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(20deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(20deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(30deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(30deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(40deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(40deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(50deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(50deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(60deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(60deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(70deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(70deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(80deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(80deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(90deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(90deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(100deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(100deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(110deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(110deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(120deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(120deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(130deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(130deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(140deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(140deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(150deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(150deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(160deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(160deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(170deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(170deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(180deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(180deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(190deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(190deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(200deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(200deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(210deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(210deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(220deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(220deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(230deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(230deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(240deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(240deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(250deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(250deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(260deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(260deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(270deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(270deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(280deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(280deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(290deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(290deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(300deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(300deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(310deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(310deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(320deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(320deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(330deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(330deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(340deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(340deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(350deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(350deg) * var(--radius-top))),
calc(var(--center-x-top) + (sin(360deg) * var(--radius-top)))
calc(var(--center-y-top) + (cos(360deg) * var(--radius-top))),
calc(var(--center-x-bottom) + (sin(0deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(0deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(10deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(10deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(20deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(20deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(30deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(30deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(40deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(40deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(50deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(50deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(60deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(60deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(70deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(70deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(80deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(80deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(90deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(90deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(100deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(100deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(110deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(110deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(120deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(120deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(130deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(130deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(140deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(140deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(150deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(150deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(160deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(160deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(170deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(170deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(180deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(180deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(190deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(190deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(200deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(200deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(210deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(210deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(220deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(220deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(230deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(230deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(240deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(240deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(250deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(250deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(260deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(260deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(270deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(270deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(280deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(280deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(290deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(290deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(300deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(300deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(310deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(310deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(320deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(320deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(330deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(330deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(340deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(340deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(350deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(350deg) * var(--radius-bottom))),
calc(var(--center-x-bottom) + (sin(360deg) * var(--radius-bottom)))
calc(var(--center-y-bottom) + (cos(360deg) * var(--radius-bottom))),
calc(var(--center-x-top) + (sin(0deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(0deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(10deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(10deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(20deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(20deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(30deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(30deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(40deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(40deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(50deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(50deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(60deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(60deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(70deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(70deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(80deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(80deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(90deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(90deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(100deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(100deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(110deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(110deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(120deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(120deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(130deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(130deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(140deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(140deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(150deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(150deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(160deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(160deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(170deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(170deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(180deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(180deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(190deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(190deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(200deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(200deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(210deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(210deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(220deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(220deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(230deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(230deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(240deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(240deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(250deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(250deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(260deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(260deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(270deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(270deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(280deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(280deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(290deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(290deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(300deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(300deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(310deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(310deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(320deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(320deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(330deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(330deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(340deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(340deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(350deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(350deg) * var(--radius-inner-top))),
calc(var(--center-x-top) + (sin(360deg) * var(--radius-inner-top)))
calc(var(--center-y-top) + (cos(360deg) * var(--radius-inner-top))),
calc(var(--center-x-bottom) + (sin(0deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(0deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(10deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(10deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(20deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(20deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(30deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(30deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(40deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(40deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(50deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(50deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(60deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(60deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(70deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(70deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(80deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(80deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(90deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(90deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(100deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(100deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(110deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(110deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(120deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(120deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(130deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(130deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(140deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(140deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(150deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(150deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(160deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(160deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(170deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(170deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(180deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(180deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(190deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(190deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(200deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(200deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(210deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(210deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(220deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(220deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(230deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(230deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(240deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(240deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(250deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(250deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(260deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(260deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(270deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(270deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(280deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(280deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(290deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(290deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(300deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(300deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(310deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(310deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(320deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(320deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(330deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(330deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(340deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(340deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(350deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(350deg) * var(--radius-inner-bottom))),
calc(var(--center-x-bottom) + (sin(360deg) * var(--radius-inner-bottom)))
calc(var(--center-y-bottom) + (cos(360deg) * var(--radius-inner-bottom)))
);
}
li {
aspect-ratio: 1;
margin: auto;
width: 100%;
position: relative;
border: 0.25vmin dashed hsl(188 100% 80% / 30%);
}
li::before {
position: absolute;
inset: 0;
content: "";
z-index: 1;
}
.trig::before {
border: 0.25vmin dotted hsl(188 100% 80% / 30%);
border-radius: 50%;
}
li::after {
position: absolute;
inset: 0;
background: linear-gradient(135deg, hsl(188 100% 50%), hsl(218 100% 60%));
content: "";
display: flex;
justify-content: center;
align-items: center;
font-size: 8vmin;
font-family: system-ui, sans-serif;
color: hsl(188 100% 90% / 60%);
}
body {
min-height: 100vh;
margin: 0;
padding: 5vmin;
background: repeating-linear-gradient(
0deg,
hsl(344 100% 90% / 4%) 0 0.2vmin,
hsl(234 100% 60% / 0%) 0 2vmin
),
linear-gradient(45deg, hsl(344 100% 50%), hsl(234 100% 60%));
color: hsl(188 100% 90%);
letter-spacing: 0.05em;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30vmin, 1fr));
gap: 5vmin;
place-items: stretch;
margin: 0 auto 5vmin;
padding: 0;
list-style: none;
}
* {
box-sizing: border-box;
}
function generateRotatedEllipse() {
/*
π₯(πΌ)=π
π₯cos(πΌ)cos(π)βπ
π¦sin(πΌ)sin(π)+πΆπ₯
π¦(πΌ)=π
π₯cos(πΌ)sin(π)+π
π¦sin(πΌ)cos(π)+πΆπ¦
where
πΆπ₯ is the π₯-coordinate of the center
πΆπ¦ is the π¦-coordinate of the center
π
π₯ is the major radius
π
π¦ is the minor radius
πΌ is the variable angle, which ranges from 0 to 360deg
π is the ellipse rotation angle.
https://math.stackexchange.com/a/2647450
*/
const points = [];
for (let i = 0; i < 360; i = i + 10) {
points.push(`calc(var(--center-x) + (cos(${i}deg) * cos(var(--rotation)) * var(--radius-x)) - (sin(${i}deg) * sin(var(--rotation)) * var(--radius-y)))
calc(var(--center-y) + (cos(${i}deg) * sin(var(--rotation)) * var(--radius-x)) + (sin(${i}deg) * cos(var(--rotation)) * var(--radius-y)))`);
}
console.log(points.join(","));
}
function generateMoon() {
const points = [];
for (let i = 60; i <= 300; i = i + 10) {
points.push(`calc(var(--center) + (cos(${i}deg) * var(--outer-x)))
calc(var(--center) + (sin(${i}deg) * var(--outer-y)))`);
}
for (let i = 300; i >= 60; i = i - 10) {
points.push(`calc(var(--center-inner-x) + (cos(${i}deg) * var(--inner-x)))
calc(var(--center) + (sin(${i}deg) * var(--inner-y)))`);
}
console.log(`polygon(${points.join(",")})`);
}
generateMoon();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.