DEV Community

Cover image for 🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest
Anup Aglawe
Anup Aglawe

Posted on

🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest

✨As I mark the completion of hacktoberfest, I would say that the one thing which helped me cross the barrier to enter the world of open source, is hacktoberfest.

A slight of background before introducing svgwave, this was early of October I just heard of hacktoberfest, and although I was bit hesitant, I finally took up an issue to work on. The task was to implement a feature to add an SVG wave generator to an existing stencil js app. It was fascinating to me because I was pretty familiar with svgs, paths, & bezier curves. I immediately started working on the simple vanilla js version of svg generator, & built in a day or so. ➰

But this was where the hard part started for me. I was overwhelmed to see the big codebase/structure of the application. Although it was the first time I was looking something more than a personal project, I thought I would it pick up in a day or two. Since the project was based on stencil, I looked up a few docs and articles. In the end, I didn't grasp much and ask the maintainer to unassign myself from the issue and gave up.😢

Few days gone, I finished my four ❤ hacktoberfest PRs ( easy ones ), now it was time to do something of my own. Then suddenly an idea popped up to scale my small & simple vanilla js app to something bigger. I quickly looked up for some lightweight components based frameworks and decided upon using preact ⚛. And to my surprise, I was able to finish building the desired SVG wave generator within 4-5 days.🚀

Github to vercel

I was delighted with the result and decided to showcase, and the same day I bought a domain -- svgwave.in, quickly deployed my app on vercel, configured DNS servers, and boom app was live in 10 mins.

Svg wave - a tiny, customizable SVG wave generator

Alt Text
So, the tool I built is called SVG wave. Svg Wave is a fast, customizable SVG wave generator for UI/Website Designs. It offers minimal GUI toolbar to customize layers, colors, crests and heights of the wave to suit your designs. Visit - svgwave.in to see it live.

Final say - apart from all the spam PRs many maintainers are facing, hacktoberfest is doing its job in welcoming people to contribute.

I would also like to thanks all the contributors who helped the project. I would appreciate the feedback.

⭐ us at Github - svgwave

Discussion (9)

Collapse
nald_dev profile image
Nald Dev • Edited

Love it thanks, used in my GitHub profile page

Collapse
anupa profile image
Anup Aglawe Author

Glad to hear that ☺️

Collapse
prabhuignoto profile image
Prabhu Murthy

nice work

Collapse
anupa profile image
Anup Aglawe Author • Edited

Thanks 😄

Collapse
cashless_jay profile image
Peter Joshua

Nice Job Bro

Collapse
anupa profile image
Anup Aglawe Author

Thanks 😄

Collapse
lowlighter profile image
lowlighter 🦑

Clean 👍 !
I wonder if it would be hard to make them animated ?

Collapse
anupa profile image
Anup Aglawe Author

I'm already working on it😉

Collapse
anupa profile image
Anup Aglawe Author

Added on product hunt - ⚡ producthunt.com/posts/svg-wave