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

Collapse
 
lorenzoblog profile image
Lorenzo

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
 
scottbeeker profile image
Scott Beeker

Now Following

Collapse
 
sergeyie profile image
Sergey Ieffe

Great drawings.

Collapse
 
disgustingdev profile image
disgusting-dev

Appreciate your work, really inspiring

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
 
souksyp profile image
Souk Syp.

That’s unreal

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/

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