zondag 19 februari 2017

imitating Francois Morellet 'tirets' in SVG

The french artist François Morellet made a number of paintings called 'Tirets' or 'Dashes' with parallel lines at various angles.

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...
  • .
As stated this version is intended to run full screen:

This can be animated like:


Geen opmerkingen:

Een reactie plaatsen