Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- I'm excited, and you? o(^▽^)o -->
<!-- hint: try dragging or double-clicking the model -->

<!-- ? orbit (Y-axis) -->
<section data-camera>
	<!-- ? orbital (X-axis) -->
	<section data-scene>
		<!-- * relevant portion -->
		<!-- TODO .plate -->
		<div class="n-gon plate" data-3d>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>

		<!-- TODO .cake-base -->
		<div class="n-gon cake-base" data-slice data-3d>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>

		<!-- TODO .base-edges -->
		<!-- !ISSUE makes rendering slow -->
		<!-- <div class="n-gon n-gon-sub base-edges" data-slice data-3d>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div> -->

		<!-- TODO .strawberries -->
		<div class="spheres strawberries" data-3d>
			<div>
				<div class="sphere"></div>
				<div class="leaf l1"></div>
			</div>
			<div><div class="sphere"></div></div>
			<div><div class="sphere"></div></div>
			<div>
				<div class="sphere"></div>
				<div class="leaf l4"></div>
				<div class="leaf l4 l5"></div>
				<div class="leaf l4 l5 l6"></div>
			</div>
			<div><div class="sphere"></div></div>
			<div><div class="sphere"></div></div>
			<div>
				<div class="sphere"></div>
				<div class="leaf l7"></div>
			</div>
			<div><div class="sphere"></div></div>
			<div>
				<div class="sphere"></div>
				<div class="leaf l7 l8"></div>
			</div>
			<div>
				<div class="sphere"></div>
				<div class="leaf l7 l9"></div>
			</div>
		</div>

		<!-- TODO .shadows -->
		<div class="cake-base-shadow"></div>
	</section>
</section>

<!-- ? information -->
<article id="howto">
	<a href="#" aria-label="close this modal" data-close></a>
	<article data-desc>
		<h1>Supported Gestures</h1>
		<ul data-desktop>
			<li><i>Drag:</i> Rotate</li>
			<li><kbd>ctrl</kbd> + <i>Drag:</i> Pan (XY)</li>
			<li><kbd>alt</kbd> + <i>Drag:</i> Pan (Z)</li>
			<li><kbd>shift</kbd> + <i>Drag:</i> Perspective</li>
			<li><i>Wheel:</i> Zoom</li>
			<li><kbd>ctrl</kbd> + <i>Wheel:</i> Fast Zoom</li>
			<li><i>Double click:</i> Toggle auto-rotate (Z)</li>
		</ul>
		<ul data-mobile>
			<li><i>Drag:</i> Rotate</li>
			<li><i>Pinch:</i> Zoom</li>
			<li><i>Double tap:</i> Toggle auto-rotate (Z)</li>
		</ul>
	</article>
</article>

<!-- ? information hyperlink -->
<a
	href="#howto"
	aria-label="learn how to operate this pen"
	data-howto
	data-isolated
	>How to?</a
>

              
            
!

CSS

              
                // * 26 October 2021
// * CSS 3D Cake
// * recommended view: Full Page
// * score: `65` DIVs and its `108` pseudo-elements
// * requires Chrome >=94 or Firefox >=79
// * best appearance in Chrome
// * best performance in Chrome and Firefox >=83
// * more info. in the Details view

@use "sass:math";

$texture-location: 'https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures';

// ! @logic.scss

// * the division function was introduced in Dart Sass 1.33.0,
// * and I have used it a lot in my sass pens. at the time
// * of writing, CodePen offers Dart Sass 1.32.0. have
// * made a wrapper function so that I can swap any of them.
@function devide($a, $b) {
	@return $a * (1 / $b);
	//@return math.div($a, $b);
}

// * full sized pseudo-elements
@mixin full-pseudo {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}

// * index and color binary variables
@mixin bin-vars($i, $n) {
	$j: $i - 1;
	$k: $j - devide($n, 2);

	--binary: #{math.clamp(0, $k, 1)};
	--i: #{$j};
	--l: #{$k};
}

// * fix bleeding edges caused by clip-path (since Firefox ^83)
@function clip-fix() {
	$v: inset 0 0 0 1px var(--clip-fix-color, #fff);
	@return $v;
}

// * fix aliased edges caused by `transform-style: preserve-3d` in Firefox
// * these magic numbers seems to work in v85+ (still investigating...)
@function antialised() {
	$v: 0 0 0 2px var(--smooth-color, rgba(0, 0, 0, 0.01));
	@return $v;
}

// * returns a clip-path of an n-gon
@function n-polygon($n, $crop: null) {
	$rad: devide(math.$pi, 180);
	$theta: devide(360, $n) * $rad;
	$points: null;

	@for $i from 1 through $n {
		$a: $theta * $i;

		$binary: 1;
		@if $crop and $i > 1 and $i <= $crop {
			$binary: 0;
		}

		// ? https://stackoverflow.com/a/839931
		$x: 50% + 50% * math.cos($a) * $binary;
		$y: 50% + 50% * math.sin($a) * $binary;
		$points: $points, $x $y;
	}

	@return polygon(#{$points});
}

// * return the side-length of an n-gon in percentages
@function n-edge-length($n) {
	// 1 is the maximum value or diameter
	// hence, r = (d / 2) or 0.5
	$Rc: 0.5;

	// ? https://calcresource.com/geom-ngon.html
	$denominator: 2 * math.sin(devide(math.$pi, $n));
	$a: $Rc * $denominator;

	@return $a;
}

// * return a standard variable definition for an n-gon model
// * $c to define how many vertices to cut off in the clip-path
@mixin poly-angles($n) {
	$a: devide(360, $n);
	$sa: devide(180 - $a, 2);

	--sides: #{$n};
	--angle: #{$a};
	--edge-angle: #{$sa + $a};
	--edge-length: #{n-edge-length($n)};

	// shift the starting angle
	// play w/ it here => https://codepen.io/thebabydino/pen/QbBWZb
	--start-angle: #{90 - $a};
}

// * returns a clip-path of a bordered/substracted n-gon
@function n-polygon-intersection($n, $crop: null) {
	$whole: 2 * math.$pi;
	$rad: devide(math.$pi, 180);
	$theta: devide(360, $n) * $rad;

	$outer-points: null;
	$outer-last: null;

	$inner-points: null;
	$inner-last: null;

	$points: null;

	// TODO calculate the outer clip-path
	@for $i from 1 through $n {
		$a: $whole + ($theta * $i);

		$binary: 1;
		@if $crop and $i > 1 and $i <= $crop {
			$binary: 0;
		}

		$x: 50% + 50% * math.cos($a) * $binary;
		$y: 50% + 50% * math.sin($a) * $binary;
		$outer-points: $outer-points, $x $y;

		// save the last (x, y) coordinates
		@if $i == $n {
			$outer-last: $x $y;
		}
	}

	// TODO calculate the inner clip-path
	@for $i from 1 through $n {
		$a: $whole + ($theta * $i);

		$binary: 1;
		@if $crop and $i > 1 and $i <= $crop {
			$binary: 0;
		}

		$x: math.cos($a) * $binary;
		$y: math.sin($a) * $binary;

		// add variables to the (cos, sin) coordinates
		$this-points: calc(50% + (var(--inner-radius) - var(--iir, 0%)) * #{$x})
			calc(50% + (var(--inner-radius) - var(--iir, 0%)) * #{$y});
		$inner-points: $this-points, $inner-points;

		// save the last (x, y) coordinates
		@if $i == $n {
			$inner-last: $this-points;
		}
	}

	// TODO join the points
	$points: $outer-points, $inner-points, $inner-last, $outer-last;

	@return polygon(#{$points});
}

// ! @ n-gon.scss

.n-gon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--diameter);
	height: var(--diameter);
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
}

.n-gon::before,
.n-gon::after {
	@include full-pseudo;
	background-color: var(--color-bottom);
	clip-path: var(--polygon-shape);
	left: 50%;
	top: 50%;
	--transform: translate(-50%, -50%)
		scale(calc(1 - ((var(--bevel) * 1) / 100)));
	transform: var(--transform);
	box-shadow: clip-fix();
}

.n-gon::after {
	background-color: var(--color-top);
	transform: var(--transform) translateZ(var(--height));
}

.n-gon > div {
	--slice-angle: calc(
		(var(--start-angle) + (var(--angle) * var(--i))) * 1deg
	);

	// background-color: rgba(0, 0, 0, 0.5);

	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--height);
	height: calc(50% - (var(--bevel) * 1% / 2));
	transform: translate(-100%, 0%) rotateY(90deg) rotateX(var(--slice-angle));
	transform-origin: 100% 0;
	transform-style: preserve-3d;
}

.n-gon > div::before {
	@include full-pseudo;
	left: 0;
	top: 0;
	background: green;
	transform: rotateX(calc(var(--angle) * 1deg));
	transform-origin: 0 0;
	display: none;
}

.n-gon-sub > div > div,
.n-gon > div::after {
	--shade-binary: calc(var(--i) - (var(--binary) * (2 * var(--l))));
	--shades: clamp(
		0,
		(var(--shade-binary) / var(--sides)) * var(--shade-opacity),
		1
	);
	--shade: rgba(
		var(--shade-color),
		var(--shade-color),
		var(--shade-color),
		calc(var(--shades) + var(--iso, 0))
	);
	--edge-size: calc(
		var(--edge-length) * var(--diameter) * ((100 - var(--bevel)) / 100) *
			(var(--edge-fix, 100) / 100)
	);

	content: '';
	position: absolute;
	right: calc(var(--bevel-height) * 0.5%);
	bottom: 0;
	width: calc(100% - var(--bevel-height) * 1%);
	height: var(--edge-size);
	background-color: var(--color-side);
	background-image: linear-gradient(var(--shade), var(--shade));
	display: block;
	transform: rotateX(calc(var(--edge-angle) * 1deg)) translateY(100%);
	transform-origin: 0 100%;
	box-shadow: antialised();
}

.n-gon[data-slice] > div:nth-child(1) {
	background-color: var(--color-side-start);
}

.n-gon[data-slice] > div:last-child:before {
	background-color: var(--color-side-end);
	display: block;
}

.n-gon.n-gon-sub[data-slice] > div:nth-child(1) {
	background-color: transparent;
}

// ! @ n-gon-defaults.scss

.n-gon {
	--diameter: calc(500 * var(--px));
	--height: calc(150 * var(--px));

	--clip-fix-color: rgba(255, 255, 255, 0.1);
	--edge-fix: 100; // 0-100
	--bevel-height: 0; // 0-100
	--bevel: 0; // 0-100
	--shade-color: 0; // 0 for black, 255 for white
	--shade-opacity: 1; // 0-10

	--color-side: #009fff;
	--color-top: #009fff;
	--color-bottom: #0b7fc4;
	--color-side-start: #0575b8;
	--color-side-end: #0b7fc4;
}

// ! @ half-sphere.scss

$smooth-spheres: true;
$sphere-poly-count: 14;

.sphere {
	--polygon-shape: #{n-polygon($sphere-poly-count)};
	--diameter: calc(60 * var(--px));
	--texture: var(--strawberry-texture);

	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--diameter);
	height: var(--diameter);
	transform: translate(-100%, -50%) rotateY(90deg) translateX(var(--diameter))
		translateX(-50%);
	transform-style: preserve-3d;
	transform-origin: 100% 0;
}

.sphere::before,
.sphere::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-image: var(--texture), var(--bgi);
	background-size: 100% 100%;
	transform-origin: 50% 50%;
	--max-rotation: calc((360 + 90 + var(--cameraZ)) * 1deg);

	@if $smooth-spheres == true {
		border-radius: 50%;
	} @else {
		clip-path: var(--polygon-shape);
	}
}

