SVG Waves

Instantly generate SVG waves - made by a 12 year old 🌊

3 followers

Instantly generate SVG waves - made by a 12 year old 🌊

3 followers

•

•

SVG Waves lets you generate waves instantly with clean simple lines. Quickly create consistent looking wavy patterns that are perfect for use on websites or documents.

Launch tags:Design Tools•Developer Tools

Launch Team

Intercom — Startups get 90% off Intercom + 1 year of Fin AI Agent free

Startups get 90% off Intercom + 1 year of Fin AI Agent free

Promoted

Colortopia

Maker

Hey everyone! 👋🏻 I'm Bereket, a 12-year-old developer based in Toronto, Canada. Over the past few months, I have been looking into releasing products and tools for the public. In the past, I've released several projects and a couple public products but today I am super excited to be launching SVG Waves to all of you! SVG Waves is a tool to generate svg waves. Simply go to svgwaves.io, and start creating waves! It's a fully interactive playground, so you can drag and pull the points to make waves, customize background colours for your wave, pick a wave style you like, and much more! Done with your creation? Press the "export" icon in the middle of the controls, and simply export your wave by downloading it, copying the svg code, css code, or reverse/ rotate transform code. I encourage you to give SVG Waves a try! ✨🚀 Reach me via: Email: imbereket@gmail.com Twitter: @heybereket

Report

5yr ago

@gmail @heybereket @dustininfinity It is really Awesome at first I didn't notice that I can add extra points. ❤❤❤ I am gonna use it in my next project for sure.

Report

5yr ago

Colortopia

Maker

@gmail @heybereket @sarcastic_dna Thank you!

Report

5yr ago

@heybereket Toronto stays winning! As a marketer who builds a lot of landing pages I love this app

Report

5yr ago

Colortopia

Maker

@heybereket @shawn_ragell Thanks, Shawn! Glad you like it!

Report

5yr ago

Hi all! 👋🏻 I'm Jero, creator of https://jerosoler.github.io/css-... You can see the source code at: https://github.com/jerosoler/css... Bereket has only made a simple copy.

Report

5yr ago

Morph

@jerosoler Ah. Well, I just switched the bookmark I made over to yours. It does look like something I will use. I suppose at least he's good at marketing for a 12-year-old? Haha

Report

5yr ago

@jerosoler I'm interested in this story tell me more please

Report

5yr ago

Imagify

@jerosoler @rob_chap not really since the idea is already there: https://www.producthunt.com/post...

Report

5yr ago

@jerosoler @rob_chap @geoffreycrofte I use the GetWaves tool you linked all the time, however it only randomly generates the wave. I've been looking for something like what @jerosoler built because it lets you design the exact look of the wave. Because a lot of the time I'm not actually wanting a "landing page" wave. I'm just wanting a quick SVG "wave-like" shape. So his tool is completely different and solves a different problem for the SVG creation.

Report

5yr ago

@jerosoler Even if he "made a simple copy" with some added UI on top, your github repo is under MIT license so he's under no obligation to give you credit. Just putting this out there so people reading this don't think @bereket did anything wrong. I've released a lot of open source - don't count on hearing about it, getting thanks or even updates. Steam used a key XML library I wrote years ago & I only heard about it by a 2nd-hand reference in a Dr Dobbs article!

Report

5yr ago

Well done. It's a nice utility with a good user experience. At first, I didn't notice you could add extra points. Consider showing a (+) that follows your cursor along the line so one can click on the line to quickly add an additional point.

Report

5yr ago

Colortopia

Maker

@pdame Hey, thank you! There's a + at the right but I see what you mean. I'll look into it!

Report

5yr ago

This is my only feedback at the moment. Everything else is very intuitive. Works great on iPad. I think a wish would be to have it so if I clicked or tapped on a part of the wave, it would automatically add a point there. That or a simple text card saying “click + to add points” when the page first loads in maybe? @pdame @dustininfinity

Report

5yr ago

Colortopia

Maker

@pdame @eashankotha At the right of the page, there's a + button to add points :)

Report

5yr ago

Ah, yeah I saw. I just meant like one of those “in your face when you open the page” notifications. Can’t think of a good example but something like how Coolors does it or a less annoying version of an email sign up pop up box on a website. The + button works great!

Report

5yr ago

Copy.ai

Everyone knows that waves make great backgrounds for landing pages and that SVGs are the most optimized way to get them displayed on your site, but no one knows how to generate them and make them look great. Alas, Bereket, aka "Young Genius", solved a problem that he had himself and decided to solve that problem for all of us. Thank you YG!

Report

5yr ago

Colortopia

Maker

@paulyacoubian Thanks Paul and no problem! 👊🏻♥

Report

5yr ago

Product Hunt

This is ridiculously simple to use and I love it. If only we could make waves to surf this easy. Great job @dustininfinity!

Report

5yr ago

Colortopia

Maker

@gabe__perez Thanks, Gabe! Appreciate it :)

Report

5yr ago

Hey, bereket! You made a simple, useful tool. There is some idea for you: It would be great if you also animate this waves and add some settings for animation. ;)

Report

5yr ago

Llamao

Damn very nice, I will list it on https://undesign.learn.uno !! Congrats

Report

5yr ago

Colortopia

Maker

@sandochee Thank you, sounds good! 🔥

Report

5yr ago

1 2 3