Cobalto
HTML + CSSLiquid Glass
Rosace en vitrail
Une rosace en verre au plomb : le soleil suit le curseur et le pétale choisi projette sa couleur sur le sol de pierre.
Réglages
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="Couleur du vitrail"><path class="pt" role="radio" tabindex="0" aria-checked="true" aria-label="Cobalt" 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="Rubis" 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="Ambre" 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="Émeraude" 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="Améthyste" 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="Turquoise" 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">Cobalt</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Une rosace gothique dessinée en SVG, avec six pétales en verre marbré, des plombs et de petits médaillons ambrés. Un filtre de bruit donne aux vitres leur texture ancienne, un soleil doux passe derrière avec le pointeur et une copie floue de la rosace se projette au sol avec un faisceau de la couleur choisie.
Les deux couleurs principales remplissent les verres cobalt et rubis, les autres gardent leurs tons de pierres précieuses. Les pétales forment un groupe radio aux flèches et peuvent servir de sélecteur de thème ou de catégorie pour un site culturel, une église ou un jeu.