На главную

CSS-эффекты и графика

SVG-волны

Одна волна с настройкой амплитуды, частоты и сложности. Заливка цветом или градиентом, на выходе — SVG, data URI и строка для background.

Волна

Заливка

Превью

Сгенерированная волна

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none">
  <path fill="#6366f1" d="M 0 160 C 10 154.67, 40 137.24, 60 128 C 80 118.76, 100 109.91, 120 104.57 C 140 99.24, 160 96, 180 96 C 200 96, 220 99.24, 240 104.57 C 260 109.91, 280 118.76, 300 128 C 320 137.24, 340 149.33, 360 160 C 380 170.67, 400 182.76, 420 192 C 440 201.24, 460 210.09, 480 215.43 C 500 220.76, 520 224, 540 224 C 560 224, 580 220.76, 600 215.43 C 620 210.09, 640 201.24, 660 192 C 680 182.76, 700 170.67, 720 160 C 740 149.33, 760 137.24, 780 128 C 800 118.76, 820 109.91, 840 104.57 C 860 99.24, 880 96, 900 96 C 920 96, 940 99.24, 960 104.57 C 980 109.91, 1000 118.76, 1020 128 C 1040 137.24, 1060 149.33, 1080 160 C 1100 170.67, 1120 182.76, 1140 192 C 1160 201.24, 1180 210.09, 1200 215.43 C 1220 220.76, 1240 224, 1260 224 C 1280 224, 1300 220.76, 1320 215.43 C 1340 210.09, 1360 201.24, 1380 192 C 1400 182.76, 1430 165.33, 1440 160 L 1440 320 L 0 320 Z"/>
</svg>

CSS: фон блока

.wave {
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' width='1440' height='320' preserveAspectRatio='none'%3E %3Cpath fill='%236366f1' d='M 0 160 C 10 154.67, 40 137.24, 60 128 C 80 118.76, 100 109.91, 120 104.57 C 140 99.24, 160 96, 180 96 C 200 96, 220 99.24, 240 104.57 C 260 109.91, 280 118.76, 300 128 C 320 137.24, 340 149.33, 360 160 C 380 170.67, 400 182.76, 420 192 C 440 201.24, 460 210.09, 480 215.43 C 500 220.76, 520 224, 540 224 C 560 224, 580 220.76, 600 215.43 C 620 210.09, 640 201.24, 660 192 C 680 182.76, 700 170.67, 720 160 C 740 149.33, 760 137.24, 780 128 C 800 118.76, 820 109.91, 840 104.57 C 860 99.24, 880 96, 900 96 C 920 96, 940 99.24, 960 104.57 C 980 109.91, 1000 118.76, 1020 128 C 1040 137.24, 1060 149.33, 1080 160 C 1100 170.67, 1120 182.76, 1140 192 C 1160 201.24, 1180 210.09, 1200 215.43 C 1220 220.76, 1240 224, 1260 224 C 1280 224, 1300 220.76, 1320 215.43 C 1340 210.09, 1360 201.24, 1380 192 C 1400 182.76, 1430 165.33, 1440 160 L 1440 320 L 0 320 Z'/%3E %3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

data URI для <img>

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20width%3D%221440%22%20height%3D%22320%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cpath%20fill%3D%22%236366f1%22%20d%3D%22M%200%20160%20C%2010%20154.67%2C%2040%20137.24%2C%2060%20128%20C%2080%20118.76%2C%20100%20109.91%2C%20120%20104.57%20C%20140%2099.24%2C%20160%2096%2C%20180%2096%20C%20200%2096%2C%20220%2099.24%2C%20240%20104.57%20C%20260%20109.91%2C%20280%20118.76%2C%20300%20128%20C%20320%20137.24%2C%20340%20149.33%2C%20360%20160%20C%20380%20170.67%2C%20400%20182.76%2C%20420%20192%20C%20440%20201.24%2C%20460%20210.09%2C%20480%20215.43%20C%20500%20220.76%2C%20520%20224%2C%20540%20224%20C%20560%20224%2C%20580%20220.76%2C%20600%20215.43%20C%20620%20210.09%2C%20640%20201.24%2C%20660%20192%20C%20680%20182.76%2C%20700%20170.67%2C%20720%20160%20C%20740%20149.33%2C%20760%20137.24%2C%20780%20128%20C%20800%20118.76%2C%20820%20109.91%2C%20840%20104.57%20C%20860%2099.24%2C%20880%2096%2C%20900%2096%20C%20920%2096%2C%20940%2099.24%2C%20960%20104.57%20C%20980%20109.91%2C%201000%20118.76%2C%201020%20128%20C%201040%20137.24%2C%201060%20149.33%2C%201080%20160%20C%201100%20170.67%2C%201120%20182.76%2C%201140%20192%20C%201160%20201.24%2C%201180%20210.09%2C%201200%20215.43%20C%201220%20220.76%2C%201240%20224%2C%201260%20224%20C%201280%20224%2C%201300%20220.76%2C%201320%20215.43%20C%201340%20210.09%2C%201360%20201.24%2C%201380%20192%20C%201400%20182.76%2C%201430%20165.33%2C%201440%20160%20L%201440%20320%20L%200%20320%20Z%22%2F%3E%0A%3C%2Fsvg%3E