🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest

#showdev #webdev #hacktoberfest #design

✨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.🚀

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

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.