Arco
Grátis, sem cadastro, roda no seu navegador.
Dois pontos e muita suavidade: uma única curva varrendo a tela sem repetição nenhuma. A onda menos ondulada daqui, e a que funciona melhor quando o divisor está fazendo trabalho de design gráfico e não apenas separando duas cores.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 2 |
| Amplitude | 85% |
| Aleatoriedade | 0% |
| Linha de base | 52% |
| Camadas | 1 |
| Suavidade | 130% |
| Semente | 5 |
O que vale saber
- Dois pontos é o mínimo que o gerador aceita, e dá uma subida e uma descida.
- Zero aleatoriedade, então a curva é um arco matemático limpo.
- A menor onda do catálogo com 246 bytes.
O que custa em bytes
Esta forma exata tem 246 bytes como SVG e 407 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 | 246 B |
| Fundo CSS | 407 B |
| clip-path CSS | 438 B |
O começo do SVG de Arco
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-720 166.4C-564 166.4,-312 166.4,0 166.4C312 166.4,408 166.4,720 166.4C1032 166.4,1284 166.4,1440 166.4L1440 320L-720 320Z" fill="#4f46e5"/></svg>Em mais detalhe
Espelhe esta na horizontal e ela muda completamente de caráter — um arco tem direção, e para que lado ele corre deve concordar com o caminho que o olho faz pela seção de cima. É também por isso que os controles de espelhamento são um reflexo da curva existente e não uma regeneração: espelhar não pode sortear de novo uma forma com a qual você já tinha se decidido.
Perguntas
Como eu altero Arco depois de obtê-la?
Abra o gerador, clique em Arco 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 5 com 2 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.