DEV Community

Cover image for 馃巿SVGWave馃寠 - A miniproject - courtesy of hacktoberfest
Anup Aglawe
Anup Aglawe

Posted on

馃巿SVGWave馃寠 - A miniproject - courtesy of hacktoberfest

鉁ˋs 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. 鉃�/p>

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

Top comments (9)

Collapse
 
prabhuignoto profile image
Prabhu Murthy

nice work

Collapse
 
anupa profile image
Anup Aglawe • Edited

Thanks 馃槃

Collapse
 
anupa profile image
Anup Aglawe

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

Collapse
 
cashless_jay profile image
Peter Joshua

Nice Job Bro

Collapse
 
anupa profile image
Anup Aglawe

Thanks 馃槃

Collapse
 
anupa profile image
Anup Aglawe

Glad to hear that 鈽猴笍

Collapse
 
lowlighter profile image
lowlighter 馃

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

Collapse
 
anupa profile image
Anup Aglawe

I'm already working on it馃槈