Ferramenta 11
Ondas e blobs SVG
Divisores de seção e formas orgânicas em SVG leve. Gere variações, ajuste as camadas e copie o código.
Forma
Cor da onda
Cor do fundo
0.7 KB
SVG para colar no HTML
<svg style="display:block" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 180" preserveAspectRatio="none" width="100%" height="180"><path d="M0 180L0 64.4C48 65.9 192 76.1 288 73.1C384 70.2 480 42.5 576 46.7C672 50.9 768 96.1 864 98.3C960 100.5 1056 68.1 1152 59.7C1248 51.2 1392 49.6 1440 47.5L1440 180Z" fill="#877209"/><path d="M0 180L0 95.6C48 97.8 192 112.5 288 108.8C384 105.1 480 78.8 576 73.2C672 67.7 768 68.9 864 75.2C960 81.5 1056 107.2 1152 111C1248 114.8 1392 100.1 1440 98L1440 180Z" fill="#4B410E"/><path d="M0 180L0 129.7C48 130.2 192 129.1 288 132.6C384 136.1 480 144.6 576 150.8C672 157.1 768 170.4 864 170C960 169.6 1056 147.5 1152 148.4C1248 149.3 1392 170.8 1440 175.3L1440 180Z" fill="#0F1012"/></svg>CSS (fundo, sem elemento extra)
/* a onda entra como fundo da seção, na cor da seção vizinha */
.secao {
background: #FFD400 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none' width='100%25' height='180'%3E%3Cpath d='M0 180L0 64.4C48 65.9 192 76.1 288 73.1C384 70.2 480 42.5 576 46.7C672 50.9 768 96.1 864 98.3C960 100.5 1056 68.1 1152 59.7C1248 51.2 1392 49.6 1440 47.5L1440 180Z' fill='%23877209'/%3E%3Cpath d='M0 180L0 95.6C48 97.8 192 112.5 288 108.8C384 105.1 480 78.8 576 73.2C672 67.7 768 68.9 864 75.2C960 81.5 1056 107.2 1152 111C1248 114.8 1392 100.1 1440 98L1440 180Z' fill='%234B410E'/%3E%3Cpath d='M0 180L0 129.7C48 130.2 192 129.1 288 132.6C384 136.1 480 144.6 576 150.8C672 157.1 768 170.4 864 170C960 169.6 1056 147.5 1152 148.4C1248 149.3 1392 170.8 1440 175.3L1440 180Z' fill='%230F1012'/%3E%3C/svg%3E") bottom / 100% 180px no-repeat;
padding-bottom: 180px;
}