SVG Waves Using Tailwind UI
SVG waves, crafted with tools like https://shuffle.dev/tools/stacked-waves-generator, offer dynamic and customizable wave patterns that can be effortlessly incorporated into your Tailwind CSS projects, bringing a sense of fluidity and visual interest to your web design.
svg
Loading component...
32 lines
<section class="justify-center max-w-3xl mx-auto">
<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<rect fill="#3d1053" />
<path
d="M1920,1080C1654.3333333333333,1110.6666666666667,267.6666666666667,1098.3333333333333,0,1080C-267.6666666666667,1061.6666666666667,207.83333333333331,980.5,314,970C420.1666666666667,959.5,530.3333333333334,1046.5,637,1017C743.6666666666666,987.5,849.3333333333334,789.6666666666666,954,793C1058.6666666666667,796.3333333333334,1158.3333333333333,1019.8333333333334,1265,1037C1371.6666666666667,1054.1666666666667,1484.8333333333333,888.8333333333334,1594,896C1703.1666666666667,903.1666666666666,2185.6666666666665,1049.3333333333333,1920,1080C1654.3333333333333,1110.6666666666667,267.6666666666667,1098.3333333333333,0,1080"
fill="#df6688" />
</svg>
<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<rect fill="#3d1053" />
<path
d="M1920,1080C1655.8333333333333,1123.3333333333333,268,1137.8333333333333,0,1080C-268,1022.1666666666666,205.5,799.5,312,733C418.5,666.5,533.1666666666666,638.3333333333334,639,681C744.8333333333334,723.6666666666666,841.1666666666666,943.6666666666666,947,989C1052.8333333333333,1034.3333333333333,1167.6666666666667,981.1666666666666,1274,953C1380.3333333333333,924.8333333333334,1477.3333333333333,798.8333333333334,1585,820C1692.6666666666667,841.1666666666666,2184.1666666666665,1036.6666666666667,1920,1080C1655.8333333333333,1123.3333333333333,268,1137.8333333333333,0,1080"
fill="#df6688" />
</svg>
<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<rect fill="#df6688" />
<path
d="M 0,1080 C 0,1080 0,180 0,180 C 131.13589743589742,180.24358974358972 262.27179487179484,180.48717948717947 373,195 C 483.72820512820516,209.51282051282053 574.048717948718,238.29487179487185 665,242 C 755.951282051282,245.70512820512815 847.5333333333333,224.3333333333333 960,201 C 1072.4666666666667,177.6666666666667 1205.8179487179486,152.37179487179486 1299,152 C 1392.1820512820514,151.62820512820514 1445.194871794872,176.17948717948718 1542,185 C 1638.805128205128,193.82051282051282 1779.4025641025642,186.9102564102564 1920,180 C 1920,180 1920,1080 1920,1080 Z"
fill="#3d1053" opacity="0.09999999999999999" />
<path
d="M 0,1080 C 0,1080 0,360 0,360 C 78.52564102564105,359.3538461538461 157.0512820512821,358.7076923076923 271,345 C 384.9487179487179,331.2923076923077 534.3205128205128,304.5230769230769 644,299 C 753.6794871794872,293.4769230769231 823.6666666666667,309.2 922,328 C 1020.3333333333333,346.8 1147.0128205128203,368.67692307692306 1266,359 C 1384.9871794871797,349.32307692307694 1496.2820512820515,308.09230769230766 1604,303 C 1711.7179487179485,297.90769230769234 1815.8589743589741,328.95384615384614 1920,360 C 1920,360 1920,1080 1920,1080 Z"
fill="#3d1053" opacity="0.19999999999999998" />
<path
d="M 0,1080 C 0,1080 0,540 0,540 C 133.11794871794868,543.4358974358975 266.23589743589736,546.8717948717949 371,525 C 475.76410256410264,503.12820512820514 552.174358974359,455.94871794871796 637,481 C 721.825641025641,506.05128205128204 815.0666666666668,603.3333333333334 927,604 C 1038.9333333333332,604.6666666666666 1169.5589743589744,508.71794871794873 1282,503 C 1394.4410256410256,497.28205128205127 1488.697435897436,581.7948717948718 1592,603 C 1695.302564102564,624.2051282051282 1807.6512820512821,582.1025641025641 1920,540 C 1920,540 1920,1080 1920,1080 Z"
fill="#3d1053" opacity="0.3" />
<path
d="M 0,1080 C 0,1080 0,720 0,720 C 132.45384615384617,745.376923076923 264.90769230769234,770.7538461538462 363,759 C 461.09230769230766,747.2461538461538 524.8230769230769,698.3615384615383 605,671 C 685.1769230769231,643.6384615384617 781.8000000000001,637.8000000000001 900,652 C 1018.1999999999999,666.1999999999999 1157.976923076923,700.4384615384616 1276,706 C 1394.023076923077,711.5615384615384 1490.2923076923075,688.4461538461538 1594,686 C 1697.7076923076925,683.5538461538462 1808.8538461538462,701.7769230769231 1920,720 C 1920,720 1920,1080 1920,1080 Z"
fill="#3d1053" opacity="0.39999999999999997" />
<path
d="M 0,1080 C 0,1080 0,900 0,900 C 85.84358974358975,882.1820512820514 171.6871794871795,864.3641025641026 266,857 C 360.3128205128205,849.6358974358974 463.0948717948718,852.725641025641 595,866 C 726.9051282051282,879.274358974359 887.9333333333334,902.7333333333333 998,902 C 1108.0666666666666,901.2666666666667 1167.1717948717949,876.3410256410256 1250,863 C 1332.8282051282051,849.6589743589744 1439.3794871794873,847.9025641025642 1555,856 C 1670.6205128205127,864.0974358974358 1795.3102564102564,882.0487179487179 1920,900 C 1920,900 1920,1080 1920,1080 Z"
fill="#3d1053" opacity="0.49999999999999994" />
</svg>
</section>