Skip to main content
SimilarExport ZIP
100%

Basic Shapes in SVG

✓ Published0🌍 Public
Tthenlpstudent
Last edited May 28, 2023
Created on May 6, 2023
Forked from HTML Starter

A black-and-white animation of concentric circles expands and contracts around a central point, with the radius cycling through increasing values. The SVG is manipulated entirely through basic JavaScript, creating and appending circle elements in a loop of alternating colors. The animation uses `setInterval` to update the state every millisecond, while `document.createElementNS` and `setAttributeNS` build each circle with the SVG namespace. The code defines a custom `computeState` function to progress the radius and delta, with the loop resetting when the radius exceeds 400.

AI-generated description

Artwork generated via basic JS SVG manipulation

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements in a web page, using static circles and a rectangle to illustrate basic attributes. The code uses plain HTML and JavaScript within a minimal setup, with an SVG canvas of 900 by 500 pixels. It shows a default black circle, a red-filled circle at adjusted coordinates, and a green-stroked rectangle with a thick stroke width of 20. The example highlights how CSS and JavaScript interact with inline SVG markup.

Rrobdavidson01
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational SVG graphics with nested circles forming a target-like shape and two animated curved paths. It shows how basic geometric primitives combine to create a visual hierarchy, with the outer circle acting as a frame and inner circles layered by size and fill color. The paths use quadratic Bezier curves and animate their opacity through SVG’s native `<animate>` element, specifying keyTimes and values over a ten-second loop. The code relies on raw SVG markup and a small JavaScript console log, with no external libraries or data binding.

Tthedatacurious
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, displaying a series of circles positioned within an SVG element. It shows how basic geometric primitives are defined using SVG attributes such as `cx`, `cy`, and `r`. The code uses plain HTML and JavaScript, with no external libraries or frameworks, to illustrate the core syntax of SVG. The rendering approach relies on the browser’s built-in SVG support, and the incomplete second circle hints at the manual construction of markup. No data source is involved, as the visualization is purely illustrative of SVG fundamentals.

Jjedzome
80% match
Loading thumbnail…

SVG starter

This example shows six circles positioned at scattered coordinates across an SVG canvas, demonstrating basic static shapes in a 960-by-500 pixel space. The circles vary in placement but share a uniform radius, creating a simple dot pattern with no interaction or animation. The code uses raw SVG elements directly in an HTML document, without any JavaScript libraries or data-binding. It relies on hard-coded circle coordinates and the standard SVG rendering pipeline, serving as a minimal starting point for more complex visualizations.

UUnknownLearn
80% match
Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com
80% match
Loading thumbnail…

SVG Fundamentals

This example displays a series of black circles arranged diagonally across a light background, created entirely with inline SVG elements. The page uses direct SVG markup within an HTML document, with each circle defined by its center coordinates (cx, cy) and radius (r), all filled with the color #0E0E0E. The visualization demonstrates fundamental SVG shape creation and positioning without any external libraries, relying on the native SVG rendering within the browser. The circles are placed at varied coordinates, showing how basic geometric primitives can be composed into a larger visual layout.

YYasen
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a grid of solid-color circles arranged to show basic SVG shape construction and layering. It uses inline SVG markup within an HTML document to render ten circles with varying radii and colors, including a stack of nested circles at the right center. The circles are positioned using explicit `cx` and `cy` coordinates, with `fill` attributes defining their color. No external libraries or JavaScript are involved; the rendering relies entirely on the browser’s native SVG support, making it a static, code-only illustration of fundamental vector graphics primitives.

WWannabeProgrammerr
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG by rendering a single circle shape. The code uses the basic SVG `circle` element with `cx`, `cy`, and `r` attributes to define its center coordinates and radius within an inline `<svg>` container. No external JavaScript libraries are involved; the scaffolding is plain HTML with no styling or interaction. The visualization serves as a minimal, static illustration of how vector graphics are structured, showing only a filled black circle positioned at the top-left of the viewport.

Ggrinvaldsjanis
79% match