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 (41)

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
ย 
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
ย 
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
ย 
alvaromontoro profile image
Alvaro Montoro โ€ข

Simply amazing! ๐Ÿ‘๐Ÿ‘๐Ÿ‘

Collapse
ย 
lorenzoblog profile image
Lorenzo โ€ข

Wow, they're really well done!

Collapse
ย 
peopledatabase profile image
People Database โ€ข

Perfect (:

Collapse
ย 
lijithjr profile image
lijith โ€ข

Amazing work!!! WOW

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
ย 
pacheco profile image
Thiago Pacheco โ€ข

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

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