mirror of
https://github.com/sune-org/sune-logo.git
synced 2026-03-17 03:11:04 +00:00
Feat: Initial animated 16-point Sune logo demo
This commit is contained in:
156
index.html
Normal file
156
index.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sune Logo Animation ✺</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--sune-primary: #ffffff;
|
||||
--sune-bg: #000000;
|
||||
--miku-teal: #39c5bb;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--sune-bg);
|
||||
color: var(--sune-primary);
|
||||
transition: background-color 0.5s ease, color 0.5s ease;
|
||||
}
|
||||
|
||||
.inverted {
|
||||
--sune-primary: #000000;
|
||||
--sune-bg: #ffffff;
|
||||
}
|
||||
|
||||
/* The Core Animation Keyframes */
|
||||
@keyframes sune-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes sune-pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(0.85); opacity: 0.4; }
|
||||
}
|
||||
|
||||
@keyframes sune-breathe {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.sune-main-group {
|
||||
transform-origin: center;
|
||||
animation: sune-spin 12s linear infinite;
|
||||
}
|
||||
|
||||
.is-generating .sune-main-group {
|
||||
animation: sune-spin 4s linear infinite;
|
||||
}
|
||||
|
||||
.sune-spike {
|
||||
transform-origin: center;
|
||||
transition: fill 0.3s ease;
|
||||
}
|
||||
|
||||
/* Staggered animation for 16 spikes */
|
||||
.is-generating .sune-spike {
|
||||
animation: sune-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Generate delays for 16 points via CSS (Multiples of 4 logic) */
|
||||
.sune-spike:nth-child(4n) { color: var(--miku-teal); }
|
||||
|
||||
.sune-spike:nth-child(1) { animation-delay: 0.0s; }
|
||||
.sune-spike:nth-child(2) { animation-delay: 0.1s; }
|
||||
.sune-spike:nth-child(3) { animation-delay: 0.2s; }
|
||||
.sune-spike:nth-child(4) { animation-delay: 0.3s; }
|
||||
.sune-spike:nth-child(5) { animation-delay: 0.4s; }
|
||||
.sune-spike:nth-child(6) { animation-delay: 0.5s; }
|
||||
.sune-spike:nth-child(7) { animation-delay: 0.6s; }
|
||||
.sune-spike:nth-child(8) { animation-delay: 0.7s; }
|
||||
.sune-spike:nth-child(9) { animation-delay: 0.8s; }
|
||||
.sune-spike:nth-child(10) { animation-delay: 0.9s; }
|
||||
.sune-spike:nth-child(11) { animation-delay: 1.0s; }
|
||||
.sune-spike:nth-child(12) { animation-delay: 1.1s; }
|
||||
.sune-spike:nth-child(13) { animation-delay: 1.2s; }
|
||||
.sune-spike:nth-child(14) { animation-delay: 1.3s; }
|
||||
.sune-spike:nth-child(15) { animation-delay: 1.4s; }
|
||||
.sune-spike:nth-child(16) { animation-delay: 1.5s; }
|
||||
|
||||
.logo-container {
|
||||
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.logo-container:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex flex-col items-center justify-center overflow-hidden">
|
||||
|
||||
<div id="logoWrapper" class="logo-container cursor-pointer p-20" onclick="toggleState()">
|
||||
<svg id="suneLogo" width="300" height="300" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<g class="sune-main-group" id="spikeGroup">
|
||||
<!-- Spikes will be generated here -->
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="fixed bottom-10 flex flex-col items-center gap-4">
|
||||
<h1 class="text-2xl font-light tracking-widest uppercase opacity-50">Sune ✺ 16</h1>
|
||||
<div class="flex gap-4">
|
||||
<button onclick="toggleInvert()" class="px-4 py-2 border border-current rounded-full text-xs hover:bg-current hover:text-black transition">Invert Color</button>
|
||||
<button onclick="toggleState()" class="px-4 py-2 border border-current rounded-full text-xs hover:bg-current hover:text-black transition">Toggle "Generating"</button>
|
||||
</div>
|
||||
<p class="text-[10px] opacity-30 font-mono">Click logo to expand/collapse</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const spikeGroup = document.getElementById('spikeGroup');
|
||||
const points = 16;
|
||||
const outerRadius = 45;
|
||||
const innerRadius = 15;
|
||||
const centerX = 50;
|
||||
const centerY = 50;
|
||||
|
||||
// Procedural generation of the 16-point star
|
||||
function generateSune() {
|
||||
let html = '';
|
||||
for (let i = 0; i < points; i++) {
|
||||
const angle = (i * 2 * Math.PI) / points;
|
||||
const nextAngle = ((i + 1) * 2 * Math.PI) / points;
|
||||
const midAngle = angle + (Math.PI / points);
|
||||
|
||||
// Calculate coordinates
|
||||
const x1 = centerX + innerRadius * Math.cos(angle);
|
||||
const y1 = centerY + innerRadius * Math.sin(angle);
|
||||
|
||||
const xPeak = centerX + outerRadius * Math.cos(midAngle);
|
||||
const yPeak = centerY + outerRadius * Math.sin(midAngle);
|
||||
|
||||
const x2 = centerX + innerRadius * Math.cos(nextAngle);
|
||||
const y2 = centerY + innerRadius * Math.sin(nextAngle);
|
||||
|
||||
// Create a single spike path
|
||||
html += `<path class="sune-spike" d="M ${centerX} ${centerY} L ${x1} ${y1} L ${xPeak} ${yPeak} L ${x2} ${y2} Z" fill="currentColor" />`;
|
||||
}
|
||||
spikeGroup.innerHTML = html;
|
||||
}
|
||||
|
||||
function toggleInvert() {
|
||||
document.body.classList.toggle('inverted');
|
||||
}
|
||||
|
||||
function toggleState() {
|
||||
const wrapper = document.getElementById('logoWrapper');
|
||||
wrapper.classList.toggle('is-generating');
|
||||
|
||||
// Haptic feedback simulation
|
||||
if ('vibrate' in navigator) navigator.vibrate(10);
|
||||
}
|
||||
|
||||
generateSune();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user