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: Sync all 16 points to rapid non-rotating pulse

Browse Source
This commit is contained in:
multipleof4
2026-02-23 17:01:36 -08:00
parent 9a2eddfc38
commit 24fb38130e
1 changed files with 19 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@@ -7,36 +7,18 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<style> <style>
/* /*
The core rotation creates a surging, non-linear "thinking" motion. Super quick, life-like pulse.
It sweeps forward, slows down seamlessly, then sweeps again. All 16 points expand and contract simultaneously while the core stays grounded.
*/ */
.s-spin { .s-spikes-pulse {
animation: s-surge 2s infinite; transform-origin: 50px 50px;
transform-origin: 50% 50%; animation: s-rapid 0.35s infinite;
} }
/* @keyframes s-rapid {
Odd and Even spikes pulse out of sync with each other
creating an organic, jellyfish-like breathing effect.
*/
.s-even { transform-origin: 50px 50px; animation: s-pulse-e 2s infinite; }
.s-odd { transform-origin: 50px 50px; animation: s-pulse-o 2s infinite; }
@keyframes s-surge {
0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
50% { transform: rotate(45deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
100% { transform: rotate(90deg); }
}
@keyframes s-pulse-e {
0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
50% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 50% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
} }
@keyframes s-pulse-o {
0%, 100% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
50% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
}
</style> </style>
</head> </head>
<body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen gap-12 text-sm selection:bg-black/10 font-sans"> <body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen gap-12 text-sm selection:bg-black/10 font-sans">
@@ -47,24 +29,23 @@
<!-- Master spike perfectly tuned to match the logo proportions --> <!-- Master spike perfectly tuned to match the logo proportions -->
<polygon id="spike" points="47,50 50,2 53,50"/> <polygon id="spike" points="47,50 50,2 53,50"/>
<g id="s-even"> <!-- All 16 spikes combined into a single group -->
<g id="s-spikes">
<use href="#spike"/> <use href="#spike"/>
<use href="#spike" transform="rotate(45 50 50)"/>
<use href="#spike" transform="rotate(90 50 50)"/>
<use href="#spike" transform="rotate(135 50 50)"/>
<use href="#spike" transform="rotate(180 50 50)"/>
<use href="#spike" transform="rotate(225 50 50)"/>
<use href="#spike" transform="rotate(270 50 50)"/>
<use href="#spike" transform="rotate(315 50 50)"/>
</g>
<g id="s-odd">
<use href="#spike" transform="rotate(22.5 50 50)"/> <use href="#spike" transform="rotate(22.5 50 50)"/>
<use href="#spike" transform="rotate(45 50 50)"/>
<use href="#spike" transform="rotate(67.5 50 50)"/> <use href="#spike" transform="rotate(67.5 50 50)"/>
<use href="#spike" transform="rotate(90 50 50)"/>
<use href="#spike" transform="rotate(112.5 50 50)"/> <use href="#spike" transform="rotate(112.5 50 50)"/>
<use href="#spike" transform="rotate(135 50 50)"/>
<use href="#spike" transform="rotate(157.5 50 50)"/> <use href="#spike" transform="rotate(157.5 50 50)"/>
<use href="#spike" transform="rotate(180 50 50)"/>
<use href="#spike" transform="rotate(202.5 50 50)"/> <use href="#spike" transform="rotate(202.5 50 50)"/>
<use href="#spike" transform="rotate(225 50 50)"/>
<use href="#spike" transform="rotate(247.5 50 50)"/> <use href="#spike" transform="rotate(247.5 50 50)"/>
<use href="#spike" transform="rotate(270 50 50)"/>
<use href="#spike" transform="rotate(292.5 50 50)"/> <use href="#spike" transform="rotate(292.5 50 50)"/>
<use href="#spike" transform="rotate(315 50 50)"/>
<use href="#spike" transform="rotate(337.5 50 50)"/> <use href="#spike" transform="rotate(337.5 50 50)"/>
</g> </g>
</defs> </defs>
@@ -81,10 +62,9 @@
<div class="bg-gray-200 text-gray-900 shrink-0 h-7 w-7 rounded-full flex items-center justify-center"> <div class="bg-gray-200 text-gray-900 shrink-0 h-7 w-7 rounded-full flex items-center justify-center">
<!-- Animated Sune Logo --> <!-- Animated Sune Logo -->
<svg viewBox="0 0 100 100" class="w-4 h-4 text-black s-spin"> <svg viewBox="0 0 100 100" class="w-4 h-4 text-black">
<circle cx="50" cy="50" r="14" fill="currentColor"/> <circle cx="50" cy="50" r="14" fill="currentColor"/>
<use href="#s-even" class="s-even" fill="currentColor"/> <use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
<use href="#s-odd" class="s-odd" fill="currentColor"/>
</svg> </svg>
</div> </div>
@@ -101,10 +81,9 @@
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<h2 class="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Magnified View</h2> <h2 class="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Magnified View</h2>
<div class="w-32 h-32 flex items-center justify-center bg-white rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.08)] border border-gray-100"> <div class="w-32 h-32 flex items-center justify-center bg-white rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.08)] border border-gray-100">
<svg viewBox="0 0 100 100" class="w-16 h-16 text-black s-spin"> <svg viewBox="0 0 100 100" class="w-16 h-16 text-black">
<circle cx="50" cy="50" r="14" fill="currentColor"/> <circle cx="50" cy="50" r="14" fill="currentColor"/>
<use href="#s-even" class="s-even" fill="currentColor"/> <use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
<use href="#s-odd" class="s-odd" fill="currentColor"/>
</svg> </svg>
</div> </div>
</div> </div>