Cobalto
HTML + CSSLiquid Glass
Fensterrose aus Buntglas
Eine Fensterrose aus Bleiglas: Die Sonne folgt dem Cursor, und das gewählte Blatt wirft seine Farbe auf den Steinboden.
Einstellungen
16px
1x
Code
<div class="uvq11-rose" style="--sel:var(--c1)"><i class="bm" aria-hidden="true"></i><svg class="rw" viewBox="-50 -50 100 100"><defs><filter id="uvq11-rose-f" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency=".16" numOctaves="2" seed="4" result="n"/><feColorMatrix in="n" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -.9 .72" result="w"/><feComposite in="w" in2="SourceGraphic" operator="in" result="m"/><feBlend in="m" in2="SourceGraphic" mode="screen"/></filter><radialGradient id="uvq11-rose-s"><stop offset="0" stop-color="#fffbe8"/><stop offset=".4" stop-color="#fff3c4" stop-opacity=".7"/><stop offset="1" stop-color="#fff3c4" stop-opacity="0"/></radialGradient></defs><circle r="48" fill="#141826"/><circle class="sun" cx="0" cy="-28" r="30" fill="url(#uvq11-rose-s)"/><g id="uvq11-rose-g" filter="url(#uvq11-rose-f)"><circle cx="16.5" cy="-28.6" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="33.0" cy="0.0" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="16.5" cy="28.6" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="-16.5" cy="28.6" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="-33.0" cy="0.0" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="-16.5" cy="-28.6" r="5" fill="#e9b949" fill-opacity=".8"/><g role="radiogroup" aria-label="Farbe des Bleiglasfensters"><path class="pt" role="radio" tabindex="0" aria-checked="true" aria-label="Kobalt" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(0)" style="fill:var(--c1)"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Rubin" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(60)" style="fill:var(--c2)"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Bernstein" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(120)" style="fill:#f59e0b"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Smaragd" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(180)" style="fill:#059669"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Amethyst" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(240)" style="fill:#7c3aed"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Türkis" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(300)" style="fill:#06b6d4"/></g><circle r="8.5" fill="#e9b949"/></g><g class="ld"><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(0)"/><path d="M0 -12V-44" transform="rotate(0)"/><circle cx="16.5" cy="-28.6" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(60)"/><path d="M0 -12V-44" transform="rotate(60)"/><circle cx="33.0" cy="0.0" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(120)"/><path d="M0 -12V-44" transform="rotate(120)"/><circle cx="16.5" cy="28.6" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(180)"/><path d="M0 -12V-44" transform="rotate(180)"/><circle cx="-16.5" cy="28.6" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(240)"/><path d="M0 -12V-44" transform="rotate(240)"/><circle cx="-33.0" cy="0.0" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(300)"/><path d="M0 -12V-44" transform="rotate(300)"/><circle cx="-16.5" cy="-28.6" r="5"/><circle r="8.5"/><circle r="47.5" stroke-width="3"/></g></svg><div class="fl" aria-hidden="true"><svg class="pj" viewBox="-50 -50 100 100"><use href="#uvq11-rose-g"/></svg></div><p class="nm" aria-live="polite">Kobalt</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Eine gotische Fensterrose in SVG mit sechs Blättern aus gesprenkeltem Glas, Bleiruten und kleinen Bernstein-Medaillons. Ein Rauschfilter gibt den Scheiben ihre alte Textur, eine weiche Sonne wandert mit dem Zeiger dahinter, und eine unscharfe Kopie des Fensters fällt zusammen mit einem Lichtstrahl in der gewählten Farbe auf den Boden.
Die beiden Hauptfarben füllen die Kobalt- und Rubinscheiben, der Rest behält seine Edelsteintöne. Die Blätter verhalten sich wie eine Radiogruppe mit Pfeiltasten und eignen sich als Theme- oder Kategoriewahl für Kulturseiten, Kirchen oder Spiele.