mirror of
https://github.com/sune-org/sune-logo.git
synced 2026-03-17 03:11:04 +00:00
156 lines
5.6 KiB
HTML
156 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sune Logo ✺</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--sune-primary: #ffffff;
|
|
--sune-bg: #000000;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--sune-bg);
|
|
color: var(--sune-primary);
|
|
transition: background-color 0.4s ease, color 0.4s ease;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-center: center;
|
|
height: 100vh;
|
|
}
|
|
|
|
.inverted {
|
|
--sune-primary: #000000;
|
|
--sune-bg: #ffffff;
|
|
}
|
|
|
|
@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.8); opacity: 0.3; }
|
|
}
|
|
|
|
@keyframes sune-breathe {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.08); }
|
|
}
|
|
|
|
.sune-main-group {
|
|
transform-origin: center;
|
|
animation: sune-spin 16s linear infinite;
|
|
}
|
|
|
|
.is-generating .sune-main-group {
|
|
animation: sune-spin 4s linear infinite;
|
|
}
|
|
|
|
.sune-spike {
|
|
transform-origin: center;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Staggered pulse for the 16 spikes */
|
|
.is-generating .sune-spike {
|
|
animation: sune-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* 16 spikes, staggered by 1/16th of the duration */
|
|
.sune-spike:nth-child(1) { animation-delay: 0.000s; }
|
|
.sune-spike:nth-child(2) { animation-delay: 0.125s; }
|
|
.sune-spike:nth-child(3) { animation-delay: 0.250s; }
|
|
.sune-spike:nth-child(4) { animation-delay: 0.375s; }
|
|
.sune-spike:nth-child(5) { animation-delay: 0.500s; }
|
|
.sune-spike:nth-child(6) { animation-delay: 0.625s; }
|
|
.sune-spike:nth-child(7) { animation-delay: 0.750s; }
|
|
.sune-spike:nth-child(8) { animation-delay: 0.875s; }
|
|
.sune-spike:nth-child(9) { animation-delay: 1.000s; }
|
|
.sune-spike:nth-child(10) { animation-delay: 1.125s; }
|
|
.sune-spike:nth-child(11) { animation-delay: 1.250s; }
|
|
.sune-spike:nth-child(12) { animation-delay: 1.375s; }
|
|
.sune-spike:nth-child(13) { animation-delay: 1.500s; }
|
|
.sune-spike:nth-child(14) { animation-delay: 1.625s; }
|
|
.sune-spike:nth-child(15) { animation-delay: 1.750s; }
|
|
.sune-spike:nth-child(16) { animation-delay: 1.875s; }
|
|
|
|
.logo-container {
|
|
transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1);
|
|
animation: sune-breathe 8s ease-in-out infinite;
|
|
}
|
|
|
|
.is-generating.logo-container {
|
|
animation: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col items-center justify-center">
|
|
|
|
<div id="logoWrapper" class="logo-container cursor-pointer p-10" onclick="toggleState()">
|
|
<svg id="suneLogo" width="400" height="400" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<g class="sune-main-group" id="spikeGroup"></g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="fixed bottom-12 flex flex-col items-center gap-6">
|
|
<div class="flex gap-4">
|
|
<button onclick="toggleInvert()" class="w-10 h-10 rounded-full border border-current flex items-center justify-center hover:bg-current hover:text-[var(--sune-bg)] transition-all" title="Invert Colors">
|
|
<div class="w-4 h-4 rounded-full bg-current"></div>
|
|
</button>
|
|
<button id="stateBtn" onclick="toggleState()" class="px-6 py-2 rounded-full border border-current text-[10px] uppercase tracking-[0.2em] hover:bg-current hover:text-[var(--sune-bg)] transition-all">
|
|
Idle
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const spikeGroup = document.getElementById('spikeGroup');
|
|
const points = 16;
|
|
const outerRadius = 48;
|
|
const innerRadius = 14;
|
|
const centerX = 50;
|
|
const centerY = 50;
|
|
|
|
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);
|
|
|
|
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);
|
|
|
|
html += `<path class="sune-spike" d="M ${centerX} ${centerY} L ${x1} ${y1} L ${xPeak} ${yPeak} L ${x2} ${y2} Z" />`;
|
|
}
|
|
spikeGroup.innerHTML = html;
|
|
}
|
|
|
|
function toggleInvert() {
|
|
document.body.classList.toggle('inverted');
|
|
}
|
|
|
|
function toggleState() {
|
|
const wrapper = document.getElementById('logoWrapper');
|
|
const btn = document.getElementById('stateBtn');
|
|
const isGen = wrapper.classList.toggle('is-generating');
|
|
btn.innerText = isGen ? 'Generating' : 'Idle';
|
|
if ('vibrate' in navigator) navigator.vibrate(isGen ? [10, 30, 10] : 10);
|
|
}
|
|
|
|
generateSune();
|
|
</script>
|
|
</body>
|
|
</html>
|