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)

16bf9815632649849a094bae9350d3a7

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 Demo

This simple web application displays an SVG circle in the center of the page.

  • The circle is blue (#3498db) by default
  • When you hover over the circle, it turns red (#e74c3c)
  • The circle is centered in a 400x400 SVG container