JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

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

JavaScript

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

function buildArray (n, fillFunction) {
  let outputArray = [];
  for (let i = 0; i < n; i++) {
    outputArray.push(fillFunction(i))
  }
  return outputArray
}

function myFunction (xvals,yvals,index){
   let outputArray = [];
   outputArray.push(xvals [index])
   outputArray.push(yvals [index])
   return outputArray
    
}

var linear = draw.gradient('linear', function(add) {
  add.stop(0, '#6495ed')
  add.stop(1, '#ff7878')
})




class Lightning {
  constructor (xposition,yposition, size)
  { 
    this.x = xposition;
    this.y = yposition;
    this.s = size;
  
  }

  draw () {
 
let xvals = buildArray(200, i=> 20*Math.random())
console.log (xvals)

let yvals = buildArray(200 ,i => (i*5)+(10*Math.random()))
console.log (yvals)

let pointsForLine = xvals.map((x,i) => {return myFunction(xvals,yvals,i)})

let pointString = (Math.random()*100)+',200'

var line = draw.line(0, 900, 0, 0).move(this.x+920, this.y+0)
line.stroke({ color: '#FFFFCD', width: 2.5, linecap: 'round' })

var polyline = draw.polyline(pointsForLine)
polyline.fill('none').move(this.x+5, this.y+0)
polyline.stroke({ color: linear, width: 2.5, linecap: 'round', linejoin: 'round' })

}}

let l1 = new Lightning(50,5);

//function lightningArray(n) {
//  let outputArray = [];
//  for (let i = 0; i < n; i++) {
//    outputArray.push(new Lightning(10 + i * 30, 0));
//  }
//  return outputArray;
//}

//let myLightning = lightningArray(100);
let myLightning = buildArray (45, i => new Lightning(10 + i * 20, 0))
myLightning.forEach((x) => x.draw());

l1.draw()