JSFiddle - React, Tailwind, and code Playground

by linzoey

JavaScript

var symbol = draw.symbol()


let canvas1 = SVG().addTo('body')
  .size(window.innerWidth, window.innerHeight - 10)
  .viewbox(0, -500, 1500, 1500)
 
let gradient = canvas1.gradient('radial', function(gradient) {
  gradient.stop(0, '#ffbb00')
  gradient.stop(0, '#ffbb00')
    .animate(2000)
    .update(0.8)
    .loop(Infinity, true)
  gradient.stop(1.5, '#000000')
})


let rect = symbol.rect(50, 200)
.fill(gradient)
.move(375, 140)
.stroke({ color: new SVG.Color({
  h: 300,
  s: 100,
  l: 0
}), opacity: 0, width: 1 });
rect.transform({rotate: 70});
rect.animate().attr({ fill: new SVG.Color({
  h: Math.random()*360,
  s: 100,
  l: 80
})})
.transform({
    rotate: 360})