Arcos recortados
Grátis, sem cadastro, roda no seu navegador.
O festão invertido: os arcos curvam para dentro da área colorida em vez de para fora, deixando uma fileira de aberturas em arco ao longo da borda. Arquitetônico mais que decorativo, e a escolha óbvia para qualquer coisa com ar de colunata ou galeria.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 6 |
| Amplitude | 62% |
| Aleatoriedade | 0% |
| Linha de base | 50% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 302 |
O que vale saber
- Os arcos varrem para o outro lado, o que é uma caixa de seleção e não uma forma diferente.
- Seis arcos é perto do limite antes de as aberturas ficarem estreitas demais para se ler.
- Com 319 bytes custa o mesmo que a versão para fora.
O que custa em bytes
Esta forma exata tem 319 bytes como SVG e 480 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 | 319 B |
| Fundo CSS | 480 B |
| clip-path CSS | 511 B |
O começo do SVG de Arcos recortados
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-240 160A120 75.39 0 0 0 0 160A120 75.39 0 0 0 240 160A120 75.39 0 0 0 480 160A120 75.39 0 0 0 720 160A120 75.39 0 0 0 960 160A120 75.39 0 0 0 1200 160A120 75.39 0 0 0 1440 160L1440 320L-240 320Z" fill="#4f46e5"/></svg>Em mais detalhe
Arcos para dentro e para fora são o mesmo comando de arco com a flag de varredura invertida, e é por isso que isto é uma caixa de seleção e não uma família de predefinições separada. É também por isso que os dois custam bytes idênticos: nada no caminho muda além de um único dígito.
Perguntas
Como eu altero Arcos recortados depois de obtê-la?
Abra o gerador, clique em Arcos recortados 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 302 com 6 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.