JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

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

JavaScript

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

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

  draw () {

//tree
var rect = draw.rect(150, 25).fill('#3b3a3a').move(this.x+120, this.y+385)
var ellipse1 = draw.ellipse(150, 45).fill('#3b3a3a').move(this.x+120, this.y+390)
var ellipse = draw.ellipse(150, 45).fill('#6b6b6b').move(this.x+120, this.y+360)

//bracket支架
var line = draw.line(0, 150, 130, 20).move(this.x+205, this.y+220)
line.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var line1 = draw.line(0, 150, 130, 20).move(this.x+220, this.y+220)
line1.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var line3 = draw.line(140, 260, 30, 130).move(this.x+220, this.y+89)
line3.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var line4 = draw.line(140, 260, 30, 130).move(this.x+240, this.y+89)
line4.stroke({ color: '#3b3a3a', width: 6, linecap: 'round' })
var rect2 = draw.rect(25, 35).fill('#525252').move(this.x+201, this.y+349)
var line6 = draw.line(0, 30, 30, 35).move(this.x+190, this.y+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(this.x+313, this.y+200)
var polygon1 = draw.polygon('60,100 51,70 90,78 90,90')
polygon1.fill('#525252').move(this.x+210, this.y+70)
//polygon1.opacity(0.7)

//light
var line5 = draw.line(0, 50, 0, 100).move(this.x+173, this.y+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(this.x+125, this.y+85)
var ellipse3 = draw.ellipse(99, 25).fill('#3b3a3a').move(this.x+125, this.y+135)

//light2
var polyline = draw.polyline('80,50 400,400 -300,400 15,50')
polyline.fill('#fff700').move(this.x-172, this.y+140)
polyline.opacity(0.2)

}}

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

  draw () {

//W
var...