Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of SVG Creation

✓ Published0🌍 Public
RRahulray12
Last edited Sep 19, 2023
Created on Sep 19, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
90% 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
89% match
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
88% 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
86% match
Loading thumbnail…

SVG Creation

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.

HHelip3
82% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a collection of basic SVG shapes arranged in an overlapping composition, including circles, rectangles, lines, and paths. The visualization uses raw SVG elements within an HTML document, with shapes styled through fill and stroke attributes. The code creates visual layering effects by placing semitransparent or fully opaque circles of different colors at various positions, alongside thickly stroked rectangles and geometric paths. The rendering relies entirely on the browser's native SVG support through the `<svg>` element, with no external JavaScript libraries or data sources involved.

Aadventuresenglish.info@gmail.com
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
78% match
Loading thumbnail…

Fork of Fork of Random lines

This example displays 500 randomly generated quadratic curves within a 1000-by-1000 SVG canvas. Each curve connects two random points using a quadratic Bézier path, with a stroke color randomly selected from the full RGB spectrum and a fixed stroke width of 2. The code creates SVG `path` elements programmatically via `document.createElementNS` and appends them to the DOM, using the `d` attribute to define the path geometry. Rendering is purely SVG-based, with no external data source or animation.

NNita
78% match