<!-- made with http://infamous.io -->
<script src="https://assets.codepen.io/191583/LUME.unversioned.2.js"></script>

<template>
  <lume-scene>
    <lume-node
      size="1630 1630"
      align="0.5 0.5"
      mount-point="0.5 0.5"
      :rotation="[0, 0, rotation]"
    >

      <lume-scene v-once>
        <lume-node
          v-for="(n,i) of nodes"
          :key="i"
          size="0 0 0"
          align="0.5 0.5"
          :rotation="[0, 0, i*9]"
        >
          <lume-node
            :size="[50-i%50, 50-i%50, 0]"
            mount-point="0.5 0.5"
            :position="[0, i*1, 0]"
            :style="{
              background: 'hsl('+((i*2)%360)+', 90%, 78%)',
              borderRadius: ((i%50))+'px',
            }"
          >
          </lume-node>
        </lume-node>
      </lume-scene>

    </lume-node>
  </lume-scene>
</template>

/* made with http://infamous.io */

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

// made with http://infamous.io

LUME.useDefaultNames()
var template = document.querySelector('template')

new Vue({
    el: template,
    template: template.innerHTML,
    data: function() { return {
            rotation: 0,
            nodes: Array(400),
    }},
    mounted: function() {
        LUME.Motor.addRenderTask(() => {
            this.rotation += -9.8
        })
    },
})