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.

Discussion (43)

Collapse
amuuu profile image
AMU

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

Collapse
dougbutner profile image
Douglas 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
naseki profile image
Naseki

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

Collapse
fossheim profile image
Sarah Author

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

Collapse
devlorenzo profile image
DevLorenzo

Wow, they're really well done!

Collapse
peopledatabase profile image
People Database

Perfect (:

Collapse
pacheco profile image
Thiago Pacheco

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

Collapse
akshaypatel99 profile image
laidbackak

Incredible work!

Collapse
mainstreetswagger profile image
mainstreetswagger

mind blowing

Collapse
muzammilaalpha profile image
muzammilaalpha

Nice one!

Collapse
calag4n profile image
calag4n

Wow, you've made such a huge work !
It's awesome πŸ‘.

Collapse
1ak31sha profile image
Lakeisha

these are mad sick yoo. im inspired <3

Collapse
sagarnaik12 profile image
sagarnaik12

These are so goood.

Collapse
wanzargen profile image
WANJIN

Cooool!!!

Collapse
3rdp profile image
3rdp

Looks AWESOME, well done πŸ‘πŸ»

Collapse
sketch_street profile image
scetchy coding A-street Sketch

Wow πŸ‘

Collapse
andreluisbarreto profile image
Andre Barreto

Love it! Keep going with this excellent work!

Collapse
emex4gman profile image
Ibebugwu Chukwuemeka

Wow

Collapse
256hz profile image
Abe Dolinger

The shading/highlights around the speaker are so good.

Collapse
tptshoe profile image
Mark Flegg

Wow, these are fantastic!! You have amazing skills!!

Collapse
chomadev profile image
Marcos Braga Choma

beautiful!

Collapse
dangolbeeker profile image
Scott B

Now Following

Collapse
sergeyioffe profile image
Sergey Ioffe

Great drawings.

Collapse
disgustingdev profile image
disgusting-dev

Appreciate your work, really inspiring