Generator fal SVG

Twórz płynne fale SVG jako tła, separatory sekcji lub dekoracje. Ustaw amplitudę, częstotliwość i kolor. Kopiuj kod SVG lub pobierz plik. Responsywne, skalowalny wektor.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Warstwy

Odwróć

Szerokość

Wysokość

Amplituda

Częstotliwość

Gładkość

Kolor 1

Kolor 2

Kolor 3

Przezroczystość bazowa

Krok przezroczystości

Tło

Przesunięcie X

Animacja

Prędkość

Wynik

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="300" viewBox="0 0 1440 300" preserveAspectRatio="none" role="img" aria-label="Wygenerowane fale SVG">
  <rect width="100%" height="100%" fill="#0f172a"></rect>
  <path d="M 0 300 L 0.00 211.19 L 9.60 210.70 L 19.20 210.62 L 28.80 210.96 L 38.40 211.70 L 48.00 212.85 L 57.60 214.38 L 67.20 216.26 L 76.80 218.47 L 86.40 220.98 L 96.00 223.73 L 105.60 226.70 L 115.20 229.83 L 124.80 233.07 L 134.40 236.37 L 144.00 239.68 L 153.60 242.95 L 163.20 246.13 L 172.80 249.16 L 182.40 252.00 L 192.00 254.61 L 201.60 256.93 L 211.20 258.95 L 220.80 260.61 L 230.40 261.91 L 240.00 262.81 L 249.60 263.30 L 259.20 263.38 L 268.80 263.04 L 278.40 262.30 L 288.00 261.15 L 297.60 259.62 L 307.20 257.74 L 316.80 255.53 L 326.40 253.02 L 336.00 250.27 L 345.60 247.30 L 355.20 244.17 L 364.80 240.93 L 374.40 237.63 L 384.00 234.32 L 393.60 231.05 L 403.20 227.87 L 412.80 224.84 L 422.40 222.00 L 432.00 219.39 L 441.60 217.07 L 451.20 215.05 L 460.80 213.39 L 470.40 212.09 L 480.00 211.19 L 489.60 210.70 L 499.20 210.62 L 508.80 210.96 L 518.40 211.70 L 528.00 212.85 L 537.60 214.38 L 547.20 216.26 L 556.80 218.47 L 566.40 220.98 L 576.00 223.73 L 585.60 226.70 L 595.20 229.83 L 604.80 233.07 L 614.40 236.37 L 624.00 239.68 L 633.60 242.95 L 643.20 246.13 L 652.80 249.16 L 662.40 252.00 L 672.00 254.61 L 681.60 256.93 L 691.20 258.95 L 700.80 260.61 L 710.40 261.91 L 720.00 262.81 L 729.60 263.30 L 739.20 263.38 L 748.80 263.04 L 758.40 262.30 L 768.00 261.15 L 777.60 259.62 L 787.20 257.74 L 796.80 255.53 L 806.40 253.02 L 816.00 250.27 L 825.60 247.30 L 835.20 244.17 L 844.80 240.93 L 854.40 237.63 L 864.00 234.32 L 873.60 231.05 L 883.20 227.87 L 892.80 224.84 L 902.40 222.00 L 912.00 219.39 L 921.60 217.07 L 931.20 215.05 L 940.80 213.39 L 950.40 212.09 L 960.00 211.19 L 969.60 210.70 L 979.20 210.62 L 988.80 210.96 L 998.40 211.70 L 1008.00 212.85 L 1017.60 214.38 L 1027.20 216.26 L 1036.80 218.47 L 1046.40 220.98 L 1056.00 223.73 L 1065.60 226.70 L 1075.20 229.83 L 1084.80 233.07 L 1094.40 236.37 L 1104.00 239.68 L 1113.60 242.95 L 1123.20 246.13 L 1132.80 249.16 L 1142.40 252.00 L 1152.00 254.61 L 1161.60 256.93 L 1171.20 258.95 L 1180.80 260.61 L 1190.40 261.91 L 1200.00 262.81 L 1209.60 263.30 L 1219.20 263.38 L 1228.80 263.04 L 1238.40 262.30 L 1248.00 261.15 L 1257.60 259.62 L 1267.20 257.74 L 1276.80 255.53 L 1286.40 253.02 L 1296.00 250.27 L 1305.60 247.30 L 1315.20 244.17 L 1324.80 240.93 L 1334.40 237.63 L 1344.00 234.32 L 1353.60 231.05 L 1363.20 227.87 L 1372.80 224.84 L 1382.40 222.00 L 1392.00 219.39 L 1401.60 217.07 L 1411.20 215.05 L 1420.80 213.39 L 1430.40 212.09 L 1440.00 211.19 L 1440 300 Z" fill="#6366f1" fill-opacity="0.90"></path>
  <path d="M 0 300 L 0.00 217.74 L 9.60 213.54 L 19.20 209.32 L 28.80 205.16 L 38.40 201.13 L 48.00 197.28 L 57.60 193.69 L 67.20 190.39 L 76.80 187.46 L 86.40 184.92 L 96.00 182.83 L 105.60 181.21 L 115.20 180.10 L 124.80 179.50 L 134.40 179.44 L 144.00 179.90 L 153.60 180.88 L 163.20 182.37 L 172.80 184.35 L 182.40 186.77 L 192.00 189.61 L 201.60 192.82 L 211.20 196.35 L 220.80 200.13 L 230.40 204.13 L 240.00 208.26 L 249.60 212.46 L 259.20 216.68 L 268.80 220.84 L 278.40 224.87 L 288.00 228.72 L 297.60 232.31 L 307.20 235.61 L 316.80 238.54 L 326.40 241.08 L 336.00 243.17 L 345.60 244.79 L 355.20 245.90 L 364.80 246.50 L 374.40 246.56 L 384.00 246.10 L 393.60 245.12 L 403.20 243.63 L 412.80 241.65 L 422.40 239.23 L 432.00 236.39 L 441.60 233.18 L 451.20 229.65 L 460.80 225.87 L 470.40 221.87 L 480.00 217.74 L 489.60 213.54 L 499.20 209.32 L 508.80 205.16 L 518.40 201.13 L 528.00 197.28 L 537.60 193.69 L 547.20 190.39 L 556.80 187.46 L 566.40 184.92 L 576.00 182.83 L 585.60 181.21 L 595.20 180.10 L 604.80 179.50 L 614.40 179.44 L 624.00 179.90 L 633.60 180.88 L 643.20 182.37 L 652.80 184.35 L 662.40 186.77 L 672.00 189.61 L 681.60 192.82 L 691.20 196.35 L 700.80 200.13 L 710.40 204.13 L 720.00 208.26 L 729.60 212.46 L 739.20 216.68 L 748.80 220.84 L 758.40 224.87 L 768.00 228.72 L 777.60 232.31 L 787.20 235.61 L 796.80 238.54 L 806.40 241.08 L 816.00 243.17 L 825.60 244.79 L 835.20 245.90 L 844.80 246.50 L 854.40 246.56 L 864.00 246.10 L 873.60 245.12 L 883.20 243.63 L 892.80 241.65 L 902.40 239.23 L 912.00 236.39 L 921.60 233.18 L 931.20 229.65 L 940.80 225.87 L 950.40 221.87 L 960.00 217.74 L 969.60 213.54 L 979.20 209.32 L 988.80 205.16 L 998.40 201.13 L 1008.00 197.28 L 1017.60 193.69 L 1027.20 190.39 L 1036.80 187.46 L 1046.40 184.92 L 1056.00 182.83 L 1065.60 181.21 L 1075.20 180.10 L 1084.80 179.50 L 1094.40 179.44 L 1104.00 179.90 L 1113.60 180.88 L 1123.20 182.37 L 1132.80 184.35 L 1142.40 186.77 L 1152.00 189.61 L 1161.60 192.82 L 1171.20 196.35 L 1180.80 200.13 L 1190.40 204.13 L 1200.00 208.26 L 1209.60 212.46 L 1219.20 216.68 L 1228.80 220.84 L 1238.40 224.87 L 1248.00 228.72 L 1257.60 232.31 L 1267.20 235.61 L 1276.80 238.54 L 1286.40 241.08 L 1296.00 243.17 L 1305.60 244.79 L 1315.20 245.90 L 1324.80 246.50 L 1334.40 246.56 L 1344.00 246.10 L 1353.60 245.12 L 1363.20 243.63 L 1372.80 241.65 L 1382.40 239.23 L 1392.00 236.39 L 1401.60 233.18 L 1411.20 229.65 L 1420.80 225.87 L 1430.40 221.87 L 1440.00 217.74 L 1440 300 Z" fill="#ec4899" fill-opacity="0.70"></path>
  <path d="M 0 300 L 0.00 229.70 L 9.60 229.74 L 19.20 229.14 L 28.80 227.90 L 38.40 226.05 L 48.00 223.62 L 57.60 220.64 L 67.20 217.17 L 76.80 213.24 L 86.40 208.94 L 96.00 204.32 L 105.60 199.46 L 115.20 194.44 L 124.80 189.32 L 134.40 184.21 L 144.00 179.17 L 153.60 174.28 L 163.20 169.63 L 172.80 165.28 L 182.40 161.31 L 192.00 157.77 L 201.60 154.73 L 211.20 152.22 L 220.80 150.30 L 230.40 148.98 L 240.00 148.30 L 249.60 148.26 L 259.20 148.86 L 268.80 150.10 L 278.40 151.95 L 288.00 154.38 L 297.60 157.36 L 307.20 160.83 L 316.80 164.76 L 326.40 169.06 L 336.00 173.68 L 345.60 178.54 L 355.20 183.56 L 364.80 188.68 L 374.40 193.79 L 384.00 198.83 L 393.60 203.72 L 403.20 208.37 L 412.80 212.72 L 422.40 216.69 L 432.00 220.23 L 441.60 223.27 L 451.20 225.78 L 460.80 227.70 L 470.40 229.02 L 480.00 229.70 L 489.60 229.74 L 499.20 229.14 L 508.80 227.90 L 518.40 226.05 L 528.00 223.62 L 537.60 220.64 L 547.20 217.17 L 556.80 213.24 L 566.40 208.94 L 576.00 204.32 L 585.60 199.46 L 595.20 194.44 L 604.80 189.32 L 614.40 184.21 L 624.00 179.17 L 633.60 174.28 L 643.20 169.63 L 652.80 165.28 L 662.40 161.31 L 672.00 157.77 L 681.60 154.73 L 691.20 152.22 L 700.80 150.30 L 710.40 148.98 L 720.00 148.30 L 729.60 148.26 L 739.20 148.86 L 748.80 150.10 L 758.40 151.95 L 768.00 154.38 L 777.60 157.36 L 787.20 160.83 L 796.80 164.76 L 806.40 169.06 L 816.00 173.68 L 825.60 178.54 L 835.20 183.56 L 844.80 188.68 L 854.40 193.79 L 864.00 198.83 L 873.60 203.72 L 883.20 208.37 L 892.80 212.72 L 902.40 216.69 L 912.00 220.23 L 921.60 223.27 L 931.20 225.78 L 940.80 227.70 L 950.40 229.02 L 960.00 229.70 L 969.60 229.74 L 979.20 229.14 L 988.80 227.90 L 998.40 226.05 L 1008.00 223.62 L 1017.60 220.64 L 1027.20 217.17 L 1036.80 213.24 L 1046.40 208.94 L 1056.00 204.32 L 1065.60 199.46 L 1075.20 194.44 L 1084.80 189.32 L 1094.40 184.21 L 1104.00 179.17 L 1113.60 174.28 L 1123.20 169.63 L 1132.80 165.28 L 1142.40 161.31 L 1152.00 157.77 L 1161.60 154.73 L 1171.20 152.22 L 1180.80 150.30 L 1190.40 148.98 L 1200.00 148.30 L 1209.60 148.26 L 1219.20 148.86 L 1228.80 150.10 L 1238.40 151.95 L 1248.00 154.38 L 1257.60 157.36 L 1267.20 160.83 L 1276.80 164.76 L 1286.40 169.06 L 1296.00 173.68 L 1305.60 178.54 L 1315.20 183.56 L 1324.80 188.68 L 1334.40 193.79 L 1344.00 198.83 L 1353.60 203.72 L 1363.20 208.37 L 1372.80 212.72 L 1382.40 216.69 L 1392.00 220.23 L 1401.60 223.27 L 1411.20 225.78 L 1420.80 227.70 L 1430.40 229.02 L 1440.00 229.70 L 1440 300 Z" fill="#a855f7" fill-opacity="0.50"></path>
  <path d="M 0 300 L 0.00 165.00 L 9.60 171.02 L 19.20 176.94 L 28.80 182.67 L 38.40 188.12 L 48.00 193.21 L 57.60 197.86 L 67.20 201.98 L 76.80 205.53 L 86.40 208.43 L 96.00 210.65 L 105.60 212.15 L 115.20 212.91 L 124.80 212.91 L 134.40 212.15 L 144.00 210.65 L 153.60 208.43 L 163.20 205.53 L 172.80 201.98 L 182.40 197.86 L 192.00 193.21 L 201.60 188.12 L 211.20 182.67 L 220.80 176.94 L 230.40 171.02 L 240.00 165.00 L 249.60 158.98 L 259.20 153.06 L 268.80 147.33 L 278.40 141.88 L 288.00 136.79 L 297.60 132.14 L 307.20 128.02 L 316.80 124.47 L 326.40 121.57 L 336.00 119.35 L 345.60 117.85 L 355.20 117.09 L 364.80 117.09 L 374.40 117.85 L 384.00 119.35 L 393.60 121.57 L 403.20 124.47 L 412.80 128.02 L 422.40 132.14 L 432.00 136.79 L 441.60 141.88 L 451.20 147.33 L 460.80 153.06 L 470.40 158.98 L 480.00 165.00 L 489.60 171.02 L 499.20 176.94 L 508.80 182.67 L 518.40 188.12 L 528.00 193.21 L 537.60 197.86 L 547.20 201.98 L 556.80 205.53 L 566.40 208.43 L 576.00 210.65 L 585.60 212.15 L 595.20 212.91 L 604.80 212.91 L 614.40 212.15 L 624.00 210.65 L 633.60 208.43 L 643.20 205.53 L 652.80 201.98 L 662.40 197.86 L 672.00 193.21 L 681.60 188.12 L 691.20 182.67 L 700.80 176.94 L 710.40 171.02 L 720.00 165.00 L 729.60 158.98 L 739.20 153.06 L 748.80 147.33 L 758.40 141.88 L 768.00 136.79 L 777.60 132.14 L 787.20 128.02 L 796.80 124.47 L 806.40 121.57 L 816.00 119.35 L 825.60 117.85 L 835.20 117.09 L 844.80 117.09 L 854.40 117.85 L 864.00 119.35 L 873.60 121.57 L 883.20 124.47 L 892.80 128.02 L 902.40 132.14 L 912.00 136.79 L 921.60 141.88 L 931.20 147.33 L 940.80 153.06 L 950.40 158.98 L 960.00 165.00 L 969.60 171.02 L 979.20 176.94 L 988.80 182.67 L 998.40 188.12 L 1008.00 193.21 L 1017.60 197.86 L 1027.20 201.98 L 1036.80 205.53 L 1046.40 208.43 L 1056.00 210.65 L 1065.60 212.15 L 1075.20 212.91 L 1084.80 212.91 L 1094.40 212.15 L 1104.00 210.65 L 1113.60 208.43 L 1123.20 205.53 L 1132.80 201.98 L 1142.40 197.86 L 1152.00 193.21 L 1161.60 188.12 L 1171.20 182.67 L 1180.80 176.94 L 1190.40 171.02 L 1200.00 165.00 L 1209.60 158.98 L 1219.20 153.06 L 1228.80 147.33 L 1238.40 141.88 L 1248.00 136.79 L 1257.60 132.14 L 1267.20 128.02 L 1276.80 124.47 L 1286.40 121.57 L 1296.00 119.35 L 1305.60 117.85 L 1315.20 117.09 L 1324.80 117.09 L 1334.40 117.85 L 1344.00 119.35 L 1353.60 121.57 L 1363.20 124.47 L 1372.80 128.02 L 1382.40 132.14 L 1392.00 136.79 L 1401.60 141.88 L 1411.20 147.33 L 1420.80 153.06 L 1430.40 158.98 L 1440.00 165.00 L 1440 300 Z" fill="#6366f1" fill-opacity="0.30"></path>
