125 lines
6.4 KiB
HTML
125 lines
6.4 KiB
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
|
|
<defs>
|
|
<!-- Background subtle gradient: warm linen into soft stone -->
|
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#FAF6F0"/>
|
|
<stop offset="100%" stop-color="#EFE9DE"/>
|
|
</linearGradient>
|
|
|
|
<!-- Card 1 (back) -->
|
|
<linearGradient id="cardBackGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#E8E0D2"/>
|
|
<stop offset="100%" stop-color="#DDD3C3"/>
|
|
</linearGradient>
|
|
|
|
<!-- Card 2 (middle) -->
|
|
<linearGradient id="cardMidGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#F4EFE6"/>
|
|
<stop offset="100%" stop-color="#E5DDD0"/>
|
|
</linearGradient>
|
|
|
|
<!-- Card 3 (front/core anchor) -->
|
|
<linearGradient id="cardFrontGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#FFFFFF"/>
|
|
<stop offset="100%" stop-color="#FAF7F1"/>
|
|
</linearGradient>
|
|
|
|
<!-- Gold / Warm Taupe Compass Accent -->
|
|
<linearGradient id="goldAccent" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#C4975E"/>
|
|
<stop offset="50%" stop-color="#7D6B58"/>
|
|
<stop offset="100%" stop-color="#5E4E3E"/>
|
|
</linearGradient>
|
|
|
|
<!-- Drop Shadows -->
|
|
<filter id="shadowBack" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="5" stdDeviation="7" flood-color="#4A3F35" flood-opacity="0.08"/>
|
|
</filter>
|
|
<filter id="shadowMid" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#4A3F35" flood-opacity="0.09"/>
|
|
</filter>
|
|
<filter id="shadowFront" x="-25%" y="-20%" width="150%" height="150%">
|
|
<feDropShadow dx="0" dy="12" stdDeviation="14" flood-color="#4A3F35" flood-opacity="0.12"/>
|
|
</filter>
|
|
<filter id="glowCenter" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#C4975E" flood-opacity="0.25"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Squircle Base Container for App Icon -->
|
|
<rect width="512" height="512" rx="116" fill="url(#bgGrad)"/>
|
|
|
|
<!-- Subtle tactile border -->
|
|
<rect width="508" height="508" x="2" y="2" rx="114" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.7"/>
|
|
<rect width="510" height="510" x="1" y="1" rx="115" fill="none" stroke="#D8CEBF" stroke-width="1" stroke-opacity="0.35"/>
|
|
|
|
<!-- TOP TEXT: "Values" in even bigger font -->
|
|
<text x="256" y="96" font-family="'Newsreader', 'Georgia', serif" font-size="46" font-weight="700" fill="#2E241C" text-anchor="middle" letter-spacing="1.2">Values</text>
|
|
|
|
<!-- CENTER DECK: Layered Cards (Vertically centered between y=120 and y=390, centered at y=255) -->
|
|
<!-- BACK CARD -->
|
|
<g transform="translate(256, 255) rotate(-9) translate(-256, -255)" filter="url(#shadowBack)">
|
|
<rect x="168" y="148" width="176" height="214" rx="24" fill="url(#cardBackGrad)" stroke="#D0C5B4" stroke-width="1.5"/>
|
|
<line x1="198" y1="180" x2="252" y2="180" stroke="#B8AC9B" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
|
|
</g>
|
|
|
|
<!-- MIDDLE CARD -->
|
|
<g transform="translate(256, 255) rotate(7) translate(-256, -255)" filter="url(#shadowMid)">
|
|
<rect x="168" y="148" width="176" height="214" rx="24" fill="url(#cardMidGrad)" stroke="#E0D7C9" stroke-width="1.5"/>
|
|
<line x1="198" y1="180" x2="270" y2="180" stroke="#A89B8A" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
|
|
</g>
|
|
|
|
<!-- FRONT CARD -->
|
|
<g filter="url(#shadowFront)">
|
|
<!-- Primary Card Body -->
|
|
<rect x="168" y="142" width="176" height="226" rx="24" fill="url(#cardFrontGrad)" stroke="#ECE4D8" stroke-width="1.5"/>
|
|
<!-- Inset border line for tactile editorial paper texture -->
|
|
<rect x="178" y="152" width="156" height="206" rx="18" fill="none" stroke="#7D6B58" stroke-width="1" stroke-opacity="0.12" stroke-dasharray="3 3"/>
|
|
|
|
<!-- Pill indicator -->
|
|
<rect x="238" y="163" width="36" height="3" rx="1.5" fill="#7D6B58" fill-opacity="0.25"/>
|
|
|
|
<!-- CENTER EMBLEM: Compass / North Star Icon -->
|
|
<g transform="translate(256, 252)">
|
|
<!-- Outer delicate concentric aura circles -->
|
|
<circle cx="0" cy="0" r="48" fill="none" stroke="#7D6B58" stroke-opacity="0.1" stroke-width="1"/>
|
|
<circle cx="0" cy="0" r="37" fill="#FAF6F0" stroke="#7D6B58" stroke-opacity="0.18" stroke-width="1.2"/>
|
|
|
|
<!-- 4 cardinal tick marks -->
|
|
<line x1="0" y1="-43" x2="0" y2="-39" stroke="#7D6B58" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
|
<line x1="0" y1="39" x2="0" y2="43" stroke="#7D6B58" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
|
<line x1="-43" y1="0" x2="-39" y2="0" stroke="#7D6B58" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
|
<line x1="39" y1="0" x2="43" y2="0" stroke="#7D6B58" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
|
|
|
<!-- 8-Pointed Mindfulness Star / Compass Star of Core Values -->
|
|
<!-- North Point -->
|
|
<path d="M 0,0 L -6,-11 L 0,-33 L 6,-11 Z" fill="url(#goldAccent)" filter="url(#glowCenter)"/>
|
|
<!-- South Point -->
|
|
<path d="M 0,0 L -6,11 L 0,33 L 6,11 Z" fill="#7D6B58"/>
|
|
<!-- East Point -->
|
|
<path d="M 0,0 L 11,-6 L 33,0 L 11,6 Z" fill="#8C7965"/>
|
|
<!-- West Point -->
|
|
<path d="M 0,0 L -11,-6 L -33,0 L -11,6 Z" fill="#6F5E4E"/>
|
|
|
|
<!-- Diagonal Secondary Petals -->
|
|
<path d="M 0,0 L 4,-8 L 16,-16 L 8,-4 Z" fill="#A48C74" opacity="0.85"/>
|
|
<path d="M 0,0 L -4,-8 L -16,-16 L -8,-4 Z" fill="#917A63" opacity="0.85"/>
|
|
<path d="M 0,0 L 4,8 L 16,16 L 8,4 Z" fill="#786552" opacity="0.85"/>
|
|
<path d="M 0,0 L -4,8 L -16,16 L -8,4 Z" fill="#6A5846" opacity="0.85"/>
|
|
|
|
<!-- Center Stillness Core -->
|
|
<circle cx="0" cy="0" r="6" fill="#FAF6F0" stroke="#7D6B58" stroke-width="1.8"/>
|
|
<circle cx="0" cy="0" r="2.8" fill="#C4975E"/>
|
|
</g>
|
|
|
|
<!-- Three grounded dots at bottom of card -->
|
|
<g transform="translate(256, 332)">
|
|
<circle cx="-13" cy="0" r="2.4" fill="#7D6B58" opacity="0.25"/>
|
|
<circle cx="0" cy="0" r="2.8" fill="#C4975E" opacity="0.8"/>
|
|
<circle cx="13" cy="0" r="2.4" fill="#7D6B58" opacity="0.25"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- BOTTOM TEXT: "Compass" in even bigger font -->
|
|
<text x="256" y="445" font-family="'Newsreader', 'Georgia', serif" font-size="46" font-weight="700" fill="#2E241C" text-anchor="middle" letter-spacing="1.2">Compass</text>
|
|
</svg> |