A reproduction of a Sol Lewitt art piece, in this case, a triangle(animated)

Notes:

1. No CreateElement with SVG :

   • SVG is an XML(Xtensible Markup Language)-based language.
   • When parsing HTML you can create SVG elements as long as you use <svg> and </svg> correctly
   • SVG elements cannot be dynamically created using CreateElement in the same way as HTML elements.
   • use createElementNS where NS-> NameSpace.
   • i.e. document.createElementNS('http://www.w3.org/2000/svg', 'svg')

2. Innerheight and Innerwidth :

   • Adjusts height and width based on browser window size.
   • window in window.innerHeight is an alias for the global object so even just using 'innerHeight' is fine unless you use a build tool which will then throw an error saying that innerHeight is not defined.

3. const and let :

   • Both are block-scoped and not closure-scoped(which is like var, i.e. global scope). -block-scope: scope of variable restricted to the scope in which it was defined(local)

4. SVG Mask :

   • The SVG masking feature makes it possible to apply a mask to an SVG shape. The mask determines what parts of the SVG shape that is visible, and with what transparency. You can think of an SVG mask as a more advanced version of a clip path.
   • For this example, we will have a black background and a white circle and a white background and black circle to invert the mask