Test

const km = kelvinUtil.math
const width = 600
const height = 600
const bgColor = 'black'
const bgOpacity = .05
const color = {
  red1: '#E74C3C',
  red2: '#C0392B',
  orange1: '#E67E22',
  orange2: '#D35400',
  yellow1: '#F1C40F',
  yellow2: '#F39C12',
  green1: '#2ECC71',
  green2: '#27AE60',
  mint1: '#1ABC9C',
  mint2: '#16A085',
  blue1: '#3498DB',
  blue2: '#2980B9',
  purple1: '#9B59B6',
  purple2: '#8E44AD',
  light1: '#ECF0F1',
  light2: '#BDC3C7',
  grey1: '#95A5A6',
  grey2: '#7F8C8D',
  dark1: '#34495E',
  dark2: '#2C3E50',
}

let mouseX = 0
let mouseY = 0
let frameCount = 0
let ss = []
let ss2 = []
let num = 0

let stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
})

let layer = new Konva.FastLayer({
  clearBeforeDraw: false
})
stage.add(layer)

let bg = new Konva.Rect({
  x: 0,
  y: 0,
  width: width,
  height: height,
  fill: bgColor,
  opacity: bgOpacity
})
layer.add(bg)
bg.moveToBottom()

// stats
let stats = new Stats()
stats.showPanel(0)
stats.domElement.className += ' stats'
document.body.appendChild(stats.domElement)

new Konva.Animation(frame => {
  stats.begin()

  for (let i = 0; i < 360; i++) {
    let shit
    if (typeof ss[i] === 'undefined') {
      shit = new Konva.Circle({
        radius: 3,
        x: 0,
        y: 0,
        fill: 'white',
          globalCompositeOperation: 'lighter'
      })
      layer.add(shit)
      ss.push(shit)
    }
    else {
      shit = ss[i]
    }
    let angle = km.cos(km.radians(i * 22 + num)) * 460
    let x = width / 2 + km.sin(km.radians(i)) * angle
    let y = height / 2 + km.cos(km.radians(i)) * angle
    let c = tinycolor({ h: frameCount % 360, s: 100, l: 50 })
    shit.x(x)
    shit.y(y)
    shit.fill(c.toHexString())
  }
  num += .5
  frameCount++

  stats.end()
}, layer).start()