JSFiddle - React, Tailwind, and code Playground

by linzoey

JavaScript

/*  // Include SVG.js library in your HTML file first
 
 // Create an SVG canvas
 var draw = SVG().addTo('body').size(300, 150);
 
 // Triangle properties
 var triangleSize = 20;
 var triangleSpacing = 50;
 
 // Create 10 triangles in a 5x2 grid
 for (var i = 0; i < 10; i++) {
    // Determine if the triangle should be bigger
    var isBigger = Math.random() < 0.2; // 20% chance of being bigger
 
    // Set the triangle size based on the condition
    var size = isBigger ? triangleSize * 1.5 : triangleSize;
 
    // Create the triangle
    draw.polygon([0, 0, size, 0, size / 2, size]).move((i % 5) * triangleSpacing, Math.floor(i / 5) * triangleSpacing);
 } */

  function drawCircles(y) {
    for (let i = 0; i < 5; i++) {
      draw.circle(20).move(30 + i * 40, y);
    }
  }

  // Create an SVG container
  const draw = SVG().addTo('body').size(300, 150);

  // Draw three lines of circles using the function
  drawCircles(30);
  drawCircles(70);
  drawCircles(110);