</svg>

svg: <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="300" viewBox="0 0 1440 300" preserveAspectRatio="none" role="img" aria-label="Wygenerowane fale SVG"> <rect width="100%" height="100%" fill="#0f172a"></rect> <path d="M 0 300 L 0.00 211.19 L 9.60 210.70 L 19.20 210.62 L 28.80 210.96 L 38.40 211.70 L 48.00 212.85 L 57.60 214.38 L 67.20 216.26 L 76.80 218.47 L 86.40 220.98 L 96.00 223.73 L 105.60 226.70 L 115.20 229.83 L 124.80 233.07 L 134.40 236.37 L 144.00 239.68 L 153.60 242.95 L 163.20 246.13 L 172.80 249.16 L 182.40 252.00 L 192.00 254.61 L 201.60 256.93 L 211.20 258.95 L 220.80 260.61 L 230.40 261.91 L 240.00 262.81 L 249.60 263.30 L 259.20 263.38 L 268.80 263.04 L 278.40 262.30 L 288.00 261.15 L 297.60 259.62 L 307.20 257.74 L 316.80 255.53 L 326.40 253.02 L 336.00 250.27 L 345.60 247.30 L 355.20 244.17 L 364.80 240.93 L 374.40 237.63 L 384.00 234.32 L 393.60 231.05 L 403.20 227.87 L 412.80 224.84 L 422.40 222.00 L 432.00 219.39 L 441.60 217.07 L 451.20 215.05 L 460.80 213.39 L 470.40 212.09 L 480.00 211.19 L 489.60 210.70 L 499.20 210.62 L 508.80 210.96 L 518.40 211.70 L 528.00 212.85 L 537.60 214.38 L 547.20 216.26 L 556.80 218.47 L 566.40 220.98 L 576.00 223.73 L 585.60 226.70 L 595.20 229.83 L 604.80 233.07 L 614.40 236.37 L 624.00 239.68 L 633.60 242.95 L 643.20 246.13 L 652.80 249.16 L 662.40 252.00 L 672.00 254.61 L 681.60 256.93 L 691.20 258.95 L 700.80 260.61 L 710.40 261.91 L 720.00 262.81 L 729.60 263.30 L 739.20 263.38 L 748.80 263.04 L 758.40 262.30 L 768.00 261.15 L 777.60 259.62 L 787.20 257.74 L 796.80 255.53 L 806.40 253.02 L 816.00 250.27 L 825.60 247.30 L 835.20 244.17 L 844.80 240.93 L 854.40 237.63 L 864.00 234.32 L 873.60 231.05 L 883.20 227.87 L 892.80 224.84 L 902.40 222.00 L 912.00 219.39 L 921.60 217.07 L 931.20 215.05 L 940.80 213.39 L 950.40 212.09 L 960.00 211.19 L 969.60 210.70 L 979.20 210.62 L 988.80 210.96 L 998.40 211.70 L 1008.00 212.85 L 1017.60 214.38 L 1027.20 216.26 L 1036.80 218.47 L 1046.40 220.98 L 1056.00 223.73 L 1065.60 226.70 L 1075.20 229.83 L 1084.80 233.07 L 1094.40 236.37 L 1104.00 239.68 L 1113.60 242.95 L 1123.20 246.13 L 1132.80 249.16 L 1142.40 252.00 L 1152.00 254.61 L 1161.60 256.93 L 1171.20 258.95 L 1180.80 260.61 L 1190.40 261.91 L 1200.00 262.81 L 1209.60 263.30 L 1219.20 263.38 L 1228.80 263.04 L 1238.40 262.30 L 1248.00 261.15 L 1257.60 259.62 L 1267.20 257.74 L 1276.80 255.53 L 1286.40 253.02 L 1296.00 250.27 L 1305.60 247.30 L 1315.20 244.17 L 1324.80 240.93 L 1334.40 237.63 L 1344.00 234.32 L 1353.60 231.05 L 1363.20 227.87 L 1372.80 224.84 L 1382.40 222.00 L 1392.00 219.39 L 1401.60 217.07 L 1411.20 215.05 L 1420.80 213.39 L 1430.40 212.09 L 1440.00 211.19 L 1440 300 Z" fill="#6366f1" fill-opacity="0.90"></path> <path d="M 0 300 L 0.00 217.74 L 9.60 213.54 L 19.20 209.32 L 28.80 205.16 L 38.40 201.13 L 48.00 197.28 L 57.60 193.69 L 67.20 190.39 L 76.80 187.46 L 86.40 184.92 L 96.00 182.83 L 105.60 181.21 L 115.20 180.10 L 124.80 179.50 L 134.40 179.44 L 144.00 179.90 L 153.60 180.88 L 163.20 182.37 L 172.80 184.35 L 182.40 186.77 L 192.00 189.61 L 201.60 192.82 L 211.20 196.35 L 220.80 200.13 L 230.40 204.13 L 240.00 208.26 L 249.60 212.46 L 259.20 216.68 L 268.80 220.84 L 278.40 224.87 L 288.00 228.72 L 297.60 232.31 L 307.20 235.61 L 316.80 238.54 L 326.40 241.08 L 336.00 243.17 L 345.60 244.79 L 355.20 245.90 L 364.80 246.50 L 374.40 246.56 L 384.00 246.10 L 393.60 245.12 L 403.20 243.63 L 412.80 241.65 L 422.40 239.23 L 432.00 236.39 L 441.60 233.18 L 451.20 229.65 L 460.80 225.87 L 470.40 221.87 L 480.00 217.74 L 489.60 213.54 L 499.20 209.32 L 508.80 205.16 L 518.40 201.13 L 528.00 197.28 L 537.60 193.69 L 547.20 190.39 L 556.80 187.46 L 566.40 184.92 L 576.00 182.83 L 585.60 181.21 L 595.20 180.10 L 604.80 179.50 L 614.40 179.44 L 624.00 179.90 L 633.60 180.88 L 643.20 182.37 L 652.80 184.35 L 662.40 186.77 L 672.00 189.61 L 681.60 192.82 L 691.20 196.35 L 700.80 200.13 L 710.40 204.13 L 720.00 208.26 L 729.60 212.46 L 739.20 216.68 L 748.80 220.84 L 758.40 224.87 L 768.00 228.72 L 777.60 232.31 L 787.20 235.61 L 796.80 238.54 L 806.40 241.08 L 816.00 243.17 L 825.60 244.79 L 835.20 245.90 L 844.80 246.50 L 854.40 246.56 L 864.00 246.10 L 873.60 245.12 L 883.20 243.63 L 892.80 241.65 L 902.40 239.23 L 912.00 236.39 L 921.60 233.18 L 931.20 229.65 L 940.80 225.87 L 950.40 221.87 L 960.00 217.74 L 969.60 213.54 L 979.20 209.32 L 988.80 205.16 L 998.40 201.13 L 1008.00 197.28 L 1017.60 193.69 L 1027.20 190.39 L 1036.80 187.46 L 1046.40 184.92 L 1056.00 182.83 L 1065.60 181.21 L 1075.20 180.10 L 1084.80 179.50 L 1094.40 179.44 L 1104.00 179.90 L 1113.60 180.88 L 1123.20 182.37 L 1132.80 184.35 L 1142.40 186.77 L 1152.00 189.61 L 1161.60 192.82 L 1171.20 196.35 L 1180.80 200.13 L 1190.40 204.13 L 1200.00 208.26 L 1209.60 212.46 L 1219.20 216.68 L 1228.80 220.84 L 1238.40 224.87 L 1248.00 228.72 L 1257.60 232.31 L 1267.20 235.61 L 1276.80 238.54 L 1286.40 241.08 L 1296.00 243.17 L 1305.60 244.79 L 1315.20 245.90 L 1324.80 246.50 L 1334.40 246.56 L 1344.00 246.10 L 1353.60 245.12 L 1363.20 243.63 L 1372.80 241.65 L 1382.40 239.23 L 1392.00 236.39 L 1401.60 233.18 L 1411.20 229.65 L 1420.80 225.87 L 1430.40 221.87 L 1440.00 217.74 L 1440 300 Z" fill="#ec4899" fill-opacity="0.70"></path> <path d="M 0 300 L 0.00 229.70 L 9.60 229.74 L 19.20 229.14 L 28.80 227.90 L 38.40 226.05 L 48.00 223.62 L 57.60 220.64 L 67.20 217.17 L 76.80 213.24 L 86.40 208.94 L 96.00 204.32 L 105.60 199.46 L 115.20 194.44 L 124.80 189.32 L 134.40 184.21 L 144.00 179.17 L 153.60 174.28 L 163.20 169.63 L 172.80 165.28 L 182.40 161.31 L 192.00 157.77 L 201.60 154.73 L 211.20 152.22 L 220.80 150.30 L 230.40 148.98 L 240.00 148.30 L 249.60 148.26 L 259.20 148.86 L 268.80 150.10 L 278.40 151.95 L 288.00 154.38 L 297.60 157.36 L 307.20 160.83 L 316.80 164.76 L 326.40 169.06 L 336.00 173.68 L 345.60 178.54 L 355.20 183.56 L 364.80 188.68 L 374.40 193.79 L 384.00 198.83 L 393.60 203.72 L 403.20 208.37 L 412.80 212.72 L 422.40 216.69 L 432.00 220.23 L 441.60 223.27 L 451.20 225.78 L 460.80 227.70 L 470.40 229.02 L 480.00 229.70 L 489.60 229.74 L 499.20 229.14 L 508.80 227.90 L 518.40 226.05 L 528.00 223.62 L 537.60 220.64 L 547.20 217.17 L 556.80 213.24 L 566.40 208.94 L 576.00 204.32 L 585.60 199.46 L 595.20 194.44 L 604.80 189.32 L 614.40 184.21 L 624.00 179.17 L 633.60 174.28 L 643.20 169.63 L 652.80 165.28 L 662.40 161.31 L 672.00 157.77 L 681.60 154.73 L 691.20 152.22 L 700.80 150.30 L 710.40 148.98 L 720.00 148.30 L 729.60 148.26 L 739.20 148.86 L 748.80 150.10 L 758.40 151.95 L 768.00 154.38 L 777.60 157.36 L 787.20 160.83 L 796.80 164.76 L 806.40 169.06 L 816.00 173.68 L 825.60 178.54 L 835.20 183.56 L 844.80 188.68 L 854.40 193.79 L 864.00 198.83 L 873.60 203.72 L 883.20 208.37 L 892.80 212.72 L 902.40 216.69 L 912.00 220.23 L 921.60 223.27 L 931.20 225.78 L 940.80 227.70 L 950.40 229.02 L 960.00 229.70 L 969.60 229.74 L 979.20 229.14 L 988.80 227.90 L 998.40 226.05 L 1008.00 223.62 L 1017.60 220.64 L 1027.20 217.17 L 1036.80 213.24 L 1046.40 208.94 L 1056.00 204.32 L 1065.60 199.46 L 1075.20 194.44 L 1084.80 189.32 L 1094.40 184.21 L 1104.00 179.17 L 1113.60 174.28 L 1123.20 169.63 L 1132.80 165.28 L 1142.40 161.31 L 1152.00 157.77 L 1161.60 154.73 L 1171.20 152.22 L 1180.80 150.30 L 1190.40 148.98 L 1200.00 148.30 L 1209.60 148.26 L 1219.20 148.86 L 1228.80 150.10 L 1238.40 151.95 L 1248.00 154.38 L 1257.60 157.36 L 1267.20 160.83 L 1276.80 164.76 L 1286.40 169.06 L 1296.00 173.68 L 1305.60 178.54 L 1315.20 183.56 L 1324.80 188.68 L 1334.40 193.79 L 1344.00 198.83 L 1353.60 203.72 L 1363.20 208.37 L 1372.80 212.72 L 1382.40 216.69 L 1392.00 220.23 L 1401.60 223.27 L 1411.20 225.78 L 1420.80 227.70 L 1430.40 229.02 L 1440.00 229.70 L 1440 300 Z" fill="#a855f7" fill-opacity="0.50"></path> <path d="M 0 300 L 0.00 165.00 L 9.60 171.02 L 19.20 176.94 L 28.80 182.67 L 38.40 188.12 L 48.00 193.21 L 57.60 197.86 L 67.20 201.98 L 76.80 205.53 L 86.40 208.43 L 96.00 210.65 L 105.60 212.15 L 115.20 212.91 L 124.80 212.91 L 134.40 212.15 L 144.00 210.65 L 153.60 208.43 L 163.20 205.53 L 172.80 201.98 L 182.40 197.86 L 192.00 193.21 L 201.60 188.12 L 211.20 182.67 L 220.80 176.94 L 230.40 171.02 L 240.00 165.00 L 249.60 158.98 L 259.20 153.06 L 268.80 147.33 L 278.40 141.88 L 288.00 136.79 L 297.60 132.14 L 307.20 128.02 L 316.80 124.47 L 326.40 121.57 L 336.00 119.35 L 345.60 117.85 L 355.20 117.09 L 364.80 117.09 L 374.40 117.85 L 384.00 119.35 L 393.60 121.57 L 403.20 124.47 L 412.80 128.02 L 422.40 132.14 L 432.00 136.79 L 441.60 141.88 L 451.20 147.33 L 460.80 153.06 L 470.40 158.98 L 480.00 165.00 L 489.60 171.02 L 499.20 176.94 L 508.80 182.67 L 518.40 188.12 L 528.00 193.21 L 537.60 197.86 L 547.20 201.98 L 556.80 205.53 L 566.40 208.43 L 576.00 210.65 L 585.60 212.15 L 595.20 212.91 L 604.80 212.91 L 614.40 212.15 L 624.00 210.65 L 633.60 208.43 L 643.20 205.53 L 652.80 201.98 L 662.40 197.86 L 672.00 193.21 L 681.60 188.12 L 691.20 182.67 L 700.80 176.94 L 710.40 171.02 L 720.00 165.00 L 729.60 158.98 L 739.20 153.06 L 748.80 147.33 L 758.40 141.88 L 768.00 136.79 L 777.60 132.14 L 787.20 128.02 L 796.80 124.47 L 806.40 121.57 L 816.00 119.35 L 825.60 117.85 L 835.20 117.09 L 844.80 117.09 L 854.40 117.85 L 864.00 119.35 L 873.60 121.57 L 883.20 124.47 L 892.80 128.02 L 902.40 132.14 L 912.00 136.79 L 921.60 141.88 L 931.20 147.33 L 940.80 153.06 L 950.40 158.98 L 960.00 165.00 L 969.60 171.02 L 979.20 176.94 L 988.80 182.67 L 998.40 188.12 L 1008.00 193.21 L 1017.60 197.86 L 1027.20 201.98 L 1036.80 205.53 L 1046.40 208.43 L 1056.00 210.65 L 1065.60 212.15 L 1075.20 212.91 L 1084.80 212.91 L 1094.40 212.15 L 1104.00 210.65 L 1113.60 208.43 L 1123.20 205.53 L 1132.80 201.98 L 1142.40 197.86 L 1152.00 193.21 L 1161.60 188.12 L 1171.20 182.67 L 1180.80 176.94 L 1190.40 171.02 L 1200.00 165.00 L 1209.60 158.98 L 1219.20 153.06 L 1228.80 147.33 L 1238.40 141.88 L 1248.00 136.79 L 1257.60 132.14 L 1267.20 128.02 L 1276.80 124.47 L 1286.40 121.57 L 1296.00 119.35 L 1305.60 117.85 L 1315.20 117.09 L 1324.80 117.09 L 1334.40 117.85 L 1344.00 119.35 L 1353.60 121.57 L 1363.20 124.47 L 1372.80 128.02 L 1382.40 132.14 L 1392.00 136.79 L 1401.60 141.88 L 1411.20 147.33 L 1420.80 153.06 L 1430.40 158.98 L 1440.00 165.00 L 1440 300 Z" fill="#6366f1" fill-opacity="0.30"></path> </svg> filename: svg-waves-20261019-200020.svg

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator fal SVG – separatory sekcji i tła w jednym narzędziu

