JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

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

JavaScript

let draw = SVG().addTo('body').size(1800, 900)

class Light {
  constructor (xposition,yposition)
  { 
    this.x = Math.random()*xposition;
    this.y = Math.random()*yposition;
    
  }

  draw () {
//base底座
var rect = draw.rect(150, 25).fill('#3b3a3a').move(120, 385)
var ellipse1 = draw.ellipse(150, 45).fill('#3b3a3a').move(120, 390)
var ellipse = draw.ellipse(150, 45).fill('#6b6b6b').move(120, 360)

//bracket支架
var line = draw.line(0, 150, 130, 20).move(205, 220)
line.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var line1 = draw.line(0, 150, 130, 20).move(220, 220)
line1.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var line3 = draw.line(140, 260, 30, 130).move(220, 89)
line3.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var line4 = draw.line(140, 260, 30, 130).move(240, 89)
line4.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var rect2 = draw.rect(25, 35).fill('#525252').move(201, 349)
var line6 = draw.line(0, 30, 30, 35).move(190, 75)
line6.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var polygon = draw.polygon('58,93 55,65 85,60 96,78 90,90')
polygon.fill('#525252').move(313, 200)
var polygon1 = draw.polygon('60,100 51,70 90,78 90,90')
polygon1.fill('#525252').move(210, 70)
//polygon1.opacity(0.7)

//light
var line5 = draw.line(0, 50, 0, 100).move(173, 60)
line5.stroke({ color: '#6b6b6b', width: 40, linecap: 'round' })
var path = draw.path('M100 20 A8 10 0 0 0 1 20 z')
path.fill('#6b6b6b').move(125, 85)
var ellipse3 = draw.ellipse(99, 25).fill('#3b3a3a').move(125,135)

var polyline = draw.polyline('80,50 400,400 -300,400 15,50')
polyline.fill('#fff700').move(-175, 140)
polyline.opacity(0.3)

}}


function lightArray(n, fillFunction) {
    let i = 0;
    let outputArray = [];
  while (i < n) {
    outputArray.push(new Light (1800, 900))
      i++
  }
  return outputArray
}

let myLight = lightArray(10);
  for(let i = 0; i < myLight.length ; i++){
    myLight[i].draw();
  }