Beautiful old style SVG audio knobs with mouse/touch control (JS embedded in SVG) and dynamic shadows (CSS).
Modelled from Moog synthesizer knobs using Inkscape. Check out Interactive demo.
Mouse over the knobs to control their angle. Double click on the knob to reset it to the default value.
Copy whole SVG object code and past it into your code. You are ready to go 🎉
Alternatively, you can reference the SVG as an <object> or <iframe> inside the HTML like so
<object data="knob_free.svg" width="50px" height="50px"></object>Created for my other project like mobbler and Sound exercises.
I would never create this solution without the help of these people:
- desandro - mouse controlled knob logic
- aike - knobs look from great application webaudiosynth
- knobs photos courtesy of knobshop.com
Thank you 👋