Fale SVG to popularny element nowoczesnego web designu – tworzą płynne przejście między sekcjami strony, zastępując prostą poziomą linię. Narzędzie generuje ścieżkę SVG fali z kontrolą kształtu, kolorów, wysokości i liczby warstw.

generator fal SVG fala SVG separator sekcji SVG wave generator tło faliste SVG

Rodzaje fal i kształtów

Fala sinusoidalna: klasyczna, płynna. Fala trójkątna (zigzag): ostry wzorzec. Fala schodkowa (stepped): efekt pixelart. Asymetryczna: różne kształty lewego i prawego grzbietu. Wielowarstwowa (layered waves): 2-3 warstwy różnych kolorów z przesunięciem fazowym – efekt głębokości.

Parametry konfiguracji

Amplituda: wysokość fali (px). Częstotliwość: liczba cykli na szerokość kontenera. Przesunięcie fazowe (phase): przesuwa falę w poziomie. Odwrócenie (flip): fala "do góry nogami". Płynność (smoothness): krzywe Beziera vs kąt ostry. Wysokość obszaru: przestrzeń pod falą (wypełniona kolorem).

Animacja fal

CSS animation: @keyframes z transform: translateX(-100%) na pętli liniowej – fala "płynie". Dwie warstwy: fala szybsza (większa amplituda) + wolniejsza (mniejsza) = realistyczny efekt oceanu. SMIL animateTransform: alternatywa dla CSS. Wydajność: animacja tylko transform/opacity korzysta z GPU compositing (plynna 60fps).

