Source: Graphic Design by Amy Howard (ID1350)
Author: Howard, Amy (ID633)
Primary doc?
Published in:
Race described:
Full text? 0
Online link:
Content id: 27635
Filename received:
Filename assigned:
2025-07-18 - 0000-00-00
Spinning projects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spinning Orbs of a Brilliant Mind</title>
<style>
body {
margin: 0;
background: linear-gradient(to bottom, #1a1a2e, #16213e);
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.head {
position: absolute;
width: 150px;
height: 200px;
background: #333;
border-radius: 50% 50% 45% 45% / 55% 55% 40% 40%;
z-index: 1;
clip-path: polygon(50% 0%, 70% 10%, 80% 30%, 75% 60%, 60% 90%, 40% 100%, 20% 90%, 15% 60%, 20% 30%, 30% 10%);
filter: drop-shadow(0 0 10px #000);
}
.orbital {
position: relative;
width: 400px;
height: 400px;
animation: spin 6s linear infinite;
transform-origin: center center;
}
.orb {
position: absolute;
width: 40px;
height: 40px;
background: radial-gradient(circle, #fffaa5, #f7c04a);
border-radius: 50%;
box-shadow: 0 0 15px #f7c04a;
display: flex;
align-items: center;
justify-content: center;
color: black;
font-size: 12px;
font-family: sans-serif;
transition: transform 0.2s ease;
}
.orb:hover {
transform: scale(1.5);
z-index: 2;
background: radial-gradient(circle, #ffffff, #ffee88);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.paused {
animation-play-state: paused !important;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="orbital" id="orbital">
<!-- 7 project orbs -->
<div class="orb" style="top: 0%; left: 50%; transform: translate(-50%, -50%);">1</div>
<div class="orb" style="top: 20%; left: 85%; transform: translate(-50%, -50%);">2</div>
<div class="orb" style="top: 50%; left: 100%; transform: translate(-50%, -50%);">3</div>
<div class="orb" style="top: 80%; left: 85%; transform: translate(-50%, -50%);">4</div>
<div class="orb" style="top: 100%; left: 50%; transform: translate(-50%, -50%);">5</div>
<div class="orb" style="top: 80%; left: 15%; transform: translate(-50%, -50%);">6</div>
<div class="orb" style="top: 20%; left: 15%; transform: translate(-50%, -50%);">7</div>
</div>
<script>
const orbital = document.getElementById('orbital');
const pauseSpin = () => orbital.classList.add('paused');
const resumeSpin = () => orbital.classList.remove('paused');
orbital.addEventListener('mousedown', pauseSpin);
orbital.addEventListener('mouseup', resumeSpin);
orbital.addEventListener('touchstart', pauseSpin);
orbital.addEventListener('touchend', resumeSpin);
</script>
</body>
</html>
Cross references
No cross references.