<!-- 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
})
},
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.