JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #1c1c1c;
}

JavaScript

function createMatrix(nRows, nColumns, elemFunc) {
  let outputMatrix = [];
  for (let yi = 0; yi < nRows; yi++) {
    let row = [];
    for (let xi = 0; xi < nColumns; xi++) {
      row.push(elemFunc(yi, xi))
    }
    outputMatrix.push(row)
  }
  return outputMatrix
}

function mapMatrix(inputMatrix, elemFunc) {
  let outputMatrix = [];
  for (let yi = 0; yi < inputMatrix.length; yi++) {
    let row = inputMatrix[yi];
    let outputRow = [];
    for (let xi = 0; xi < row.length; xi++) {
      outputRow.push(elemFunc(xi, yi, row[xi]))
    }
    outputMatrix.push(outputRow)
  }
  return outputMatrix
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance)
  }
  /*moveByAngle(angle, distance) {
    let r = angle * Math.PI / 180;
    return new Point(this.x + distance * Math.sin(r), this.y + distance * Math.cos(r))
  }*/
}

// initialize SVG.js
var draw = SVG().addTo('body').size(1920,1080)

class W {
  constructor (xposition,yposition)
  { 
    this.x = xposition;
    this.y = yposition;

  }

  draw () {

var linear = draw.gradient('linear', function(add) {
  add.stop(0, '#000521')
  add.stop(0.5, '#000521')
})

var rect1 = draw.rect(270, 340).fill(linear.from(0, 1).to(0, 0)).move(this.x+250, this.y+100)

//moon
var rect2 = draw.circle(60).fill('#F5E9AB').move(this.x+300, this.y+130)
var rect3 = draw.circle(40).fill('#000521').move(this.x+300, this.y+130)

//house
var rect4 = draw.rect(210, 200).fill('#014b61').move(this.x+286, this.y+237)

var rect6 = draw.rect(270, 340).fill('none').move(this.x+250, this.y+100)
rect6.stroke({ color: '#2b2b2b', width: 7, linecap: 'round', linejoin: 'round'})

}}

function wArray(n, fillFunction) {
    let i = 0;
    let outputArray = [];
  while (i < n) {
    //outputArray.push(new W ((i*800),50))
   outputArray.push(new W ((i*800),400))
      i++
  }
  return outputArray
}

 let myW = wArray(3);
  for(let i = 0; i <...