feat: grungy splatter ring (SVG-based irregular spray marks)
This commit is contained in:
dangrubbb
@ -15,19 +15,39 @@ import CrushBase from '../layouts/CrushBase.astro';
|
||||
<!-- Center logo circle -->
|
||||
<main class="logo-section">
|
||||
<div class="logo-wrapper">
|
||||
<!-- Splatter marks around the circle (like the camel box) -->
|
||||
<!-- Grungy splatter ring (SVG for irregular texture) -->
|
||||
<div class="splatter-ring">
|
||||
<span class="splat s1"></span>
|
||||
<span class="splat s2"></span>
|
||||
<span class="splat s3"></span>
|
||||
<span class="splat s4"></span>
|
||||
<span class="splat s5"></span>
|
||||
<span class="splat s6"></span>
|
||||
<span class="splat s7"></span>
|
||||
<span class="splat s8"></span>
|
||||
<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>
|
||||
|
||||
<!-- The circle -->
|
||||
<!-- The circle frame -->
|
||||
<div class="circle-frame">
|
||||
<div class="circle-inner">
|
||||
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
|
||||
@ -96,57 +116,47 @@ import CrushBase from '../layouts/CrushBase.astro';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
/* Splatter ring — irregular teal marks around circle (like the box) */
|
||||
/* Grungy splatter ring */
|
||||
.splatter-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: -40px;
|
||||
animation: splatterFloat 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.splat {
|
||||
position: absolute;
|
||||
border-radius: 50% 40% 60% 45%;
|
||||
background: var(--crush-teal);
|
||||
opacity: 0.55;
|
||||
animation: splatterPulse 5s ease-in-out infinite;
|
||||
.splatter-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splat.s1 { width: 60px; height: 80px; top: -10px; left: 20%; transform: rotate(15deg); }
|
||||
.splat.s2 { width: 70px; height: 50px; top: 5%; right: -5px; transform: rotate(-20deg); }
|
||||
.splat.s3 { width: 45px; height: 65px; bottom: 10px; right: 5%; transform: rotate(45deg); }
|
||||
.splat.s4 { width: 55px; height: 40px; bottom: -8px; left: 30%; transform: rotate(-10deg); }
|
||||
.splat.s5 { width: 50px; height: 70px; top: 15%; left: -10px; transform: rotate(30deg); }
|
||||
.splat.s6 { width: 40px; height: 55px; top: 50%; right: -12px; transform: rotate(-35deg); }
|
||||
.splat.s7 { width: 65px; height: 45px; bottom: 15%; left: -8px; transform: rotate(20deg); }
|
||||
.splat.s8 { width: 35px; height: 60px; top: -5px; right: 25%; transform: rotate(-25deg); }
|
||||
|
||||
@keyframes splatterPulse {
|
||||
0%, 100% { opacity: 0.55; }
|
||||
50% { opacity: 0.35; }
|
||||
@keyframes splatterFloat {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
50% { transform: rotate(2deg); }
|
||||
}
|
||||
|
||||
/* The circle frame — teal border, white interior (like Joe Camel logo) */
|
||||
/* The circle frame */
|
||||
.circle-frame {
|
||||
position: absolute;
|
||||
inset: 20px;
|
||||
inset: 40px;
|
||||
border-radius: 50%;
|
||||
border: 6px solid var(--crush-teal);
|
||||
border: 8px solid var(--crush-teal);
|
||||
background: white;
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(0, 139, 139, 0.1),
|
||||
0 12px 40px rgba(0, 139, 139, 0.25);
|
||||
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);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circle-inner {
|
||||
@ -155,14 +165,14 @@ import CrushBase from '../layouts/CrushBase.astro';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
/* The logo img — white PNG colorized to teal using hue-rotate + invert */
|
||||
.logo-img {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 102, 102, 0.3));
|
||||
}
|
||||
|
||||
/* === BOTTOM NAVIGATION === */
|
||||
@ -204,15 +214,15 @@ import CrushBase from '../layouts/CrushBase.astro';
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
.top-banner { padding: 30px 15px 15px; }
|
||||
.logo-section { padding: 40px 15px; }
|
||||
.logo-wrapper { width: 260px; height: 260px; }
|
||||
.circle-frame { inset: 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; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.brand { font-size: 2.5rem; }
|
||||
.logo-wrapper { width: 220px; height: 220px; }
|
||||
.logo-wrapper { width: 240px; height: 240px; }
|
||||
.bottom-nav { flex-direction: column; gap: 4px; }
|
||||
.nav-dot { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user