Animations

by sosegon

HTML

<div id='container'>

</div>

JavaScript

import { SvJs, Gen, Noise } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"

const svg = new SvJs().addTo(document.getElementById("container"))
const svgSize = Math.min(window.innerHeight, window.innerWidth)
svg.set({
  x: 0,
  y: 0,
  width: svgSize,
  height: svgSize,
  viewBox: "0 0 1000 1000",
})
svg.create("rect").set({
  x: 0,
  y: 0,
  width: 1000,
  height: 1000,
  fill: "#000",
})

let palette = ["#123456", "#abcdef", "#123abc", "#abc123"]
let shapes = []

for (let i = 0; i < 4; i++) {
  let size = 500 - i * 125
  let position = 250 + i * 62.5
  let shape = svg.create("rect").set({
    x: position,
    y: position,
    width: size,
    height: size,
    fill: palette[i],
    transform_origin: "center",
    transform: "rotate(45)",
  })
  shapes.push(shape)
}

shapes[0].set({ id: "cssShape" })

svg.create("style").content(`
	@keyframes scaleRotate {
  	0% { transform: rotate(0) scale(1, 1)}
    50% { transform: rotate(180deg) scale(0.5, 1.5)}
    100% { transform: rotate(360deg) scale(1, 1)}
  }
  #cssShape {
  	animation: scaleRotate 5s infinite linear
  }
`)

shapes[1].create("animateTransform").set({
  attributeName: "transform",
  begin: "0s",
  dur: "5s",
  type: "rotate",
  from: "0",
  to: "360",
  repeatCount: "indefinite",
})
shapes[1].create("animateTransform").set({
  attributeName: "transform",
  begin: "0s",
  dur: "5s",
  type: "scale",
  values: "1 1; 0.5 1.5; 1 1",
  repeatCount: "indefinite",
  additive: "sum",
})

let keyframes = {
  transform: [
    "rotate(0deg) scale(1, 1)",
    "rotate(180deg) scale(0.5, 1.5)",
    "rotate(360deg) scale(1,1)",
  ],
  offset: [0, 0.5, 1],
}
let options = {
  duration: 5000,
  iterations: Infinity,
}
shapes[2].animate(keyframes, options)

let isPositive = true
let scale = 0,
  tick = 0,
  prevTime = 0

function animate(time) {
  if (time === undefined) time = 0

  let angle = time * 0.072

  tick = time - prevTime

  scale = isPositive ? scale + tick * 0.0002 : scale - tick * 0.0002

 ...