tailwindtoolbox/Landing-Page

Qn: How to create the svg pattern

Closed this issue · 2 comments

bsr203 commented

Hi,
I am not a designer, and wonder how did you create the svg pattern here
Any online tool to create custom pattern or used a graphic editor?
thanks
bsr

tailwindtoolbox commented

Hey!
I did what all web developers do is copy from another template! :)

You can use a tool like Figma and draw your own shapes and you can export them as a svg.

Or if you are just insterested in waves, this is a handy tool which you could use to create your own ones: https://getwaves.io/

You can merge multiple waves together by just merging the path tags into a single svg.
e.g.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="0.75" d="M0,32L30,48C60,64,120,96,180,122.7C240,149,300,171,360,197.3C420,224,480,256,540,277.3C600,299,660,309,720,266.7C780,224,840,128,900,80C960,32,1020,32,1080,64C1140,96,1200,160,1260,165.3C1320,171,1380,117,1410,90.7L1440,64L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path> <path fill="#e7008a" fill-opacity="0.35" d="M0,0L30,42.7C60,85,120,171,180,176C240,181,300,107,360,101.3C420,96,480,160,540,154.7C600,149,660,75,720,74.7C780,75,840,149,900,170.7C960,192,1020,160,1080,133.3C1140,107,1200,85,1260,101.3C1320,117,1380,171,1410,197.3L1440,224L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path> </svg>

bsr203 commented

thanks a ton for quick response and valuable tips. Cheers. bsr

  • 👍1