Triángulo redondeado
Gratis, sin registro, funciona en tu navegador.
Tres puntos es el mínimo que acepta una spline cerrada, y da un triángulo redondeado más que algo parecido a un blob. Útil como acento geométrico suave donde un círculo resultaría demasiado neutro.
Los ajustes que hay detrás
| Generador | Blob |
|---|---|
| Puntos | 3 |
| Aleatoriedad | 35% |
| Suavidad | 100% |
| Semilla | 512 |
Lo que conviene saber
- Tres puntos, así que tres lóbulos: la forma cerrada más simple que hace el generador.
- El blob más pequeño del catálogo con 217 bytes.
- Sube la aleatoriedad para un aspecto escaleno, bájala para algo casi equilátero.
Lo que cuesta en bytes
Esta forma exacta ocupa 217 bytes como SVG y 378 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 | 217 B |
| Fondo CSS | 378 B |
| clip-path CSS | 435 B |
| border-radius CSS | 108 B |
El comienzo del SVG de Triángulo redondeado
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 31.4C117.75 31.39,162.06 114.14,153.18 130.7C144.3 147.27,55.56 147.32,46.7 130.77C37.84 114.22,82.25 31.41,100 31.4Z" fill="#4f46e5"/></svg>Con más detalle
Tres puntos es también el caso más difícil para las matemáticas, y por eso está en el catálogo y no escondido al final de un control. Con solo tres, cada punto es a la vez ambos vecinos de los demás y la indexación circular no tiene dónde esconderse: una implementación de spline cerrada que se equivoque en la costura falla de la forma más visible aquí, así que es la forma que el conjunto de pruebas comprueba primero.
Preguntas
¿Cómo cambio Triángulo redondeado una vez la tengo?
Abre el generador, pulsa Triángulo redondeado 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 512 con 3 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.