DEV Community

Cover image for I drew a synthesizer with HTML & CSS

I drew a synthesizer with HTML & CSS

Sarah on April 04, 2021

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...
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!

Collapse
 
mattmarquise profile image
Matthew Marquise •

Amazing work! Keep it up!!

Collapse
 
nikhil27b profile image
Nikhil Bobade •

Amazing work

Collapse
 
tptshoe profile image
Mark Flegg •

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

Collapse
 
chomadev profile image
Marcos Braga Choma •

beautiful!

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
 
lhckb profile image
LuΓ­s Cruz •

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

Collapse
 
akshaypatel99 profile image
laidbackak •

Incredible work!

Collapse
 
mainstreetswagger profile image
mainstreetswagger •

mind blowing

Collapse
 
muzammilaalpha profile image
muzammilaalpha •

Nice one!

Collapse
 
andreluisbarreto profile image
Andre Barreto •

Love it! Keep going with this excellent work!

Collapse
 
3rdp profile image
3rdp •

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

Collapse
 
sketch_street profile image
scetchy coding A-street Sketch •

Wow πŸ‘

Collapse
 
emex4gman profile image
Ibebugwu Chukwuemeka •

Wow

Collapse
 
256hz profile image
Abe Dolinger •

The shading/highlights around the speaker are so good.

Collapse
 
nedzen profile image
Marius •

This is amazing. I love it.

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi •

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

Collapse
 
disgustingdev profile image
disgusting-dev •

Appreciate your work, really inspiring

Collapse
 
scottbeeker profile image
Scott Beeker •

Now Following

Collapse
 
souksyp profile image
Souk Syp. •

That’s unreal

Collapse
 
luiz0x29a profile image
Real AI •

I bet it would be easier to draw in Inkscape and export SVG, doing it manually on CSS is kind of insane, its cool, but a bit insane

Collapse
 
hedgybeats profile image
hedgybeats • • Edited

This is so awesome!!!
I added some functionality to the toy synth, you can check it out at laytonhedges.co.za/