.sphere::before {
	background-color: orangered;
	transform: rotateY(90deg) rotateZ(calc(90deg + var(--cameraZ) * 1deg))
		translateZ(-0.1px);
}

.sphere::after {
	background-color: orange;
	transform: rotateX(calc(90deg + var(--cameraZ) * 1deg))
		rotateY(calc(90deg + var(--cameraY) * -1deg));
}

@keyframes rotateSphereBefore {
	to {
		transform: rotateY(90deg) rotateZ(var(--max-rotation))
			translateZ(-0.1px);
	}
}

@keyframes rotateSphereAfter {
	to {
		transform: rotateX(var(--max-rotation))
			rotateY(calc(90deg + var(--cameraY) * -1deg));
	}
}

// ! @ leaf.scss

.leaf {
	--diameter: calc(40 * var(--px));
	--texture: var(--noise-texture);
	--angleX: 146deg;
	--angleY: 0deg;
	--angleZ: -94deg;
	--shiftZ: 76%;
	--shiftX: calc(-37 * var(--px));
	--shiftY: calc(15 * var(--px));
	--scaleX: -1;
	--shadow-color: transparent;
	--shadow-shift: calc(7 * var(--px));
	--shadow-blur: calc(7 * var(--px));

	position: absolute;
	left: var(--shiftZ);
	top: 50%;
	width: var(--diameter);
	height: var(--diameter);
	transform: translate(-100%, -50%) rotateY(90deg) translateX(var(--diameter))
		translateX(-50%);
	transform-style: preserve-3d;
	transform-origin: 100% 0;
}

.leaf::after,
.leaf::before {
	content: '';
	position: absolute;
	right: var(--shiftY);
	bottom: var(--shiftX);
	width: 100%;
	height: 100%;
	display: block;
	background-image: var(--texture), var(--bgi, var(--bgi-def));
	background-size: 100% 100%;
	transform-origin: 50% 50%;
	transform: scaleX(var(--scaleX)) rotateZ(var(--angleZ))
		rotateX(var(--angleX)) translateZ(var(--s1, 0px)) rotateY(var(--angleY));
	clip-path: polygon(
		99% 88%,
		90% 92%,
		80% 94%,
		73% 94%,
		65% 92%,
		54% 88%,
		44% 80%,
		33% 73%,
		25% 64%,
		18% 57%,
		12% 49%,
		6% 44%,
		2% 36%,
		8% 35%,
		20% 35%,
		36% 35%,
		49% 35%,
		62% 35%,
		73% 39%,
		84% 44%,
		90% 52%,
		95% 64%,
		97% 72%,
		99% 80%
	);
}

.leaf::before {
	--s1: var(--shadow-shift);

	background-image: none;
	background-color: var(--shadow-color);

	filter: blur(var(--shadow-blur));
	border-radius: 0 50% 0 50%;
	clip-path: none;
	width: 85%;
	height: 61%;
}

.l4 {
	--diameter: calc(34 * var(--px));
	--angleX: 120deg;
	--angleY: 0;
	--angleZ: -96deg;
	--shiftZ: 115%;
	--shiftX: calc(-10 * var(--px));
	--shiftY: calc(14 * var(--px));
	--shadow-shift: 0;
	--shadow-blur: 0;
}

.l5 {
	--angleY: 16deg;
	--angleZ: -146deg;
	--shiftZ: -20%;
	--shiftX: calc(-21 * var(--px));
	--shiftY: calc(13 * var(--px));
}

.l6 {
	--angleX: 119deg;
	--angleZ: -160deg;
	--shiftZ: -131%;
	--shiftX: 0;
	--shiftY: calc(10 * var(--px));
	--angleY: 43deg;
}

