DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Top comments (9)

Collapse
 
nald profile image
Nald • Edited on

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 on

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

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.