divisor de seção svg
Nem todo divisor de seção precisa ser uma curva suave, o formato "picos" liga os pontos com segmentos retos e cria um recorte angular, mais parecido com uma cordilheira estilizada do que com uma onda do mar. Esta página já abre o gerador com o preset "picos em camadas".
A camada de trás mais clara e mais baixa em opacidade cria a sensação de profundidade sem competir com o conteúdo da seção.
Combina melhor com sites que já usam formas geométricas retas em outros elementos, ao contrário da onda suave.
Porque um blob aleatório sem seed é impossível de recuperar: se você gostou da forma e recarregou a página, ela some. Com seed, a mesma string sempre reconstrói exatamente o mesmo blob, então você pode anotar a seed, colar num link ou versionar no código, e o resultado visual nunca muda.
Sim, o campo "formato da camada" é independente de amplitude, frequência, fase, opacidade, linha de base e cor, então trocar de picos para onda (ou vice-versa) preserva todo o resto do ajuste feito na camada.
O `d` exportado é um `path` fechado válido, então ele funciona tanto preenchido (o padrão) quanto referenciado dentro de um `<clipPath>` ou como valor de `clip-path` em CSS (com o SVG como recurso), embora essa segunda forma exija colar o `d` manualmente numa `clip-path: path(...)`.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 220" width="1440" height="220" preserveAspectRatio="none" role="img" aria-label="Section wave divider"><path d="M 0,66 L 180,6 L 360,66 L 540,6 L 720,66 L 900,6 L 1080,66 L 1260,6 L 1440,66 L1440,220 L0,220 Z" fill="#4EA8DE" fill-opacity="0.4"/><path d="M 0,99 L 240,9 L 480,99 L 720,9 L 960,99 L 1200,9 L 1440,99 L1440,220 L0,220 Z" fill="#3DDC97" fill-opacity="1"/></svg>O SVG é gerado inteiramente no navegador, a partir da seed. Nada do que você desenha aqui sai do seu dispositivo.