JSFiddle - React, Tailwind, and code Playground

by linzoey

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random SVG Circles</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var draw = SVG().addTo('body').size(500, 500);

            function getRandomPosition() {
                return {
                    x: Math.random() * 500,
                    y: Math.random() * 500
                };
            }

            function drawRandomCircle(size, position) {
                draw.circle(size).center(position.x, position.y).attr({ fill: 'blue', stroke: 'black' });
            }

            // Draw 3 circles with size * 2
            for (var i = 0; i < 3; i++) {
                var position = getRandomPosition();
                var size = Math.random() * 50 + 25; // Random size between 25 and 75
                drawRandomCircle(size * 2, position);
            }

            // Draw the remaining 17 circles
            for (var i = 0; i < 17; i++) {
                var position, size;
                do {
                    position = getRandomPosition();
                    size = Math.random() * 30 + 5; // Random size between 5 and 35
                } 
///while (draw.children().some(circle => circle.inside(position.x, position.y, size)));

                drawRandomCircle(size, position);
            }
        });