From 8f5b831cc25efb8345282f7171025eee88820558 Mon Sep 17 00:00:00 2001
From: dangrubbb <dangrubb@firemail.cc>
Date: Sat, 30 May 2026 14:14:15 -0400
Subject: [PATCH] feat: bigger dramatic splatters with SVG turbulence filter

---
 src/pages/index.astro | 132 +++++++++++++++++++-----------------------
 1 file changed, 61 insertions(+), 71 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4ef074e..fadc9a9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,6 @@ import CrushBase from '../layouts/CrushBase.astro';
 
 <CrushBase title="dangrubb.net">
   <div class="crush-page">
-    <!-- Top branding -->
     <header class="top-banner">
       <div class="brand">
         <span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span>
@@ -12,42 +11,48 @@ import CrushBase from '../layouts/CrushBase.astro';
       <p class="tagline">OFFICIAL SITE</p>
     </header>
 
-    <!-- Center logo circle -->
     <main class="logo-section">
       <div class="logo-wrapper">
-        <!-- Grungy splatter ring (SVG for irregular texture) -->
-        <div class="splatter-ring">
-          <svg viewBox="0 0 400 400" class="splatter-svg">
-            <!-- Large irregular splats -->
-            <path d="M80,120 Q60,80 90,50 Q120,30 150,60 Q170,40 160,80 Q180,90 150,120 Q130,140 80,120" fill="#008b8b" opacity="0.7"/>
-            <path d="M250,60 Q280,30 320,50 Q350,70 330,110 Q360,130 330,140 Q300,160 270,130 Q240,100 250,60" fill="#006666" opacity="0.6"/>
-            <path d="M60,220 Q30,190 50,160 Q70,140 100,160 Q120,140 130,170 Q140,200 110,220 Q80,240 60,220" fill="#20b2aa" opacity="0.65"/>
-            <path d="M280,200 Q310,170 340,190 Q370,220 350,260 Q360,290 330,280 Q300,300 280,270 Q260,240 280,200" fill="#008b8b" opacity="0.7"/>
-            <path d="M160,320 Q130,290 150,260 Q170,240 200,260 Q230,240 240,270 Q250,300 220,320 Q190,340 160,320" fill="#006666" opacity="0.6"/>
-            <!-- Medium spray dots -->
-            <circle cx="120" cy="80" r="15" fill="#008b8b" opacity="0.5"/>
-            <circle cx="290" cy="90" r="12" fill="#20b2aa" opacity="0.55"/>
-            <circle cx="70" cy="280" r="18" fill="#006666" opacity="0.5"/>
-            <circle cx="320" cy="240" r="14" fill="#008b8b" opacity="0.5"/>
-            <circle cx="200" cy="340" r="10" fill="#20b2aa" opacity="0.45"/>
-            <!-- Small spray speckles -->
-            <ellipse cx="180" cy="70" rx="8" ry="5" fill="#008b8b" opacity="0.4"/>
-            <ellipse cx="330" cy="150" rx="6" ry="9" fill="#20b2aa" opacity="0.4"/>
-            <ellipse cx="100" cy="310" rx="7" ry="4" fill="#006666" opacity="0.45"/>
-            <ellipse cx="260" cy="310" rx="5" ry="8" fill="#008b8b" opacity="0.4"/>
-            <circle cx="150" cy="100" r="6" fill="#20b2aa" opacity="0.35"/>
-            <circle cx="310" cy="180" r="7" fill="#006666" opacity="0.4"/>
-            <circle cx="90" cy="240" r="5" fill="#008b8b" opacity="0.35"/>
-            <circle cx="280" cy="320" r="6" fill="#20b2aa" opacity="0.35"/>
-            <!-- Rough edge marks -->
-            <path d="M40,150 Q35,140 45,135 Q55,130 50,145 Q45,155 40,150" fill="#008b8b" opacity="0.5"/>
-            <path d="M350,100 Q360,95 365,105 Q370,115 360,110 Q350,105 350,100" fill="#20b2aa" opacity="0.45"/>
-            <path d="M240,350 Q235,345 245,340 Q255,335 250,345 Q245,355 240,350" fill="#006666" opacity="0.4"/>
-            <path d="M360,280 Q365,275 370,280 Q375,285 365,285 Q360,285 360,280" fill="#008b8b" opacity="0.45"/>
-          </svg>
-        </div>
+        <svg class="splatter-layer" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <filter id="rough" x="-10%" y="-10%" width="120%" height="120%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="5" result="noise"/>
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale="12"/>
+            </filter>
+          </defs>
+
+          <!-- MASSIVE paint splashes -->
+          <path d="M60,420 Q20,380 40,320 Q10,280 70,260 Q50,220 100,230 Q90,190 140,210 Q130,170 180,200 Q170,170 210,190 Q200,160 230,180 Q240,160 260,200 Q280,170 280,220 Q310,200 300,250 Q330,230 320,280 Q350,270 340,320 Q360,310 380,360 Q400,350 400,400 Q400,450 370,460 Q380,500 340,490 Q350,520 310,500 Q320,540 270,510 Q280,540 230,500 Q240,530 190,490 Q200,520 160,480 Q170,500 130,460 Q140,470 90,440Z" fill="#006e6e" filter="url(#rough)"/>
+          <path d="M380,180 Q420,140 450,180 Q490,150 500,200 Q520,220 490,250 Q510,290 460,280 Q480,320 430,300 Q440,330 390,300 Q380,320 350,280 Q330,310 320,270 Q300,290 300,240 Q280,250 300,210 Q290,180 320,190Z" fill="#007f7f" filter="url(#rough)"/>
+          <path d="M140,180 Q90,160 110,120 Q70,100 120,80 Q100,50 150,60 Q160,30 190,60 Q220,40 210,80 Q240,100 200,120 Q220,140 180,160Z" fill="#008b8b" filter="url(#rough)"/>
+          <path d="M270,120 Q300,80 340,120 Q370,90 380,130 Q400,150 370,170 Q380,200 340,190 Q350,220 310,200 Q290,210 290,180 Q260,180 270,150Z" fill="#006e6e" filter="url(#rough)"/>
+          <path d="M420,420 Q460,400 470,440 Q500,420 500,460 Q520,490 490,500 Q500,520 470,510 Q460,530 430,500 Q410,510 410,470 Q390,480 400,440Z" fill="#20b2aa" filter="url(#rough)"/>
+          <path d="M220,500 Q190,480 200,460 Q170,450 190,430 Q170,400 210,420 Q220,400 240,430 Q260,420 250,460Z" fill="#005f5f" filter="url(#rough)"/>
+
+          <!-- Big speckles -->
+          <circle cx="80" cy="180" r="8" fill="#008b8b" filter="url(#rough)"/>
+          <circle cx="50" cy="230" r="10" fill="#006e6e" filter="url(#rough)"/>
+          <circle cx="150" cy="120" r="6" fill="#20b2aa" filter="url(#rough)"/>
+          <circle cx="450" cy="340" r="9" fill="#005f5f" filter="url(#rough)"/>
+          <circle cx="480" cy="380" r="7" fill="#20b2aa" filter="url(#rough)"/>
+          <circle cx="520" cy="270" r="6" fill="#008b8b" filter="url(#rough)"/>
+          <circle cx="100" cy="520" r="12" fill="#007f7f" filter="url(#rough)"/>
+          <circle cx="160" cy="560" r="8" fill="#20b2aa" filter="url(#rough)"/>
+          <circle cx="360" cy="520" r="10" fill="#006e6e" filter="url(#rough)"/>
+          <circle cx="460" cy="560" r="9" fill="#008b8b" filter="url(#rough)"/>
+          <circle cx="50" cy="480" r="14" fill="#006e6e" filter="url(#rough)"/>
+          <circle cx="530" cy="140" r="10" fill="#005f5f" filter="url(#rough)"/>
+          <circle cx="560" cy="200" r="7" fill="#008b8b" filter="url(#rough)"/>
+          <circle cx="90" cy="80" r="5" fill="#20b2aa" filter="url(#rough)"/>
+          <circle cx="530" cy="480" r="8" fill="#007f7f" filter="url(#rough)"/>
+
+          <!-- Drip streaks -->
+          <line x1="80" y1="420" x2="75" y2="520" stroke="#006e6e" stroke-width="3" filter="url(#rough)" opacity="0.6"/>
+          <line x1="450" y1="300" x2="470" y2="380" stroke="#008b8b" stroke-width="2.5" filter="url(#rough)" opacity="0.5"/>
+          <line x1="200" y1="500" x2="195" y2="580" stroke="#007f7f" stroke-width="2" filter="url(#rough)" opacity="0.5"/>
+          <line x1="380" y1="490" x2="390" y2="560" stroke="#005f5f" stroke-width="3" filter="url(#rough)" opacity="0.5"/>
+        </svg>
 
