Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of HTML Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

1448b711163b4bdbac440bb1a5432077

Open

Fork of Fork of HTML Starter

0 stars0🌍 Public
NNita
Last edited Jun 1, 2025
Created on Jun 1, 2025

This example displays 50 randomly positioned and sized blue circles inside a 400x400 SVG canvas. The circles turn red on hover, and clicking anywhere on the page clears the canvas and generates a fresh set of random circles. The application uses direct SVG element manipulation with the JavaScript Document API, creating and removing circle elements via `createElementNS` and `appendChild`. Styling and hover transitions are handled through CSS.

AI-generated description

Circle Playground

This web application displays multiple SVG circles with random sizes and positions.

Features:

  • 50 random blue circles of varying sizes
  • Circles turn red when hovered over
  • Click anywhere on the page to generate a new set of random circles
  • Circles are contained within a 400x400 SVG container