Triângulo arredondado
Grátis, sem cadastro, roda no seu navegador.
Três pontos é o mínimo que uma spline fechada aceita, e dá um triângulo arredondado mais do que algo parecido com um blob. Útil como acento geométrico macio onde um círculo seria neutro demais.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 3 |
| Aleatoriedade | 35% |
| Suavidade | 100% |
| Semente | 512 |
O que vale saber
- Três pontos, então três lóbulos — a forma fechada mais simples que o gerador faz.
- O menor blob do catálogo com 217 bytes.
- Aumente a aleatoriedade para um visual escaleno, diminua para algo quase equilátero.
O que custa em bytes
Esta forma exata tem 217 bytes como SVG e 378 bytes como fundo CSS — o data URI é maior porque a codificação em porcentagem custa três caracteres para cada um que escapa. As duas cifras são da forma mostrada acima, com duas casas decimais de precisão nas coordenadas.
| Formato | Tamanho |
|---|---|
| SVG | 217 B |
| Fundo CSS | 378 B |
| clip-path CSS | 435 B |
| border-radius CSS | 108 B |
O começo do SVG de Triângulo arredondado
<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>Em mais detalhe
Três pontos é também o caso mais difícil para a matemática, e por isso está no catálogo em vez de escondido no fim de um controle. Com apenas três, cada ponto é ao mesmo tempo ambos os vizinhos dos outros e a indexação circular não tem onde se esconder — uma implementação de spline fechada que erra a costura falha do jeito mais visível aqui, então é a forma que o conjunto de testes verifica primeiro.
Perguntas
Como eu altero Triângulo arredondado depois de obtê-la?
Abra o gerador, clique em Triângulo arredondado na fileira de predefinições e arraste o que quiser. A predefinição é um ponto de partida, não uma trava — todos os controles continuam ativos, e a caixa de semente aceita uma palavra se você preferir nomear sua forma em vez de numerá-la.
Vai ficar igual da próxima vez?
Sim, desde que a semente seja a mesma. Esta é a semente 512 com 3 pontos. O gerador é determinístico, então essas configurações reproduzem esta curva exata em qualquer dispositivo.
Posso usar outra cor?
Pode — a cor é aplicada na exportação, não está embutida na geometria. A pré-visualização acima usa a cor padrão da ferramenta; escolha a sua no gerador e o SVG, o fundo CSS e o clip-path acompanham.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.