window.__STYLEGALLERY_ASSETS__={};
let shape = document.querySelector("#shape1");
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let size = 200;
let viewBox = { x: 0, y: 0, width: 100, height: 100 };
let sizeRatio = size / viewBox.width;
const gradient = ctx.createLinearGradient(0, 0, viewBox.width, viewBox.height);
gradient.addColorStop(0.2, "rgb(255, 135, 9)");
gradient.addColorStop(0.7, "rgb(247, 189, 248)");
setDisplay();
gsap.defaults({ ease: "power2.inOut" });
gsap.set(".container", { autoAlpha: 1 });
var tl = gsap.timeline({ repeat: -1, id: "morphing", paused: false, defaults: { duration: 2, ease: "expo.inOut" } }).to(shape, { morphSVG: { shape: "#shape2", render: draw } }).to(shape, { morphSVG: { shape: "#shape3", render: draw } }, "+=0.5").to(shape, { morphSVG: { shape: "#shape4", render: draw } }, "+=0.5").to(shape, { morphSVG: { shape: "#shape1", render: draw } }, "+=0.5");
tl.progress(1e-4);
document.body.addEventListener("click", function() {
  tl.paused(!tl.paused());
});
function draw(rawPath, target) {
  var l, segment, j, i;
  ctx.clearRect(0, 0, size, size);
  ctx.fillStyle = gradient;
  ctx.fill("evenodd");
  ctx.beginPath();
  for (j = 0; j < rawPath.length; j++) {
    segment = rawPath[j];
    l = segment.length;
    ctx.moveTo(segment[0], segment[1]);
    for (i = 2; i < l; i += 6) {
      ctx.bezierCurveTo(segment[i], segment[i + 1], segment[i + 2], segment[i + 3], segment[i + 4], segment[i + 5]);
    }
    if (segment.closed) {
      ctx.closePath();
    }
  }
  ctx.fill("evenodd");
}
function setDisplay() {
  var ratio = window.devicePixelRatio || 1;
  canvas.width = size * ratio;
  canvas.height = size * ratio;
  gsap.set(canvas, { width: size, height: size });
  ratio *= sizeRatio;
  ctx.translate(-viewBox.x * ratio, -viewBox.y * ratio);
  ctx.scale(ratio, ratio);
}