Ziguezague marcado
Grátis, sem cadastro, roda no seu navegador.
Nove pontos unidos por linhas retas em vez de uma curva. Aqui os cantos são a forma, e suavizá-los mesmo um pouco transforma um ziguezague numa onda ruim — por isso este é um estilo de junção separado e não o controle de suavidade baixado.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 9 |
| Amplitude | 58% |
| Aleatoriedade | 6% |
| Linha de base | 55% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 2024 |
O que vale saber
- Segmentos retos, então o arquivo é uma fração do tamanho de uma curva pelos mesmos pontos.
- Mantenha a aleatoriedade baixa: um ziguezague se lê como deliberado só enquanto os dentes combinam.
- Com 264 bytes é uma das menores formas do catálogo.
O que custa em bytes
Esta forma exata tem 264 bytes como SVG e 425 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 | 264 B |
| Fundo CSS | 425 B |
| clip-path CSS | 456 B |
O começo do SVG de Ziguezague marcado
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 140.02L0 177.61L160 215.5L320 236.17L480 227.82L640 197.67L800 154.53L960 121.73L1120 116.94L1280 139.19L1440 177.19L1440 320L-160 320Z" fill="#4f46e5"/></svg>Em mais detalhe
Este é de longe o divisor mais barato daqui, porque um segmento de linha custa um par de coordenadas onde uma cúbica custa três. Se você vai adicionar um divisor a uma página que já está pesada, um ziguezague de nove pontos custa menos que uma onda suave de quatro e é, possivelmente, a forma mais marcante.
Perguntas
Como eu altero Ziguezague marcado depois de obtê-la?
Abra o gerador, clique em Ziguezague marcado 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 2024 com 9 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.