Florian Wilde
488b99f7a1
Logo als SVG in drei Varianten (Icon, Icon+Wortmarke horizontal, monochrom); die Wortmarke ist als Pfad konstruiert und braucht daher keine installierte Schrift. Daraus generiert scripts/generate-icons.ts Favicon (SVG + ICO), PWA-Icons, Maskable-Icons, Apple-Touch-Icon und OG-Bild. Die Farbwelt liegt als CSS-Variablen in globals.css und wird ueber @theme inline an Tailwind durchgereicht — Dark/Light und spaetere Themes bauen darauf auf. Alle Kombinationen erfuellen WCAG AA.
52 lines
2.5 KiB
XML
52 lines
2.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" role="img" aria-labelledby="flimmer-icon-title">
|
|
<title id="flimmer-icon-title">Flimmer</title>
|
|
<defs>
|
|
<linearGradient id="flGlow" x1="20" y1="24" x2="108" y2="100" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#ffc46b"/>
|
|
<stop offset="0.38" stop-color="#ffb454"/>
|
|
<stop offset="1" stop-color="#ff4d9d"/>
|
|
</linearGradient>
|
|
<radialGradient id="flHalo" cx="64" cy="58" r="52" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#ffc46b" stop-opacity="0.85"/>
|
|
<stop offset="0.42" stop-color="#ff8a70" stop-opacity="0.4"/>
|
|
<stop offset="0.75" stop-color="#ff4d9d" stop-opacity="0.16"/>
|
|
<stop offset="1" stop-color="#ff4d9d" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<linearGradient id="flPlate" x1="0" y1="0" x2="128" y2="128" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#191330"/>
|
|
<stop offset="1" stop-color="#0a0810"/>
|
|
</linearGradient>
|
|
<filter id="flBloom" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="7"/>
|
|
</filter>
|
|
<filter id="flBloomTight" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3.2"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Grundplatte: sehr dunkles Blauviolett -->
|
|
<rect width="128" height="128" rx="30" fill="url(#flPlate)"/>
|
|
|
|
<!-- Warmes Flimmern, das aus dem Bildschirm heraus strahlt -->
|
|
<ellipse cx="64" cy="58" rx="52" ry="42" fill="url(#flHalo)" filter="url(#flBloom)" opacity="0.75"/>
|
|
|
|
<!-- Bloom des Bildschirmrahmens -->
|
|
<rect x="22" y="26" width="84" height="64" rx="18" fill="none"
|
|
stroke="url(#flGlow)" stroke-width="8" filter="url(#flBloom)" opacity="0.85"/>
|
|
|
|
<!-- Bildschirm -->
|
|
<rect x="22" y="26" width="84" height="64" rx="18" fill="#0b0912" fill-opacity="0.72"
|
|
stroke="url(#flGlow)" stroke-width="7"/>
|
|
|
|
<!-- Play-Dreieck, leicht nach rechts versetzt (optische Mitte) -->
|
|
<path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flGlow)" stroke="url(#flGlow)"
|
|
stroke-width="7" stroke-linejoin="round" stroke-linecap="round"
|
|
filter="url(#flBloomTight)" opacity="0.7"/>
|
|
<path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flGlow)" stroke="url(#flGlow)"
|
|
stroke-width="6.5" stroke-linejoin="round" stroke-linecap="round"/>
|
|
|
|
<!-- Standfuß — die Flimmerkiste steht -->
|
|
<path d="M64 90 V101 M49 105.5 H79" stroke="url(#flGlow)" stroke-width="6.5"
|
|
stroke-linecap="round" stroke-opacity="0.62"/>
|
|
</svg>
|