Generator valuri SVG pentru separatoare de secțiuni

Exemple de separatoare cu valuri

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Val alb sub un hero albastru SVG-ul stă la baza secțiunii, cu un pixel peste margine, iar padding-ul ține textul deasupra lui.

.hero {
  position: relative;
  padding: 96px 24px 160px;
  background: #2563eb;
  color: #ffffff;
}

.hero .separator-val {
  position: absolute;
  left: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 120px;
}

Valul ia culoarea din CSS Cu fill="currentColor", culoarea valului se schimbă din proprietatea color, de exemplu pentru tema închisă.

<svg class="separator-val" viewBox="0 0 1440 320" preserveAspectRatio="none" aria-hidden="true">
  <path fill="currentColor" d="M0,160 C360,320 1080,0 1440,160 L1440,320 L0,320 Z"/>
</svg>

.separator-val { color: #ffffff; }

@media (prefers-color-scheme: dark) {
  .separator-val { color: #0f172a; }
}

Ca imagine de fundal Fără element în plus: SVG-ul codat în data URI (# devine %23) și întins pe lățime.

.sectiune {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,160 C360,320 1080,0 1440,160 L1440,320 L0,320 Z'/%3E%3C/svg%3E")
      no-repeat bottom / 100% 100px,
    #0f766e;
  padding-bottom: 140px;
}

Trei straturi de valuri Straturile din spate au opacitate mai mică, așa că valurile par să aibă adâncime.

<svg class="separator-val" viewBox="0 0 1440 320" preserveAspectRatio="none" aria-hidden="true">
  <path fill="#ffffff" fill-opacity="0.35" d="..."/>
  <path fill="#ffffff" fill-opacity="0.68" d="..."/>
  <path fill="#ffffff" d="..."/>
</svg>

Val mai jos pe telefon Pe ecrane înguste același val pare mai abrupt; îl faci mai scund dintr-un media query.

.separator-val { height: 120px; }

@media (max-width: 600px) {
  .separator-val { height: 60px; }
  .sectiune { padding-bottom: 90px; }
}

Cum folosești generatorul de valuri

Alege forma: val lin, valuri multiple suprapuse, zig-zag, curbă, triunghi sau pași (trepte).
Reglează numărul de vârfuri, amplitudinea și neregularitatea. Butonul ↻ Altă formă generează altă variantă cu aceleași setări.
Pune 1–3 straturi: cele din spate sunt mai înalte și mai transparente.
Alege culoarea valului (de obicei culoarea secțiunii vecine), culoarea secțiunii, poziția (jos sau sus) și înălțimea pe pagină. Poți oglindi sau răsturna forma.
Copiază codul, copiază doar SVG-ul sau descarcă fișierul .svg. Totul se generează în browser; nu se trimite nimic către server.

De ce viewBox=”0 0 1440 320″ și preserveAspectRatio=”none”

Valul este desenat într-un sistem de coordonate de 1440 × 320. Cu preserveAspectRatio="none", SVG-ul se întinde exact pe lățimea și înălțimea pe care i le dai din CSS, fără să păstreze proporțiile. Așa valul ocupă toată lățimea secțiunii pe orice ecran, iar înălțimea o controlezi separat.

.sectiune { position: relative; }

.separator-val {
  position: absolute;
  left: 0;
  bottom: -1px;   /* acoperă linia subțire care poate apărea la rotunjire */
  width: 100%;
  height: 120px;
}

SVG în HTML sau imagine de fundal

Varianta cu SVG în HTML se poate colora din CSS și se vede imediat în inspector. Varianta de fundal pune același SVG într-un data URI, codat cu encodeURIComponent (de exemplu # devine %23), și nu adaugă niciun element în pagină. Pentru că SVG-ul are preserveAspectRatio="none", background-size: 100% 120px îl întinde pe toată lățimea.

Lasă sub conținutul secțiunii un padding cel puțin cât înălțimea valului, ca textul să nu ajungă sub el. SVG-ul inline are aria-hidden="true", pentru că e doar decor.

Întrebări frecvente

Ce culoare pun valului?

Culoarea secțiunii de dedesubt (sau de deasupra, dacă valul e sus). Atunci marginea dintre cele două secțiuni pare ondulată.

De ce apare o linie subțire între val și secțiunea următoare?

Din rotunjirea pixelilor la anumite lățimi. Mută SVG-ul cu un pixel peste margine (bottom: -1px), cum face codul generat.

Pot folosi valul în WordPress?

Da. Pune SVG-ul într-un bloc HTML personalizat la finalul grupului sau al secțiunii, iar CSS-ul în Personalizare → CSS suplimentar.