Integracja z HTML

Pozycja absolutna pod sekcją: <div style="position:relative"><svg class="wave-divider">... Inline SVG: wklej bezpośrednio w HTML (najlepsza wydajność, brak HTTP request). Jako background-image: background-image: url("data:image/svg+xml,..."). CSS clip-path: clip-path: path("M0,0 C...") dla kształtu sekcji bez SVG.

Jak generator zamienia parametry na ścieżkę SVG

Narzędzie nie rysuje obrazka, tylko buduje atrybut d elementu path. Punktem odniesienia jest układ współrzędnych viewBox="0 0 1440 100": 1440 jednostek szerokości i 100 jednostek wysokości, a linia bazowa fali leży zwykle na y = 50. Kształt opisuje wzór y(x) = 50 + A · sin(2π · f · x / 1440 + φ), gdzie A to amplituda, f to częstotliwość rozumiana jako liczba pełnych cykli na szerokość, a φ to przesunięcie fazowe. Generator nie liczy wartości dla każdego piksela – wyznacza tylko węzły w charakterystycznych punktach cyklu i spina je łukami.

Kluczowa jest zamiana sinusoidy na krzywe Béziera. Jeden cykl opisują cztery węzły: zero, grzbiet, zero, dolina. Przy maksymalnej płynności między węzłami pojawiają się segmenty C z punktami kontrolnymi rozciągniętymi poziomo, dzięki czemu krzywa jest gładka i nie tworzy pętli. Im niższa płynność, tym krótsze wektory sterujące, aż węzły łączą odcinki L i powstaje kąt ostry. Fala trójkątna to w praktyce interpolacja liniowa między tymi samymi węzłami, a schodkowa – kwantyzacja wartości y do kilku poziomów.

Separator sekcji to jednak nie sama linia, ale wypełniony obszar. Po ostatnim węźle generator dopisuje L 1440,100, L 0,100 i Z, co domyka ścieżkę i pozwala pomalować przestrzeń pod falą. Przy dwóch lub trzech warstwach powstaje kilka takich ścieżek, każda z własnym kolorem, amplitudą i przesunięciem fazowym – o tym, która jest widoczna z przodu, decyduje kolejność w DOM. Odwrócenie fali to lustrzane odbicie względem osi poziomej, czyli podstawienie y' = 100 - y.

Przykład krok po kroku: trzy cykle w viewBox 1440 na 100

Ustaw viewBox="0 0 1440 100" i zacznij ścieżkę w linii bazowej: M 0,50. Przy przesunięciu fazowym równym zero fala startuje w punkcie zerowym, czyli dokładnie na wysokości środka.
Policz okres: 1440 / 3 = 480 jednostek. Jedna czwarta okresu to 480 / 4 = 120 jednostek i co tyle wypada kolejny węzeł.
Wyznacz pierwszy cykl: (0,50), (120,20), (240,50), (360,80), (480,50). Amplituda 30 podnosi grzbiet do y = 50 - 30 = 20, a dolinę opuszcza do y = 50 + 30 = 80.
Powtórz wzorzec dla pozostałych dwóch cykli: (600,20), (720,50), (840,80), (960,50), (1080,20), (1200,50), (1320,80) i domknięcie na (1440,50). Ostatni węzeł wypada równo na krawędzi viewBox i ma tę samą wartość y co pierwszy – taka ścieżka nadaje się do zapętlenia bez szwu.
Połącz węzły segmentami C, czyli krzywymi Béziera. Punkty kontrolne rozciągnij poziomo w stronę sąsiednich węzłów – krzywa zachowa monotoniczność między grzbietem a doliną i nie zrobi pętli.
Zamknij obszar pod falą: dopisz L 1440,100, L 0,100 i Z, a na ścieżce ustaw fill na wybrany kolor. Gotowy kod wklejasz jako inline SVG nad sekcją, którą fala ma otwierać.

Parametry i ich odpowiedniki w wygenerowanym kodzie

Element kodu	Wartość lub jednostka	Co zmienia w fali
viewBox	0 0 1440 100	Ustala układ współrzędnych: 1440 jednostek szerokości i 100 wysokości, niezależnie od realnego rozmiaru na stronie.
preserveAspectRatio	none	Rozciąga falę na całą szerokość kontenera bez zachowania proporcji.
Amplituda	jednostki viewBox (px w układzie ścieżki)	Odległość grzbietu i doliny od linii bazowej; przy wysokości 100 i bazie na 50 bezpieczna granica to połowa wysokości.
Częstotliwość	liczba cykli na szerokość	Im więcej cykli, tym krótszy okres: 1440 / f; przy f = 3 okres wynosi 480 jednostek.
Przesunięcie fazowe	stopnie lub jednostki x	Przesuwa falę w poziomie; zmienia położenie pierwszego węzła względem krawędzi.
Płynność	od krzywych Béziera do kąta ostrego	Decyduje, czy węzły spinają segmenty C, czy proste odcinki L.
Liczba warstw	2-3 ścieżki	Każda warstwa to osobny path z własnym kolorem i przesunięciem fazowym – daje efekt głębi.
Wysokość obszaru	jednostki viewBox do 100	Ile przestrzeni pod krzywą wypełnia kolor, czyli jak gruby jest pas separatora.

