JSFiddle - React, Tailwind, and code Playground

by zoltarSpeaks

HTML

<div id="container" style="background: #000;"></div>

CoffeeScript

stage = new Kinetic.Stage
    container: 'container'
    width: 600
    height: 500
    
layer = new Kinetic.Layer()
splines = []

genCoords = ->
  coords = 
    x: Math.random() * 350
    y: Math.random() * 300 +50
  return coords

draw = ->
  points = []
  if firstCoords
    points.push firstCoords
  else
    points.push genCoords()

  for x in [1..500]
    do (x) ->
      points.push genCoords()
      
  spline = new Kinetic.Spline
    x: 100
    y: 50
    points: points
    stroke: '#fff'
    strokeWidth: 0.5
    tension: 1

  splines.push spline

  firstCoords = 
    x: points[2].x
    y: points[2].y

  # Add to layer
  layer.add(spline)
  stage.add(layer)

draw()