dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: use generated splatter image instead of hand-coded SVG

Browse Source
This commit is contained in:
dangrubbb
2026-05-30 14:24:48 -04:00
parent 8f5b831cc2
commit 498dc4f7a3
2 changed files with 6 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/src/img/crush-splatter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

51
src/pages/index.astro
View File

@ -13,46 +13,7 @@ import CrushBase from '../layouts/CrushBase.astro';
<main class="logo-section"> <main class="logo-section">
<div class="logo-wrapper"> <div class="logo-wrapper">
<svg class="splatter-layer" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"> <img src="/src/img/crush-splatter.png" alt="" class="splatter-img">
<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>
<div class="circle-frame"> <div class="circle-frame">
<div class="circle-inner"> <div class="circle-inner">
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img"> <img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
@ -127,12 +88,12 @@ import CrushBase from '../layouts/CrushBase.astro';
height: 380px; height: 380px;
} }
.splatter-layer { .splatter-img {
position: absolute; position: absolute;
inset: -80px; inset: -100px;
width: calc(100% + 160px); width: calc(100% + 200px);
height: calc(100% + 160px); height: calc(100% + 200px);
filter: drop-shadow(0 2px 8px rgba(0, 139, 139, 0.3)); object-fit: contain;
} }
.circle-frame { .circle-frame {