Sol LeWitt

A reproduction of a Sol LeWitt art piece

Using javascript to create svg elements in the dom

This is the first clue

const w3 = "http://www.w3.org/2000/svg"
const svg = document.createElementNS(w3, "svg")
svg.setAttribute("width", 960)
svg.setAttribute("height", 500)
document.body.appendChild(svg)

Create many vertical bars of width 20 with a gap of 20

Then having a home grown go at a for loop.

• Note the height 100%
• Note the 2 * barWidth below for a gap equal to the bar width
• note const newRect is block scoped so it all starts again on every iteration of the for loop

const barWidth = 20
      
for (let i = 1; i <= 22; i++) {
  const newRect = document.createElementNS(w3, "rect")
  newRect.setAttribute("x", (i * 2 * barWidth))
  newRect.setAttribute("width", barWidth)
  newRect.setAttribute("height", "100%")
  newRect.setAttribute("fill", "black")
  svg.appendChild(newRect)
}