-        <!-- The circle frame -->
         <div class="circle-frame">
           <div class="circle-inner">
             <img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
@@ -56,7 +61,6 @@ import CrushBase from '../layouts/CrushBase.astro';
       </div>
     </main>
 
-    <!-- Bottom navigation -->
     <footer class="bottom-nav">
       <a href="https://ai.dangrubb.net" class="nav-item">AI</a>
       <span class="nav-dot">•</span>
@@ -81,7 +85,6 @@ import CrushBase from '../layouts/CrushBase.astro';
     background: var(--crush-white);
   }
 
-  /* === TOP BANNER === */
   .top-banner {
     text-align: center;
     padding: 40px 20px 20px;
@@ -110,7 +113,6 @@ import CrushBase from '../layouts/CrushBase.astro';
     opacity: 0.8;
   }
 
-  /* === LOGO SECTION === */
   .logo-section {
     flex: 1;
     display: flex;
@@ -121,42 +123,32 @@ import CrushBase from '../layouts/CrushBase.astro';
 
   .logo-wrapper {
     position: relative;
-    width: 400px;
-    height: 400px;
+    width: 380px;
+    height: 380px;
   }
 
-  /* Grungy splatter ring */
-  .splatter-ring {
+  .splatter-layer {
     position: absolute;
-    inset: -40px;
-    animation: splatterFloat 8s ease-in-out infinite;
+    inset: -80px;
+    width: calc(100% + 160px);
+    height: calc(100% + 160px);
+    filter: drop-shadow(0 2px 8px rgba(0, 139, 139, 0.3));
   }
 
-  .splatter-svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  @keyframes splatterFloat {
-    0%, 100% { transform: rotate(0deg); }
-    50% { transform: rotate(2deg); }
-  }
-
-  /* The circle frame */
   .circle-frame {
     position: absolute;
-    inset: 40px;
+    inset: 30px;
     border-radius: 50%;
-    border: 8px solid var(--crush-teal);
-    background: white;
+    border: 7px solid var(--crush-teal);
+    background: radial-gradient(circle, white 60%, #e8f5f5 100%);
     box-shadow:
-      0 0 0 3px rgba(0, 102, 102, 0.15),
-      0 15px 50px rgba(0, 139, 139, 0.35),
-      inset 0 5px 25px rgba(0, 139, 139, 0.08),
-      inset 0 -5px 25px rgba(0, 102, 102, 0.05);
+      0 0 0 3px rgba(0, 139, 139, 0.15),
+      0 12px 40px rgba(0, 139, 139, 0.3),
+      inset 0 4px 20px rgba(0, 139, 139, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 2;
   }
 
   .circle-inner {
@@ -165,17 +157,16 @@ import CrushBase from '../layouts/CrushBase.astro';
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 60px;
+    padding: 50px;
   }
 
   .logo-img {
-    width: 70%;
-    height: 70%;
+    width: 65%;
+    height: 65%;
     object-fit: contain;
-    filter: drop-shadow(0 4px 12px rgba(0, 102, 102, 0.3));
+    filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
   }
 
-  /* === BOTTOM NAVIGATION === */
   .bottom-nav {
     display: flex;
     align-items: center;
@@ -211,18 +202,17 @@ import CrushBase from '../layouts/CrushBase.astro';
     opacity: 0.5;
   }
 
-  /* === RESPONSIVE === */
   @media (max-width: 768px) {
     .top-banner { padding: 30px 15px 15px; }
     .logo-section { padding: 50px 15px; }
-    .logo-wrapper { width: 300px; height: 300px; }
-    .circle-frame { inset: 30px; }
-    .nav-item { font-size: 15px; padding: 6px 12px; letter-spacing: 1px; }
+    .logo-wrapper { width: 280px; height: 280px; }
+    .circle-frame { inset: 20px; }
+    .nav-item { font-size: 15px; padding: 6px 12px; }
   }
 
   @media (max-width: 480px) {
     .brand { font-size: 2.5rem; }
-    .logo-wrapper { width: 240px; height: 240px; }
+    .logo-wrapper { width: 220px; height: 220px; }
     .bottom-nav { flex-direction: column; gap: 4px; }
     .nav-dot { display: none; }
   }