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

Fix: Soften pulse timing & bump core radius slightly

Browse Source 
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
multipleof4
2026-03-09 18:13:18 -07:00
parent 8c8ccbe929
commit 5b7d4dc176
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -12,12 +12,12 @@
*/
.s-spikes-pulse {
transform-origin: 50px 50px;
animation: s-rapid 0.32s infinite;
animation: s-rapid 0.4s infinite;
}
@keyframes s-rapid {
0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
50% { transform: scale(0.55); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
50% { transform: scale(0.55); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
}
</style>
</head>
@@ -26,8 +26,8 @@
<!-- Reusable SVG Definition for the 16-point Star -->
<svg style="display:none">
<defs>
<!-- Slightly thinner spike for a sharper look -->
<polygon id="spike" points="47.5,50 50,2 52.5,50"/>
<!-- Master spike perfectly tuned to match the logo proportions -->
<polygon id="spike" points="47,50 50,2 53,50"/>
<!-- All 16 spikes combined into a single group -->
<g id="s-spikes">
@@ -63,7 +63,7 @@
<!-- Animated Sune Logo -->
<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="15" fill="currentColor"/>
<use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
</svg>
@@ -82,7 +82,7 @@
<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">
<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="15" fill="currentColor"/>
<use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
</svg>
</div>