fix svg animation styling

roaldchristesen · roaldchristesen · commit 93d5cfd260a0 · 2026-02-01T16:56:17.000+01:00
diff --git a/src/animation.js b/src/animation.js
@@ -9,7 +9,7 @@ function start_animation() {
   const centerX = width / 2
   const centerY = height / 2
 
-  const svg = document.getElementById('scene')
+  const svg = document.getElementById('hero-animation')
   svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
   svg.setAttribute('width', width)
   svg.setAttribute('height', height)
diff --git a/src/index.html b/src/index.html
@@ -94,7 +94,7 @@
 <body class="bg-gray-200 font-grotesk-regular">
     <div
         class="font-grotesk-bold h-screen flex items-center justify-center bg-cover bg-no-repeat bg-center bg-odd-hero relative">
-        <svg id="scene" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice"
+        <svg id="hero-animation" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice"
             class="absolute inset-0 w-full h-full z-0"></svg>
 
         <!-- Centered overlay SVG -->
diff --git a/src/main.css b/src/main.css
@@ -77,7 +77,7 @@
   list-style-type: upper-alpha;
 }
 
-svg {
+#hero-animation {
   width: 100%;
   height: 100%;
   background-color: #4ddfff;
