Skip to main content
SimilarExport ZIP
100%

Fork of Fork of SVG Creation

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

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
90% 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 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
87% 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
85% 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
79% match
Loading thumbnail…

Fork of SVG

A fork of SVG renders a full-screen canvas of one hundred vertical black bars. The visualization shows a rigid, rhythmic grid that fills the viewport, created entirely through the Document Object Model (DOM) and the SVG `rect` element. The script uses JavaScript’s `document.createElementNS` with the SVG namespace to dynamically generate each rectangle, setting its `x` position, fixed `width`, and `height` equal to the window’s height. The bars are placed sequentially every twenty pixels, resulting in a stark, minimalist composition that directly reflects the numeric loop in the code.

KKhanin Sisaengsuwanchai
79% match
Loading thumbnail…

Fork of SVG Fundamentals

The fork demonstrates basic SVG shape construction inside a plain `index.html` file, using the SVG element itself without any external libraries. It renders two overlapping circles to show layering and opacity effects, a straight line segment, and two paths with explicit coordinate data to illustrate line drawing and path commands. The code is primarily a static, hand-authored SVG canvas, with one path containing a complex cubic Bézier curve sequence and another tracing a simple polylined route.

Rrsrivastav54
78% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A fork of an SVG and CSS example, this visualization uses a blank 960x500 SVG canvas as its starting point. The code defines an SVG structure and applies styles through an external stylesheet, with classes for lines and paths that set stroke colors and line properties. Using D3.js to select the SVG element, the example primarily demonstrates how to set up a basic SVG-based visualization scaffold, with the JavaScript beginning to style the background color. The HTML file links the stylesheet and the D3-driven script, showing a minimal setup for SVG rendering.

PPaul Kot
78% match