JSFiddle - React, Tailwind, and code Playground

by linzoey

JavaScript

var draw = SVG().addTo('body').size(1920, 1080)
// Function to generate a random number between 0 and 2
function getRandomSize() {
  return Math.random() * 2;
}

// Create a circle with a random size
function createRandomShape() {
  var size = getRandomSize();
  var shape;

  if (size > 1) {
    shape = draw.path('M15.422,18.129l-5.264-2.768l-5.265,2.768l1.006-5.863L1.64,8.114l5.887-0.855 l2.632-5.334l2.633,5.334l5.885,0.855l-4.258,4.152L15.422,18.129z').fill('none').move(this.xPosition+120,this.yPosition+80).scale(2).stroke({ color: 'black', width: 1, linecap: 'round', linejoin: 'round' });
  } else {
    shape = draw.path('M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z').fill('none').move(this.xPosition+ 115,this.yPosition+ 78).stroke({ color: 'black', width: 2, linecap: 'round', linejoin: 'round' });
  }

  return shape;
}

// Create an initial random shape
var currentShape = createRandomShape();

// Example of changing the shape based on the random size
setInterval(function() {
  currentShape.remove();
  currentShape = createRandomShape();
}, 2000); // Change the shape every 2 seconds