valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate header logo with counter-rotating rings, static in footer

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-29 10:37:38 +02:00
parent 18e0e36f41
commit 356098496d
3 changed files with 88 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+16
View File
@@ -624,3 +624,19 @@ footer nav a.label:hover svg {
@keyframes page-in {
from { opacity: 0; transform: translateY(14px); }
}
/* ── Logo bloom animation ──────────────────────────────────── */
.logo-r1, .logo-r2, .logo-r3 {
transform-box: fill-box;
transform-origin: 50% 50%;
}
.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw 30s linear infinite; }
.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; }
.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw 12s linear infinite; }
.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; }
.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; }
.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; }
@keyframes logo-cw { to { transform: rotate(360deg); } }
@keyframes logo-ccw { to { transform: rotate(-360deg); } }
layouts/partials/footer.html
+1 -1
View File
@@ -13,7 +13,7 @@
<!-- Brand -->
<div>
<a href="/" class="logo-glitch block mb-4 hover:opacity-90 transition-opacity w-fit" aria-label="{{ .Site.Title }} Home">
{{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto") -}}
{{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto logo-static") -}}
</a>
<p class="label text-fog max-w-xs leading-loose">{{ .Site.Params.description }}</p>
</div>
layouts/partials/logo.html
+10 -1
View File
@@ -5,7 +5,9 @@
class — CSS classes on the <svg> element (default: "h-9 w-auto")
*/ -}}
{{- $class := .class | default "h-9 w-auto" -}}
<svg class="{{ $class }}" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-label="{{ site.Title }}" role="img" overflow="hidden">
<svg class="{{ $class }} logo-bloom" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-label="{{ site.Title }}" role="img" overflow="hidden">
<!-- ring 1 — 8 outer petals -->
<g class="logo-r1">
<polygon points="65.12,49.96 80.71,12.09 93.17,65.67" fill="#FF4DA0" stroke="none"/>
<polygon points="80.71,12.09 119.29,12.09 106.83,65.67 93.17,65.67" fill="#FFB3D9" stroke="none"/>
<polygon points="119.29,12.09 134.88,49.96 106.83,65.67" fill="#FF80BC" stroke="none"/>
@@ -30,6 +32,9 @@
<polygon points="39.95,89.28 24.20,51.48 70.90,80.56" fill="#FF4DA0" stroke="none"/>
<polygon points="24.20,51.48 51.48,24.20 80.56,70.90 70.90,80.56" fill="#FFB3D9" stroke="none"/>
<polygon points="51.48,24.20 89.28,39.95 80.56,70.90" fill="#FF80BC" stroke="none"/>
</g>
<!-- ring 2 — 7 mid petals -->
<g class="logo-r2">
<polygon points="90.47,62.18 111.63,43.18 104.23,81.48" fill="#CC1070" stroke="none"/>
<polygon points="111.63,43.18 137.17,55.48 111.85,85.15 104.23,81.48" fill="#FF4DA0" stroke="none"/>
<polygon points="137.17,55.48 135.51,83.87 111.85,85.15" fill="#FF1A8C" stroke="none"/>
@@ -51,6 +56,9 @@
<polygon points="64.49,83.87 62.83,55.48 88.15,85.15" fill="#CC1070" stroke="none"/>
<polygon points="62.83,55.48 88.37,43.18 95.77,81.48 88.15,85.15" fill="#FF4DA0" stroke="none"/>
<polygon points="88.37,43.18 109.53,62.18 95.77,81.48" fill="#FF1A8C" stroke="none"/>
</g>
<!-- ring 3 — 5 inner petals + core -->
<g class="logo-r3">
<polygon points="82.63,88.20 89.16,69.89 97.53,92.39" fill="#990050" stroke="none"/>
<polygon points="89.16,69.89 110.84,69.89 102.47,92.39 97.53,92.39" fill="#FF1A8C" stroke="none"/>
<polygon points="110.84,69.89 117.37,88.20 102.47,92.39" fill="#CC1070" stroke="none"/>
@@ -67,4 +75,5 @@
<polygon points="68.02,101.01 74.72,80.39 93.53,95.30 92.00,100.00" fill="#FF1A8C" stroke="none"/>
<polygon points="74.72,80.39 94.14,79.83 93.53,95.30" fill="#CC1070" stroke="none"/>
<polygon points="100.00,95.00 104.76,98.45 102.94,104.05 97.06,104.05 95.24,98.45" fill="#880044" stroke="none"/>
</g>
</svg>