Dizajn / SVG

Generator SVG talasa za razdvajanje sekcija

Generišite glatke, slojevite SVG talase za ivicu između dve sekcije stranice: izaberite broj slojeva i talasa, visinu, glatkoću i boju, a zatim preuzmite SVG ili ga kopirajte kao CSS pozadinu.

Generator SVG talasa za razdvajanje sekcija: Svaki sloj je niz tačaka koje se nasumično smenjuju iznad i ispod osnovne linije, povezanih glatkom krivom i ispunjenih do donje ivice. Zadnji slojevi su bleđi, pa slojevi stvaraju utisak dubine. SVG se prilagođava svakoj širini, a CSS verzija ga ugrađuje kao pozadinu u obliku data URI-ja. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija: Alatke za programere
Pokretanja: U vašem pregledaču
Trošak: Besplatno · bez registracije
Dostupnost: Spremno za upotrebu

Generator SVG talasaLokalna obrada

U potpunosti radi u vašem pregledaču

Slojevi3Talasa se preko3Visina talasa60%Glatkoća1Visina slike240 pxBoja#479d1d Okreni naopako (za vrh odeljka)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG se razvlači na bilo koju širinu (preserveAspectRatio="none"), pa odgovara razdelnicima odeljaka pune širine. Postavite ga na dno jednog odeljka, koristeći boju pozadine sledećeg odeljka, ili ga okrenite za vrh. Ista vrednost nasumičnog početnog broja uvek crta isti talas.

SVG ili CSS?

Ugrađeni SVG može da se stilizuje i animira pomoću CSS-a, a njegova fill vrednost može da koristi currentColor. Kao CSS pozadina, SVG je data URI: ništa dodatno ne mora da se učitava, ali je boja fiksirana u kodu. Datoteka u oba slučaja ima nekoliko stotina bajtova; možete je dodatno srediti pomoću SVG čistača.

Glatkoća

Kriva je Catmull-Rom splajn pretvoren u kubične Bézier segmente: pri maksimalnoj glatkoći nežno prolazi kroz svaku tačku, a pri nultoj glatkoći postaje niz pravih linija između njih i dobija se nazubljena ivica planine.

Kako se koristi

Podesite broj slojeva, broj talasa i njihovu visinu.
Izaberite boju i okrenite talas ako ga koristite na vrhu sekcije.
Kliknite da generišete nove nasumične talase, a zatim preuzmite SVG ili kopirajte CSS.

Privatnost i ograničenja

Talasi se crtaju u vašem pregledaču.

Srodne alatke

Često postavljana pitanja

Kako da ga koristim između dve sekcije?

Dajte talasu boju sekcije ispod i postavite ga pri dnu sekcije iznad, preko cele širine; okrenite ga ako želite da ga koristite na vrhu sekcije.

Da li će ista podešavanja dati isti talas?

Da: oblik se dobija na osnovu nasumičnog semena, pa se menja samo kada kliknete da generišete novi talas.

Da li mogu komercijalno da koristim talase?

Da: oblici se generišu za vas i nemaju licencna ograničenja.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban