Cobalto
Rosetón de vidriera
Un rosetón de vidrio emplomado: el sol sigue al cursor y el pétalo que eliges proyecta su color en el suelo de piedra.
Ajustes
Código
<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="Color de la vidriera"><path class="pt" role="radio" tabindex="0" aria-checked="true" aria-label="Cobalto" 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="Rubí" 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="Ámbar" 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="Esmeralda" 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="Amatista" 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="Turquesa" 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">Cobalto</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Un rosetón gótico dibujado en SVG con seis pétalos de vidrio moteado, plomos y pequeños medallones ámbar. Un filtro de ruido da a los vidrios su textura antigua, un sol suave se mueve detrás con el puntero y una copia desenfocada del rosetón se proyecta en el suelo junto a un haz del color elegido.
Los dos colores principales rellenan los vidrios cobalto y rubí, y el resto conserva sus tonos de joya. Los pétalos funcionan como un grupo de radio con flechas, así que sirve también como selector de tema o categoría en webs culturales, iglesias o juegos.