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.

Top comments (42)

Collapse
 
amuuu profile image
amu

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

Collapse
 
dougbutner profile image
Douglas James Butner

What libraries would you use to do this?

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
 
xaddict profile image
Luuk Lamers
Collapse
 
machineno15 profile image
Tanvir Shaikh

All the best it'll be great..I'll love to see that.. πŸ”₯πŸ”₯

Collapse
 
michaeltharrington profile image
Michael Tharrington

So so cool!!

I got some tunes to go with it...

Lisa Bella Donna playing a Moog One synthesizer outdoors. πŸ‘‡

Collapse
 
simbiosis profile image
SIMBIOSIS

If you don't say it it could perfectly be taken for an Illustrator vector graphic. Well, at the end it's a vector graphic just built from the less expected language. Great for you! Keep on pushing the boundaries, that's what make us all evolve.

Collapse
 
lhckb profile image
LuΓ­s Cruz

these are awesome! they look like an actual photo, well done

Collapse
 
crongm profile image
Carlos Garcia β˜…

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

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
 
lijithjr profile image
lijith

Amazing work!!! WOW

Collapse
 
mattmarquise profile image
Matthew Marquise

Amazing work! Keep it up!!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Simply amazing! πŸ‘πŸ‘πŸ‘

Collapse
 
nikhil27b profile image
Nikhil Bobade

Amazing work

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