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()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@urpflanze/js