zondag 19 februari 2017

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.

Reconstruct these using SVG (Scalable Vector Graphics).Idea is to be able to run this full screen with the controls optional on mouse over.

Challenge #1 is full screen SVG, can be accomplished using CSS:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100%; z-index: -1 }

The "z-index: -1" to the svg is to allow th form to appear in front of 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:

Geen opmerkingen:

Een reactie posten