.l7 {
	--diameter: calc(36 * var(--px));
	--angleX: 156deg;
	--angleY: 38deg;
	--angleZ: -190deg;
	--shiftZ: -10%;
	--shiftX: calc(30 * var(--px));
	--shiftY: calc(12 * var(--px));
	--shadow-shift: 0;
	--shadow-blur: 0;
}

.l8 {
	--angleX: 135deg;
	--angleY: 22deg;
	--angleZ: -170deg;
	--shiftZ: -22%;
	--shiftX: calc(1 * var(--px));
	--shiftY: calc(14 * var(--px));
}

.l9 {
	--angleX: 207deg;
	--angleY: 6deg;
	--shiftZ: -6%;
	--shiftX: calc(23 * var(--px));
}

// ! @ colors.scss

/** ==== colors ==== */
:root {
	--strawberry-shadow: rgba(196, 65, 65, 0.75);
	// --cake-base-shadow-color: #f2c5ae66;
	// --cake-base-shadow-dark-color: #a88471;
	--cake-base-shadow-color: #4933284a;
	--cake-base-shadow-dark-color: #7b6458;
	--cake-top-color: #e8898e;
	--cake-top-color-light: #e3a2a5;
	--cake-base-sides-color: #e5626c;
	--cake-base-sides-color-light: #ea7a82;
	--cake-base-spot-1: #ddbaa6;
	--cake-base-spot-2: #e4c7b7;
	--cake-base-sliced-shadow-color: #47362db5;
	// --cake-base-inner-layer-color: #c87f5a7a;
	// #c87f5ab8; #c87f5a; #ba8b73;
	--cake-base-inner-layer-color: #4e372c7a;
	--cake-base-glow-color: #bf333357; //#bf333333;
	--cake-sliced-inner-layer-1-1: #e9a6a8;
	--cake-sliced-inner-layer-1-2: #ea7a82;
	--cake-sliced-inner-layer-2-1: #ec999c;
	--cake-sliced-inner-layer-2-2: #ff727c;
	--cake-base-edges-texture: url('#{$texture-location}/sponge-slice.png');
	--sponge-texture: url('#{$texture-location}/sponge.png');
	--strawberry-texture: url('#{$texture-location}/plate.png');
	--cake-top-texture: url('#{$texture-location}/cake-top.png');
	--noise-texture: url('#{$texture-location}/noise.png');
}

