7c58543ec8
Reduce golfer-container margin from 10px to 4px in landscape (2-row) mode while keeping 10px on mobile. Swap bottom suits to checkerboard pattern: club/diamond on top, heart/spade on bottom. Co-Authored-By: Claude Opus 4.6 <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 - 2x2 grid -->
|
|
<text x="36" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#1a1a1a" text-anchor="middle">♣</text>
|
|
<text x="64" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#cc0000" text-anchor="middle">♦</text>
|
|
<text x="36" y="64" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#cc0000" text-anchor="middle">♥</text>
|
|
<text x="64" y="64" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#1a1a1a" text-anchor="middle">♠</text>
|
|
</svg>
|