html, body {
margin: 0;
overflow: hidden;
}
const scene = new Urpflanze.Scene()
const triangle = new Urpflanze.Triangle({
repetitions: [1, 8],
scale: ({ repetition }) => repetition.offset * 0.9 + 0.1,
sideLength: [50, 58],
transformOrigin: () => [
Urpflanze.Animation.cosp(scene.currentTime, 3000, Urpflanze.toRadians(-60), 1) * -0.8,
Urpflanze.Animation.sinp(scene.currentTime, 3000, Urpflanze.toRadians(-60), 1) * -0.6
]
})
const shape = new Urpflanze.Shape({
shape: triangle,
repetitions: 6,
distance: Urpflanze.Animation.Loop({ from: 80, to: 50, duration: 3000 }),
rotateZ: () => Urpflanze.Animation.sinp(scene.currentTime, 3000) * Urpflanze.toRadians(10) + Urpflanze.toRadians(180),
displace: Urpflanze.Animation.UncontrolledLoop({
from: 0,
to: Urpflanze.toRadians(-180),
duration: 8000
})
})
scene.add(shape)
const drawer = new Urpflanze.DrawerCanvas(scene, document.body, {
width: window.innerWidth,
height: window.innerHeight
}, 24000)
window.addEventListener('resize', () => {
drawer.resize(window.innerWidth, window.innerHeight)
}, false)
drawer.startAnimation()
This Pen doesn't use any external CSS resources.