loading...
Cover image for 🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest

🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest

anupa profile image Anup Aglawe ・2 min read

✨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

pic
Editor guide
Collapse
rynvva profile image
Reynald Prabha Nova

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

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