html::before {
	// #e2cec4, #615065, #b390a4
	background-image: radial-gradient(circle at 25% 42%, #fff, #e2cec4);
}

[data-scene]::before {
	background-color: rgba(0, 0, 0, 0.3);
}

.plate {
	--shade-color: 0;
	--color-side: #fffffb;
	--color-top: #fde8e3;
	--color-bottom: #ebe6d8;
	--color-side-start: #fff;
	--color-side-end: #fff;
	--top-shades: #baa8b3;
	--top-layer-1: #fffffa;
	--top-layer-2: #fefaef;
	--texture-top: url('#{$texture-location}/plate.png');
	--texture-bottom: url('#{$texture-location}/plate-bottom.png');
	--texture-bottom-color: #fde8e3;
	--texture-edges: url('#{$texture-location}/plate-edges.png');
}

.cake-base {
	--color-side: #f2cab6;
	--color-top: var(--cake-top-color); // #e47f85;
	--color-bottom: #eebfa8;
	--color-side-start: #e6b7a0;
	--color-side-end: #fac9b1;
}

.n-gon.n-gon-sub.base-edges {
	--color-side: #edb58e;
	--color-bottom: #e5b899;
}

.spheres .sphere {
	--diameter: var(--sphere-d);
	--bgi: radial-gradient(circle at 0% 110%, #dab0aa 11%, #d94444);
}

.spheres > div:nth-child(3n-1) > .sphere {
	--bgi: radial-gradient(circle at 91% 50%, #d78b6b 11%, #fad3bf);
}

.leaf {
	--bgi-def: radial-gradient(circle at center, #71bc57, #65a234);
}

.l1 {
	--shadow-color: rgba(142, 73, 73, 0.331);
}

.l4 {
	--bgi: radial-gradient(circle at center, #71bc57, #487920);
}
.l5 {
	--bgi: radial-gradient(circle at center, #a4d395, #5a912d);
}
.l6 {
	--bgi: radial-gradient(circle at center, #a4d395, #71bc57);
}
.l7 {
	--bgi: radial-gradient(circle at center, #76c759, #88c357);
}
.l8 {
	--bgi: radial-gradient(circle at center, #89b81c, #68941b);
}
.l9 {
	--bgi: radial-gradient(circle at center, #82ba29, #68941b);
}

.cake-base,
.plate {
	--smooth-color: rgba(0, 0, 0, 0);
}

// ! @ index.scss

/** ==== geometrical configuration ==== */
$plate-faces: 14;
$cake-faces: 24;
$cake-slices: 4;
$cake-min-faces: $cake-faces - $cake-slices;

/** ==== physical configuration ==== */
:root {
	--plate-length: calc(640 * var(--px));
	--plate-height: calc(20 * var(--px));
	--plate-shadow-blur: calc(30 * var(--px));
	--cake-base-shadow-blur: calc(29 * var(--px));
	--plate-shadow-transform: translate3d(-50%, -58%, -1px) scaleY(114%);
	--cake-diameter: calc(380 * var(--px));
	--cake-edges-size: calc(16 * var(--px));
	--cake-edges-height: calc(19 * var(--px));
	--cake-height: calc(134 * var(--px));
	--cake-rZ: -108deg;
	--strawberry-circle-diameter: calc(280 * var(--px));
	--strawberry-diameter: calc(60 * var(--px));
	--strawberry-start: -30;
	--strawberry-increment: 27;
	--top-cream-height: calc(20 * var(--px));
	--layer-cream-height: calc(20 * var(--px));
}

/** ==== camera configuration ==== */
[data-camera] {
	--scene-size: 0;
	--perspective: 800;
	--cameraZ: 108;
	--cameraY: 46;
	--translateZ: 10;
}

/** ==== plate shadow ==== */
[data-scene] {
	background: none;
}

[data-scene]::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--plate-length);
	height: var(--plate-length);
	transform: var(--plate-shadow-transform);
	display: block;
	border-radius: 50%;
	filter: blur(var(--plate-shadow-blur));
}

/** ==== plate ==== */
.plate {
	@include poly-angles($plate-faces);
	--diameter: var(--plate-length);
	--height: var(--plate-height);
	--shade-opacity: 1;
	--polygon-shape: #{n-polygon($plate-faces)};
	--bevel-height: -0.8;

	transform: translate(-50%, -50%) rotateZ(12deg);

	&::before {
		background-image: radial-gradient(
				circle at center,
				transparent 50%,
				var(--texture-bottom-color)
			),
			var(--texture-bottom);
	}

	&::after {
		--layer-1: linear-gradient(0deg, var(--top-layer-1), transparent);
		--layer-2: radial-gradient(
			ellipse at 54% 97%,
			var(--top-layer-2),
			transparent
		);
		background-image: var(--layer-2), var(--texture-top), var(--layer-1);
		box-shadow: inset calc(-28 * var(--px)) calc(53 * var(--px))
			calc(58 * var(--px)) calc(-29 * var(--px)) var(--top-shades);
		border-radius: 50%;
	}
}

@for $i from 1 through $plate-faces {
	.plate > div:nth-child(#{$i}) {
		@include bin-vars($i, $plate-faces);
	}
}

.plate > div::after {
	background-image: var(--texture-edges),
		linear-gradient(var(--shade), var(--shade));
	background-size: auto 100%;
	background-position: 0 calc(var(--i) * 40 * var(--px));
}

/** ==== cake base ==== */
.cake-base {
	@include poly-angles($cake-faces);
	--edge-fix: 102;
	--shade-color: 255;
	--shade-opacity: 0.6;
	--diameter: var(--cake-diameter);
	--height: var(--cake-height);
	--polygon-shape: #{n-polygon($cake-faces, $cake-slices)};
	--bevel-height: -0.8;
	transform: translate(-50%, -50%) translateZ(var(--plate-height))
		rotateZ(var(--cake-rZ));
}

@for $i from 1 through $cake-min-faces {
	.cake-base > div:nth-child(#{$i}) {
		@include bin-vars($i, $cake-faces);
	}
}

/** ==== strawberries ==== */
.spheres {
	--d: var(--strawberry-circle-diameter);
	--sphere-d: var(--strawberry-diameter);
	--start: var(--strawberry-start);
	--increment: var(--strawberry-increment);

	// background-color: red;
	// border-radius: 50%;

	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--d);
	height: var(--d);
	transform: translate(-50%, -50%)
		translateZ(
			calc(var(--cake-height) + var(--plate-height) + (1 * var(--px)))
		);
}

@for $i from 1 through 10 {
	.spheres > div:nth-child(#{$i}) {
		--i: #{$i};
		z-index: #{-$i};
	}
}

.spheres > div {
	--angle: calc((var(--start) + (var(--increment) * var(--i))) * 1deg);
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--sphere-d);
	height: var(--sphere-d);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(var(--angle))
		translate(calc(var(--d) * 0.5)) rotate(calc(var(--angle) * -1));
	transform-style: preserve-3d;
	box-shadow: calc(-8 * var(--px)) calc(-8 * var(--px)) calc(4 * var(--px)) 0
			rgba(0, 0, 0, 0.13),
		calc(-3 * var(--px)) calc(-9 * var(--px)) calc(27 * var(--px)) 0
			var(--strawberry-shadow);
}

/** ==== shadows ==== */
.cake-base-shadow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--cake-diameter);
	height: var(--cake-diameter);
	transform: translate3d(-50%, -50%, var(--plate-height));
	filter: blur(var(--cake-base-shadow-blur));
}

.cake-base-shadow::before,
.cake-base-shadow::after {
	content: '';
	position: absolute;
	display: block;
	right: 0;
	top: 0;
	background-color: var(--cake-base-shadow-color);
}

.cake-base-shadow::before {
	width: 115%;
	height: 115%;
	border-radius: 50%;
	transform: translate(11%, -12%);
	background-image: radial-gradient(
		circle at center,
		var(--cake-base-shadow-dark-color) 40%,
		transparent 17%
	);
}

.cake-base-shadow::after {
	width: 50%;
	height: 77%;
	transform: translate(70%, -13%) rotate(28deg);
	transform-origin: 0 0;
}

/** ==== decoration ==== */
.cake-base > div {
	--light: linear-gradient(-90deg, var(--cake-base-glow-color), transparent);
}

.cake-base > div::after {
	--common: var(--sponge-texture), linear-gradient(var(--shade), var(--shade)),
		linear-gradient(
			90deg,
			var(--cake-base-sides-color),
			var(--cake-base-sides-color-light)
		),
		linear-gradient(
			var(--cake-base-inner-layer-color),
			var(--cake-base-inner-layer-color)
		);
	background-image: var(--light), var(--common);
	background-size: 100% 100%, cover, 100% 100%, var(--top-cream-height) 100%,
		var(--cake-edges-height) 100%;
	background-repeat: no-repeat, repeat, repeat, repeat-y, repeat-y;
	background-position: 0 0,
		calc(var(--i) * 14 * var(--px)) calc(var(--i) * 11 * var(--px)), 0 0,
		0 0, top right;
}

.cake-base > div:last-child::after {
	--l1: radial-gradient(
		circle at center,
		var(--cake-base-spot-1) 30%,
		transparent 34%
	);
	--l2: radial-gradient(
		circle at center,
		var(--cake-base-spot-2) 30%,
		transparent 34%
	);

	background-image: var(--light), var(--l2), var(--l1), var(--l1),
		var(--common);
	background-size: 100% 100%, 14% 14%, 20% 20%, 30% 30%, 68% 83%, 100% 100%,
		var(--top-cream-height) 100%, var(--cake-edges-height) 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat,
		repeat, repeat-y, repeat-y;
	background-position: 0 0, 55% 52%, 36% 72%, 20% 40%, 0 0, 0 0, 0 0,
		top right;
}

.n-gon.cake-base > div:first-child {
	--common: linear-gradient(
			0deg,
			var(--cake-base-inner-layer-color) 51%,
			var(--color-side)
		),
		var(--sponge-texture),
		linear-gradient(var(--shade, transparent), var(--shade, transparent)),
		linear-gradient(
			49deg,
			var(--cake-base-sides-color),
			var(--cake-base-sides-color-light)
		);

	background-image: linear-gradient(
			200deg,
			var(--cake-base-sliced-shadow-color),
			transparent
		),
		var(--light),
		linear-gradient(
			49deg,
			var(--cake-sliced-inner-layer-1-1),
			var(--cake-sliced-inner-layer-1-2)
		),
		var(--common);

	background-size: 100% 100%, 100% 100%, var(--layer-cream-height) 100%,
		var(--cake-edges-height) 1px, cover, 100% 100%,
		var(--top-cream-height) 100%;

	background-repeat: repeat, no-repeat, repeat-y, repeat-y, repeat, repeat,
		repeat-y;
	background-position: 0 0, 0 0, top center, top right, 0 0, 0 0, 0 0;
}

.n-gon.cake-base > div:last-child::before {
	--common: linear-gradient(
			0deg,
			var(--color-side),
			var(--cake-base-inner-layer-color) 51%
		),
		var(--sponge-texture),
		linear-gradient(var(--shade, transparent), var(--shade, transparent)),
		linear-gradient(
			49deg,
			var(--cake-base-sides-color),
			var(--cake-base-sides-color-light)
		);

	background-image: linear-gradient(
			185deg,
			var(--cake-base-sliced-shadow-color),
			transparent
		),
		var(--light),
		linear-gradient(
			49deg,
			var(--cake-sliced-inner-layer-2-1),
			var(--cake-sliced-inner-layer-2-2)
		),
		var(--common);

	background-size: 100% 100%, 100% 100%, var(--layer-cream-height) 100%,
		var(--cake-edges-height) 1px, cover, 100% 100%,
		var(--top-cream-height) 100%;

	background-repeat: repeat, no-repeat, repeat-y, repeat-y, repeat, repeat,
		repeat-y;
	background-position: 0 0, 0 0, top center, top right, 0 0, 0 0, 0 0;
}

.n-gon.cake-base::after {
	background-image: var(--cake-top-texture),
		conic-gradient(
			from 106deg at center,
			var(--cake-top-color),
			var(--cake-top-color-light),
			var(--cake-top-color)
		);
}

/** ==== rotation ==== */
[data-camera][data-autorotate] > [data-scene] {
	animation: rotateCamera var(--auto-rotate-timing-func)
		var(--auto-rotate-duration) var(--auto-rotate-direction) infinite;
}

[data-camera][data-autorotate] .sphere::before {
	animation: rotateSphereBefore var(--auto-rotate-timing-func)
		var(--auto-rotate-duration) var(--auto-rotate-direction) infinite;
}

[data-camera][data-autorotate] .sphere::after {
	animation: rotateSphereAfter var(--auto-rotate-timing-func)
		var(--auto-rotate-duration) var(--auto-rotate-direction) infinite;
}

              
            
!

JS

              
                // * hint: try clicking/tapping the `How to?`
// * anchor located at the top-right corner
window.addEventListener('load', () => {
	new Camera()
		.setOptimalPerspective()
		.with({
			debug: true,
			rotate: {
				speed: 1.2
			}
		})
		.init()
})

              
            
!
999px

Console