Praktyczne wskazówki przy generowaniu fal

Trzymaj amplitudę poniżej połowy wysokości viewBox – przy wysokości 100 i linii bazowej na y = 50 wartość 50 to granica. Większa amplituda wypchnie grzbiet poza obszar i fala zostanie ucięta na krawędzi.
Dobieraj częstotliwość do szerokości kontenera – trzy cykle na 1440 jednostek dają okres 480, czyli spokojny przebieg na desktopie. Na wąskim ekranie ta sama liczba cykli wygląda gęsto, dlatego warto przygotować drugi wariant ścieżki dla mobile.
Zaczynaj i kończ falę w tym samym punkcie – jeśli planujesz animację translateX(-100%) w pętli, ścieżka musi obejmować całkowitą liczbę okresów. Inaczej na łączeniu widać przeskok.
Różnij warstwy nie tylko kolorem – przy dwóch lub trzech warstwach zmień też amplitudę i przesunięcie fazowe, żeby kontury się nie pokrywały. Więcej warstw zwykle rozmywa efekt zamiast go wzmacniać.
Kolor ustawiaj jako fill, nie stroke – separatorem jest wypełniony obszar pod krzywą, a nie sama linia. Gdy fill fali jest kolorem sekcji poniżej, przejście między tłami wygląda naturalnie, a nie jak doklejony pasek.

