Gema facetada
Gratis, sin registro, funciona en tu navegador.
Los mismos puntos que usaría un blob, unidos por líneas rectas en lugar de una curva. Las facetas planas captan la luz de otro modo que un blob suave, y por eso esto se lee como piedra tallada y no como una forma líquida.
Los ajustes que hay detrás
| Generador | Blob |
|---|---|
| Puntos | 7 |
| Aleatoriedad | 55% |
| Suavidad | 100% |
| Semilla | 9090 |
Lo que conviene saber
- Bordes rectos, así que es drásticamente más pequeño que el blob suave equivalente.
- Una aleatoriedad moderada mantiene las facetas variadas sin que ninguna domine.
- Con 182 bytes está entre las formas más pequeñas de aquí.
Lo que cuesta en bytes
Esta forma exacta ocupa 182 bytes como SVG y 343 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 | 182 B |
| Fondo CSS | 343 B |
| clip-path CSS | 400 B |
| border-radius CSS | 110 B |
El comienzo del SVG de Gema facetada
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 28.66L157.96 53.78L162.15 114.19L122 145.68L75.84 150.18L44.25 112.72L58.68 67.05Z" fill="#4f46e5"/></svg>Con más detalle
Los polígonos son lo más barato que hace esta herramienta. Un polígono de siete puntos son siete pares de coordenadas; esos mismos siete puntos como spline cerrada son veintiuno. Si necesitas una forma de aspecto orgánico en una página donde los bytes importan, un polígono con mucha aleatoriedad te deja casi en el mismo sitio por un tercio del coste.
Preguntas
¿Cómo cambio Gema facetada una vez la tengo?
Abre el generador, pulsa Gema facetada 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 9090 con 7 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.