SVG Creation

100%

✓ Published1🌍 Public

Last edited Oct 29, 2022

Created on Oct 28, 2022

This example generates an abstract, colorful spiral of concentric quadrilateral polygons directly on a blank black page. It creates an SVG namespace using `document.createElementNS`, sets its dimensions to the full window, and appends it to the body. A loop of 60 iterations positions and sizes each polygon, with its stroke color derived from a hue value that increments by 5 per step. The polygons are rendered with transparent fills and thin, brightly colored outlines.

AI-generated description

SVG test

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Creation

This example generates a colorful, geometric spiral composed of 60 semi-transparent polygons. Each polygon is dynamically positioned and scaled using a series of mathematical calculations based on a loop index, creating a hypnotic, expanding pattern against a black background. The code constructs SVG elements directly using the standard DOM API, specifically `createElementNS` and `setAttribute`, without relying on a visualization library. The polygons’ stroke colors are determined by incrementing hue values in the `hsl()` color function, while their fill opacity is set to zero to emphasize the line-based structure. The animation is purely static, with no interaction or data-driven input.

FFloAvio

85% match

Loading thumbnail…

Fork of SVG Creation

A spiral of nested quadrilateral polygons radiates outward from a shifting center point. Each frame draws one polygon, with its vertices skewed by angle-based transformations, producing a twisted, 3D-like ribbon effect. The polygons are stroked in a rainbow of hues (hue increments by 5 per iteration) on a black background, with fully transparent fills, so only the colored outlines are visible. This entirely uses the SVG DOM API via `document.createElementNS` and `setAttribute` to construct a black-background SVG of about 60 rings directly in the browser window.

KKarreb94

84% match

Loading thumbnail…

Fork of Fork of Fork of SVG Creation

This example generates a colorful, geometric composition of overlapping, distorted quadrilateral polygons on a black background, creating a hypnotic, spiral-like visual effect. Each of the 60 polygons has its stroke color hue shifted incrementally, cycling through the spectrum. The code uses vanilla JavaScript to create SVG elements via `document.createElementNS` and sets attributes like `points`, `fill-opacity`, and `stroke` directly. No external libraries are used; the SVG is appended to the body, with the canvas size set to the full window dimensions.

RRahulray12

82% match

Loading thumbnail…

Fork of Fork of SVG Creation

This example generates a geometric animation using raw SVG polygons, constructing 60 quadrilateral shapes that shrink and shift diagonally across the viewport. Each polygon’s vertices are calculated from a moving center point, with size and position modified by index-based formulas. The code uses the DOM `document.createElementNS` API to append SVG elements directly—no D3 library is imported—and applies a rainbow stroke color via HSL values that increment per shape. The page fills the entire browser window with a black background, rendering the hollow outlines without fill.

CChartat aGlance

82% match

Loading thumbnail…

Fork of Fork of SVG Creation

A black canvas displays a single, expanding spiral of sixty translucent, outlined polygons. The shapes grow larger and shift position with each iteration, while their stroke colors cycle through the HSL color space, creating a vibrant, dynamic gradient. The visualization is built with raw JavaScript using the `document.createElementNS` method to generate SVG polygon elements, and it relies on the D3 library only for the initial page setup via `d3.select`. The code explicitly sets `fill-opacity` to zero, making the polygons hollow outlines.

RRahulray12

79% match

Loading thumbnail…

SVG Fundamentals

This example showcases a generative composition of triangular polygons arranged on a 960x500 SVG canvas. The visualization demonstrates fundamental SVG shapes and CSS styling, where each polygon is explicitly defined with coordinate points and filled with a gradient of teal colors. The code utilizes native HTML, CSS, and JavaScript, with CSS transitions and hover effects that adjust polygon opacity. The design creates a geometric abstract mosaic, emphasizing how SVG elements can be structured and styled directly within a browser environment without external libraries.

Rrlietz

77% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental Scalable Vector Graphics (SVG) shapes rendered directly within an HTML document. It shows a pink circle, a yellow rectangle with a navy border, a black diagonal line, and a red polyline path composed of relative line commands. The visualization relies on the native SVG element namespace inside an HTML file, using attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and the `d` path data syntax to define each shape's geometry and styling without any external libraries.

Aanqiwoo

75% match

Loading thumbnail…

mySVGwork

This example displays a full-screen SVG canvas filled with one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart. The code generates the graphic dynamically using the Document API's `createElementNS` method to construct SVG elements. The rectangles span the entire height of the browser window, creating a striped pattern that responds to the current viewport dimensions. The rendering approach uses a simple loop to position each shape incrementally across the horizontal axis.

DDonald Bagwell

75% match