sune-org/sune-logo
1
0
Fork 0
mirror of https://github.com/sune-org/sune-logo.git synced 2026-03-17 03:11:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Tiny 64px monochrome 16-point logo

Browse Source
This commit is contained in:
multipleof4
2026-02-16 19:48:35 -08:00
parent c9b8312a26
commit 659f468aaf
1 changed files with 41 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sune Logo ✺</title> <title>Sune ✺</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<style> <style>
:root { :root {
@@ -14,12 +14,13 @@
body { body {
background-color: var(--sune-bg); background-color: var(--sune-bg);
color: var(--sune-primary); color: var(--sune-primary);
transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.3s ease, color 0.3s ease;
margin: 0; margin: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-center: center; justify-content: center;
height: 100vh; height: 100vh;
font-family: ui-sans-serif, system-ui, sans-serif;
} }
.inverted { .inverted {
@@ -34,12 +35,7 @@
@keyframes sune-pulse { @keyframes sune-pulse {
0%, 100% { transform: scale(1); opacity: 1; } 0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.8); opacity: 0.3; } 50% { transform: scale(0.75); opacity: 0.4; }
}
@keyframes sune-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
} }
.sune-main-group { .sune-main-group {
@@ -48,7 +44,7 @@
} }
.is-generating .sune-main-group { .is-generating .sune-main-group {
animation: sune-spin 4s linear infinite; animation: sune-spin 3s linear infinite;
} }
.sune-spike { .sune-spike {
@@ -56,63 +52,60 @@
fill: currentColor; fill: currentColor;
} }
/* Staggered pulse for the 16 spikes */
.is-generating .sune-spike { .is-generating .sune-spike {
animation: sune-pulse 2s ease-in-out infinite; animation: sune-pulse 1.5s ease-in-out infinite;
} }
/* 16 spikes, staggered by 1/16th of the duration */ /* Staggered delays for 16 spikes */
.sune-spike:nth-child(1) { animation-delay: 0.000s; } .sune-spike:nth-child(1) { animation-delay: 0.00s; }
.sune-spike:nth-child(2) { animation-delay: 0.125s; } .sune-spike:nth-child(2) { animation-delay: 0.09s; }
.sune-spike:nth-child(3) { animation-delay: 0.250s; } .sune-spike:nth-child(3) { animation-delay: 0.18s; }
.sune-spike:nth-child(4) { animation-delay: 0.375s; } .sune-spike:nth-child(4) { animation-delay: 0.27s; }
.sune-spike:nth-child(5) { animation-delay: 0.500s; } .sune-spike:nth-child(5) { animation-delay: 0.36s; }
.sune-spike:nth-child(6) { animation-delay: 0.625s; } .sune-spike:nth-child(6) { animation-delay: 0.45s; }
.sune-spike:nth-child(7) { animation-delay: 0.750s; } .sune-spike:nth-child(7) { animation-delay: 0.54s; }
.sune-spike:nth-child(8) { animation-delay: 0.875s; } .sune-spike:nth-child(8) { animation-delay: 0.63s; }
.sune-spike:nth-child(9) { animation-delay: 1.000s; } .sune-spike:nth-child(9) { animation-delay: 0.72s; }
.sune-spike:nth-child(10) { animation-delay: 1.125s; } .sune-spike:nth-child(10) { animation-delay: 0.81s; }
.sune-spike:nth-child(11) { animation-delay: 1.250s; } .sune-spike:nth-child(11) { animation-delay: 0.90s; }
.sune-spike:nth-child(12) { animation-delay: 1.375s; } .sune-spike:nth-child(12) { animation-delay: 0.99s; }
.sune-spike:nth-child(13) { animation-delay: 1.500s; } .sune-spike:nth-child(13) { animation-delay: 1.08s; }
.sune-spike:nth-child(14) { animation-delay: 1.625s; } .sune-spike:nth-child(14) { animation-delay: 1.17s; }
.sune-spike:nth-child(15) { animation-delay: 1.750s; } .sune-spike:nth-child(15) { animation-delay: 1.26s; }
.sune-spike:nth-child(16) { animation-delay: 1.875s; } .sune-spike:nth-child(16) { animation-delay: 1.35s; }
.logo-container { .logo-wrapper {
transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1); width: 64px;
animation: sune-breathe 8s ease-in-out infinite; height: 64px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
} }
.is-generating.logo-container { .logo-wrapper:active {
animation: none; transform: scale(0.85);
} }
</style> </style>
</head> </head>
<body class="flex flex-col items-center justify-center"> <body onclick="toggleState()">
<div id="logoWrapper" class="logo-container cursor-pointer p-10" onclick="toggleState()"> <div id="logoWrapper" class="logo-wrapper">
<svg id="suneLogo" width="400" height="400" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg width="64" height="64" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="sune-main-group" id="spikeGroup"></g> <g class="sune-main-group" id="spikeGroup"></g>
</svg> </svg>
</div> </div>
<div class="fixed bottom-12 flex flex-col items-center gap-6"> <div class="fixed bottom-6 flex gap-4">
<div class="flex gap-4"> <button onclick="event.stopPropagation(); toggleInvert()" class="text-[10px] uppercase tracking-tighter opacity-40 hover:opacity-100 transition">Invert</button>
<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> </div>
<script> <script>
const spikeGroup = document.getElementById('spikeGroup'); const spikeGroup = document.getElementById('spikeGroup');
const points = 16; const points = 16;
const outerRadius = 48; const outerRadius = 48;
const innerRadius = 14; const innerRadius = 18; // Increased for legibility at tiny scales
const centerX = 50; const centerX = 50;
const centerY = 50; const centerY = 50;
@@ -125,10 +118,8 @@
const x1 = centerX + innerRadius * Math.cos(angle); const x1 = centerX + innerRadius * Math.cos(angle);
const y1 = centerY + innerRadius * Math.sin(angle); const y1 = centerY + innerRadius * Math.sin(angle);
const xPeak = centerX + outerRadius * Math.cos(midAngle); const xPeak = centerX + outerRadius * Math.cos(midAngle);
const yPeak = centerY + outerRadius * Math.sin(midAngle); const yPeak = centerY + outerRadius * Math.sin(midAngle);
const x2 = centerX + innerRadius * Math.cos(nextAngle); const x2 = centerX + innerRadius * Math.cos(nextAngle);
const y2 = centerY + innerRadius * Math.sin(nextAngle); const y2 = centerY + innerRadius * Math.sin(nextAngle);
@@ -143,10 +134,8 @@
function toggleState() { function toggleState() {
const wrapper = document.getElementById('logoWrapper'); const wrapper = document.getElementById('logoWrapper');
const btn = document.getElementById('stateBtn');
const isGen = wrapper.classList.toggle('is-generating'); const isGen = wrapper.classList.toggle('is-generating');
btn.innerText = isGen ? 'Generating' : 'Idle'; if ('vibrate' in navigator) navigator.vibrate(10);
if ('vibrate' in navigator) navigator.vibrate(isGen ? [10, 30, 10] : 10);
} }
generateSune(); generateSune();