Cristal
Gratis, sin registro, funciona en tu navegador.
Cinco puntos con mucha aleatoriedad, unidos por líneas rectas. La fuerte variación de radio da bordes largos y cortos en la misma forma, que es lo que hace que se lea como una esquirla y no como un pentágono regular.
Los ajustes que hay detrás
| Generador | Blob |
|---|---|
| Puntos | 5 |
| Aleatoriedad | 85% |
| Suavidad | 100% |
| Semilla | 1357 |
Lo que conviene saber
- La aleatoriedad alta es lo que evita que esto parezca un pentágono corriente.
- Cinco lados se leen como deliberados; seis empieza a leerse como un hexágono mal hecho.
- Reproducible desde la semilla 1357.
Lo que cuesta en bytes
Esta forma exacta ocupa 156 bytes como SVG y 317 bytes como fondo CSS — el data URI es mayor porque la codificación en porcentaje cuesta tres caracteres por cada uno que escapa. Ambas cifras corresponden a la forma mostrada arriba, con dos decimales de precisión en las coordenadas.
| Formato | Tamaño |
|---|---|
| SVG | 156 B |
| Fondo CSS | 317 B |
| clip-path CSS | 374 B |
| border-radius CSS | 108 B |
El comienzo del SVG de Cristal
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 20.18L157.74 81.24L142.5 158.5L72.34 138.08L23.94 75.29Z" fill="#4f46e5"/></svg>Con más detalle
Ni siquiera con la aleatoriedad al máximo puede un polígono de aquí cruzarse a sí mismo. Los puntos se sitúan en ángulos equidistantes con radios positivos, así que la forma sigue siendo estrellada respecto a su centro haga lo que haga la semilla: una garantía que los estilos curvos necesitan un tope explícito para mantener, y que el polígono tiene gratis.
Preguntas
¿Cómo cambio Cristal una vez la tengo?
Abre el generador, pulsa Cristal en la fila de preajustes y arrastra lo que quieras. El preajuste es un punto de partida, no un candado: todos los controles siguen activos, y la casilla de semilla acepta una palabra si prefieres nombrar tu forma en vez de numerarla.
¿Se verá igual la próxima vez?
Sí, siempre que la semilla sea la misma. Esta es la semilla 1357 con 5 puntos. El generador es determinista, así que esos ajustes reproducen esta curva exacta en cualquier dispositivo.
¿Puedo usar otro color?
Sí — el color se aplica al exportar, no está incrustado en la geometría. La vista previa de arriba usa el color por defecto; elige el tuyo en el generador y el SVG, el fondo CSS y el clip-path lo seguirán.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.