Files
flimmer/public/brand/flimmer-icon-maskable.svg
Florian Wilde 488b99f7a1 feat: Flimmer-Branding mit Logo, Icons und Design-Tokens
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.
2026-09-01 18:26:21 +02:00

39 lines
2.1 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" role="img" aria-labelledby="flimmer-maskable-title">
<title id="flimmer-maskable-title">Flimmer</title>
<!-- Maskable Icon: die Bildmarke sitzt vollständig in der inneren
Sicherheitszone (80 %), die Grundplatte läuft randlos durch. -->
<defs>
<linearGradient id="flMskGlow" x1="32" y1="34" x2="96" y2="94" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffc46b"/>
<stop offset="0.38" stop-color="#ffb454"/>
<stop offset="1" stop-color="#ff4d9d"/>
</linearGradient>
<radialGradient id="flMskHalo" cx="64" cy="60" r="40" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffc46b" stop-opacity="0.8"/>
<stop offset="0.45" stop-color="#ff8a70" stop-opacity="0.36"/>
<stop offset="1" stop-color="#ff4d9d" stop-opacity="0"/>
</radialGradient>
<linearGradient id="flMskPlate" 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="flMskBloom" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<rect width="128" height="128" fill="url(#flMskPlate)"/>
<ellipse cx="64" cy="60" rx="40" ry="32" fill="url(#flMskHalo)" filter="url(#flMskBloom)" opacity="0.8"/>
<g transform="translate(64 64) scale(0.74) translate(-64 -62)">
<rect x="22" y="26" width="84" height="64" rx="18" fill="none"
stroke="url(#flMskGlow)" stroke-width="8.5" filter="url(#flMskBloom)" opacity="0.8"/>
<rect x="22" y="26" width="84" height="64" rx="18" fill="#0b0912" fill-opacity="0.6"
stroke="url(#flMskGlow)" stroke-width="7.5"/>
<path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flMskGlow)" stroke="url(#flMskGlow)"
stroke-width="7" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M64 90 V101 M49 105.5 H79" stroke="url(#flMskGlow)" stroke-width="7"
stroke-linecap="round" stroke-opacity="0.62"/>
</g>
</svg>