Skip to main content
SimilarExport ZIP
100%

Fork of SVG Creation

✓ Published0🌍 Public
KKarreb94
Last edited Oct 31, 2022
Created on Oct 31, 2022
Forked from 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.

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
87% 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
86% 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
85% 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
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
84% match
Loading thumbnail…

Fork of SVG Fundamentals

A grid of dark red curving path lines emanates from the left edge, fanning outward diagonally across a white canvas. The paths use SVG `path` elements with quadratic Bézier curves (`Q` commands) and relative `t` commands to repeat horizontal offsets, creating a woven, ripple-like pattern. The strokes are set to `fill="none"` with varying dark red hex colors, while a single red circle appears at the top center. The SVG viewport is 960 by 500 pixels, and the body uses `margin: 0` and `overflow: hidden` to frame the graphic cleanly.

YYi Ning
75% 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
75% 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
75% match