Created an interactive version of this using the full screen SVG from a previous blog post. Idea is to be able to run this full screen with the controls optional on mouse over. Challenge was having the 'control', html form, remain visible in front of the svg. Had to add "z-index: -1" to the svg. A number of challenges remain:
- the width of the form and the input fields... Works full screen on PC, but embedded like here it does not.
- get workable controls in mobile browsers..
- should or shouldn't I revert to frameworks like bootstrap and/or d3?
- browsers behave different when zooming: works in Firefox and IE, but not in Chrome and Vivaldi (why, am I doing something wrong?)?
- ---- window.devicePixelRatio helps, but this behaves inverse from 'normal (PC)' browsers on mobile browsers...
This can be animated like: