<!-- made with http://github.com/lume/lume -->
<script src="https://assets.codepen.io/191583/LUME.unversioned.2.js"></script>

<!-- Polyfill for Pointer Events (boo Safari) -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

<lume-scene id="scene" touch-action="none">
	<lume-node id="container" size="78 78" align="0.5 0.5" mount-point="0.5 0.5">
		<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
			<img src="https://momlovesbest.com/wp-content/uploads/2020/03/A-UPF-Rating.png" />
		</lume-node>
		<lume-node class="rotator A" size="60 60" align="1 1">
			<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
				<img src="https://assets.codepen.io/191583/little-sun.png" />
			</lume-node>
			<lume-node class="rotator" size="45 45" align="1 1">
				<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
					<img src="https://assets.codepen.io/191583/little-sun.png" />
				</lume-node>
				<lume-node class="rotator" size="28 28" align="1 1">
					<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
						<img src="https://assets.codepen.io/191583/little-sun.png" />
					</lume-node>
				</lume-node>
			</lume-node>
		</lume-node>
		<lume-node class="rotator A" size="60 60" mount-point="1 1">
			<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
				<img src="https://assets.codepen.io/191583/little-sun.png" />
			</lume-node>
			<lume-node class="rotator" size="45 45" mount-point="1 1">
				<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
					<img src="https://assets.codepen.io/191583/little-sun.png" />
				</lume-node>
				<lume-node class="rotator" size="28 28" mount-point="1 1">
					<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
						<img src="https://assets.codepen.io/191583/little-sun.png" />
					</lume-node>
				</lume-node>
			</lume-node>
		</lume-node>
		<lume-node class="rotator B" size="60 60" align="0 1" mount-point="1 0">
			<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
				<img src="https://assets.codepen.io/191583/little-sun.png" />
			</lume-node>
			<lume-node class="rotator" size="45 45" align="0 1" mount-point="1 0">
				<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
					<img src="https://assets.codepen.io/191583/little-sun.png" />
				</lume-node>
				<lume-node class="rotator" size="28 28" align="0 1" mount-point="1 0">
					<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
						<img src="https://assets.codepen.io/191583/little-sun.png" />
					</lume-node>
				</lume-node>
			</lume-node>
		</lume-node>
		<lume-node class="B" size="60 60" align="1 0" mount-point="0 1">
			<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
				<img src="https://assets.codepen.io/191583/little-sun.png" />
			</lume-node>
			<lume-node class="rotator" size="45 45" align="1 0" mount-point="0 1">
				<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
					<img src="https://assets.codepen.io/191583/little-sun.png" />
				</lume-node>
				<lume-node class="rotator" size="28 28" align="1 0" mount-point="0 1">
					<lume-node class="sun" size-mode="proportional proportional" size="0.8 0.8" position="0 0 10" align="0.5 0.5" mount-point="0.5 0.5">
						<img src="https://assets.codepen.io/191583/little-sun.png" />
					</lume-node>
				</lume-node>
			</lume-node>
		</lume-node>
	</lume-node>
</lume-scene>
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
lume-scene {
	background: #fefefe;
	touch-action: none;
}
lume-node {
	border-radius: 100%;
	color: white;
	font-family: sans-serif;
	font-weight: bold;
}
lume-node:not(.sun) {
	background: rgba(0, 0, 0, 0.1);
}
img {
	width: 100%;
	height: 100%;
	display: block;
}
LUME.useDefaultNames();

document.querySelectorAll(".A, .A .rotator").forEach((n) => {
	n.rotation = (x, y, z, t) => [
		-65 * Math.sin(t * 0.0005),
		y,
		-65 * Math.sin(t * 0.0005)
	];
});

document.querySelectorAll(".B, .B .rotator").forEach((n) => {
	n.rotation = (x, y, z, t) => [
		65 * Math.sin(t * 0.0005),
		65 * Math.sin(t * 0.0005),
		z
	];
});

const rotationAmount = 35;

// Add some interaction so we can see the shine from the light!
scene.addEventListener("pointermove", (event) => {
	// Rotate the image a little bit too.
	container.rotation.y =
		(event.clientX / scene.calculatedSize.x) * (rotationAmount * 2) -
		rotationAmount;
	container.rotation.x = -(
		(event.clientY / scene.calculatedSize.y) * (rotationAmount * 2) -
		rotationAmount
	);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.