- Adjust dimple size and spacing for balanced appearance - Enlarge card suit symbols (font-size 32) in single row - Fine-tune symbol positioning and spacing - Increase margin between logo and golfer emoji - Add /golfball-logo.svg static file route Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
68 lines
2.8 KiB
XML
68 lines
2.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 100 104" width="100" height="100">
|
|
<defs>
|
|
<!-- Gradient for 3D ball effect - transparent base -->
|
|
<radialGradient id="ballGradient" cx="30%" cy="25%" r="65%" fx="25%" fy="20%">
|
|
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
|
|
<stop offset="50%" stop-color="#f5f5f5" stop-opacity="0.9"/>
|
|
<stop offset="80%" stop-color="#e0e0e0" stop-opacity="0.85"/>
|
|
<stop offset="100%" stop-color="#c8c8c8" stop-opacity="0.8"/>
|
|
</radialGradient>
|
|
|
|
<!-- Dimple shading gradient -->
|
|
<radialGradient id="dimpleGrad" cx="40%" cy="35%" r="60%">
|
|
<stop offset="0%" stop-color="#d0d0d0"/>
|
|
<stop offset="100%" stop-color="#b8b8b8"/>
|
|
</radialGradient>
|
|
|
|
<!-- Clip for dimples to stay within ball -->
|
|
<clipPath id="ballClip">
|
|
<circle cx="50" cy="44" r="45"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<!-- Main ball base -->
|
|
<circle cx="50" cy="44" r="46" fill="url(#ballGradient)"/>
|
|
|
|
<!-- Dimples - balanced pattern with more spacing -->
|
|
<g clip-path="url(#ballClip)" fill="url(#dimpleGrad)" opacity="0.5">
|
|
<!-- Outer ring -->
|
|
<circle cx="50" cy="2" r="3.5"/>
|
|
<circle cx="74" cy="12" r="3.5"/>
|
|
<circle cx="88" cy="38" r="3.5"/>
|
|
<circle cx="85" cy="64" r="3.5"/>
|
|
<circle cx="62" cy="84" r="3.5"/>
|
|
<circle cx="38" cy="84" r="3.5"/>
|
|
<circle cx="15" cy="64" r="3.5"/>
|
|
<circle cx="12" cy="38" r="3.5"/>
|
|
<circle cx="26" cy="12" r="3.5"/>
|
|
|
|
<!-- Middle ring - slightly offset -->
|
|
<circle cx="62" cy="16" r="3.2"/>
|
|
<circle cx="79" cy="50" r="3.2"/>
|
|
<circle cx="68" cy="72" r="3.2"/>
|
|
<circle cx="50" cy="80" r="3.2"/>
|
|
<circle cx="32" cy="72" r="3.2"/>
|
|
<circle cx="21" cy="50" r="3.2"/>
|
|
<circle cx="38" cy="16" r="3.2"/>
|
|
|
|
<!-- Inner - avoiding center -->
|
|
<circle cx="50" cy="10" r="2.8"/>
|
|
<circle cx="70" cy="32" r="2.8"/>
|
|
<circle cx="30" cy="32" r="2.8"/>
|
|
<circle cx="72" cy="58" r="2.8"/>
|
|
<circle cx="28" cy="58" r="2.8"/>
|
|
</g>
|
|
|
|
<!-- Subtle inner shadow for depth -->
|
|
<circle cx="50" cy="44" r="45" fill="none" stroke="#a0a0a0" stroke-width="1" opacity="0.3"/>
|
|
|
|
<!-- Outer edge highlight -->
|
|
<circle cx="50" cy="44" r="46" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5"/>
|
|
|
|
<!-- Card suits - single row, larger -->
|
|
<text x="22" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#1a1a1a" text-anchor="middle">♣</text>
|
|
<text x="41" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#cc0000" text-anchor="middle">♦</text>
|
|
<text x="59" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#1a1a1a" text-anchor="middle">♠</text>
|
|
<text x="77" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#cc0000" text-anchor="middle">♥</text>
|
|
</svg>
|