DEV Community

Cover image for I drew a synthesizer with HTML & CSS
Sarah
Sarah

Posted on

I drew a synthesizer with HTML & CSS

I made a new drawing using only HTML & CSS. This time I chose to go for the Muson toy synthesizer. I've been wanting to draw it for a while now, so I'm glad I finally got to do it.

Muson drawn in HTML & CSS

Tutorials: https://fossheim.io

Patreon: https://patreon.com/fossheim

Buy Me A Coffee: https://buymeacoffee.com/fossheim

Other CSS drawings I've made:


More on CodePen and GitHub.

Oldest comments (42)

Collapse
 
thalitadev profile image
Thalita G.

Oh! I remember seeing your Polaroid codepen. I absolutely love the softness of your new CSS drawing.

Collapse
 
fossheim profile image
Sarah

Thank you! 🙌🏻

Collapse
 
pacheco profile image
Thiago Pacheco

Omg, this is amazing!
Keep up with the nice work!

Collapse
 
amuuu profile image
amu

Woah these look awesome. I'd love to add sound functionalities for them!

Collapse
 
machineno15 profile image
Tanvir Shaikh

All the best it'll be great..I'll love to see that.. 🔥🔥

Collapse
 
dougbutner profile image
Douglas James Butner

What libraries would you use to do this?

Collapse
 
xaddict profile image
Luuk Lamers
Collapse
 
bobik808 profile image
Konstantin Grachev

If you want actual synthesis and sequencing capabilities, you should probably have a look at Tone.js. It's a really powerful framework for the WebAudio API. But if all you want is to play samples, howler sould be sufficient.

Collapse
 
mattmarquise profile image
Matthew Marquise

Amazing work! Keep it up!!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Simply amazing! 👏👏👏

Collapse
 
souksyp profile image
Souk Syp.

That’s unreal

Collapse
 
nikhil27b profile image
Nikhil Bobade

Amazing work

Collapse
 
devlorenzo profile image
DevLorenzo

Wow, they're really well done!

Collapse
 
peopledatabase profile image
People Database

Perfect (:

Collapse
 
disgustingdev profile image
disgusting-dev

Appreciate your work, really inspiring

Collapse
 
lijithjr profile image
lijith

Amazing work!!! WOW

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Your css arts are on a whole new level 🤯🤯🤯

Collapse
 
crongm profile image
Carlos Garcia ★

These are an amazing display of skills. Congratulations. :)

Collapse
 
andreluisbarreto profile image
Andre Barreto

Love it! Keep going with this excellent work!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.