Czego generator nie zrobi za Ciebie

Nie dobierze palety ani kontrastu – kolor wypełnienia wpisujesz ręcznie. Narzędzie nie wie, jakie tło ma sekcja nad falą i pod nią, więc spójność kolorystyczną musisz ustalić sam.
Nie zbuduje gotowej sekcji – wynikiem jest ścieżka albo kod SVG. Tekst, siatka, odstępy i reguły responsywne pozostają po stronie Twojego arkusza stylów.
Nie sprawdzi, czy fala mieści się w viewBox – przy zbyt dużej amplitudzie grzbiet wyjdzie poza obszar i zostanie obcięty. Nie ma ostrzeżenia ani automatycznej korekty wartości.
Nie przeliczy jednostek viewBox na piksele – 1440 jednostek rozciągnięte przez preserveAspectRatio="none" to inna realna szerokość na każdym ekranie, więc amplituda i grubość pasa optycznie się zmieniają wraz z szerokością kontenera.

Najczęstsze pytania

Jak zrobić responsywną falę SVG?

Dodaj preserveAspectRatio="none" i viewBox="0 0 1440 100". width="100%" height="auto". Fala rozciąga się do szerokości kontenera. W CSS: position: absolute; bottom: 0; width: 100%; – fala pod sekcją.

Jaki kolor nadać fali dla płynnego przejścia?

Kolor fali = kolor tła kolejnej sekcji. Przykład: sekcja header ma tło #4A90D9 (niebieski), następna sekcja content ma białe tło → fala generowana z fill="#FFFFFF" na niebieskim tle. Efekt: naturalne przejście.

Czy SVG fala wpływa na SEO i dostępność?

SVG dekoracyjne: dodaj aria-hidden="true" – czytniki ekranu je ignorują. role="img" tylko gdy fala niesie informację (rzadkie). SEO: treść w sekcjach pod falą jest normalnie indeksowana – fala nie blokuje contentu.

Jak dodać gradient do fali SVG?

Wewnątrz

Jak fale SVG wyglądają na urządzeniach mobilnych?

Z viewBox i width="100%": fala automatycznie dopasowuje się do szerokości ekranu. Amplituda może wyglądać zbyt duża lub zbyt mała na wąskim ekranie – użyj media queries do zmiany height SVG na mobile. Alternatywnie: osobny SVG dla mobile z niższą amplitudą.

Ile węzłów potrzebuje fala SVG, żeby wyglądała gładko?

Cztery węzły na jeden cykl: zero, grzbiet, zero, dolina. Przy płynności ustawionej na krzywe Béziera to wystarcza, bo łuki między węzłami są wygładzane. Dodawanie kolejnych punktów zwiększa tylko długość atrybutu d, a wizualnie niewiele wnosi.

Jak zmienić kolor fali bez generowania nowej ścieżki?

Nadpisz fill w CSS, na przykład fill: currentColor, i zmieniaj color na kontenerze lub w motywie jasnym i ciemnym. Geometria pozostaje ta sama, zmienia się wyłącznie wypełnienie obszaru pod falą.

Dlaczego animowana fala ma widoczne pęknięcie na łączeniu?

Bo ścieżka nie obejmuje całkowitej liczby okresów albo jej pierwszy węzeł nie ma tej samej współrzędnej y co ostatni. Przy translateX(-100%) w pętli oba końce muszą wypadać dokładnie w tym samym punkcie.

Jak wstawić falę SVG jako tło w CSS?

Zapisz kod jako data:image/svg+xml w background-image. Znak # w kolorach zapisz jako %23, inaczej przeglądarka potnie adres i tło się nie wczyta.

Jak dobrać kolor fali do sekcji?

Kolor fill powinien być kolorem sekcji znajdującej się pod separatorem. Wtedy fala nie jest osobnym elementem graficznym, tylko płynnym przejściem między dwoma tłami.

Powiązane narzędzia: generator SVG blob, generator wielokątów SVG i generator gradientów CSS.