Fork of Random lines

100%

Fork of Random lines

✓ Published1🌍 Public

Last edited Jan 3, 2024

Created on Jan 3, 2024

This example displays a grid of 500 randomly generated quadratic curves, each drawn as an SVG path with a random color and size. The visualization demonstrates fundamental SVG shape creation using the raw DOM API, specifically `document.createElementNS` and `setAttributeNS` to construct `<path>` elements with `M` and `Q` commands. The code generates random start and end points across a 1000×1000 coordinate space, assigning each curve a unique RGB stroke color and a fixed 2-pixel width, with fill disabled to show only the line outlines.

AI-generated description

Demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path

This example generates a random dataset of 1,000 coordinate pairs and renders them as a single, closed-looking curved path using the d3.line API with d3.curveBasis. One path is drawn with a semi-transparent fill whose RGB color values are randomly generated per render. The visualization runs in an SVG container with a black background, showing how generated line data can produce abstract, colorful art. The code uses d3.v7 to append the path and apply the random fill color.

NNita

81% match

Loading thumbnail…

Fork of Filled lines art - 2

This example generates an organic, gradient-filled line art piece by plotting a series of random points connected by a smooth curve. The visualization uses 1,000 data points to create a flowing, abstract shape, with the path rendered in SVG and colored with a linear gradient that transitions from red to blue. The code relies on D3 v7's `d3.line` and `d3.curveBasis` to smooth the line, while the random data is generated directly in the script using `Math.random()`.

NNita

80% match

Loading thumbnail…

Random lines

This example shows a 1000 by 1000 pixel SVG canvas filled with five hundred random lines. The lines have randomly generated start and end coordinates, and each line is assigned a random hexadecimal color. The code creates the lines dynamically using the DOM API, specifically `document.createElementNS` with the SVG namespace, and appends them to the SVG element via `getElementsByTagName`. The rendering is pure SVG, with no external libraries or data sources.

NNita

80% match

Loading thumbnail…

Fork of Cool Art : generated line data with d3 line generator api : circle on path

This visualization generates 7,000 random coordinate pairs and renders them as a dense scatter of small circles overlaid with a single curved path connecting the same points. Using D3 v7’s `d3.line()` with `curveBasis`, the code draws a smooth line through the randomized data, while each point also appears as an individual circle with randomly generated RGB fill colors. The SVG canvas has a black background, and both the path stroke and circle fills use random values from the `Math.random()` function, creating a colorful, generative art composition with no external data source.

NNita

79% match

Loading thumbnail…

Fork of Svelte + D3: Random Lines

This visualization shows 100 randomly generated lines that smoothly transition to new shapes every second. Each line is a natural cubic spline through a random walk of 100 points, rendered as a stroked SVG path with semi-transparent coloring. The animation leverages the Svelte `tweened` motion primitive combined with the `d3-interpolate-path` library to morph between path states. Svelte's reactive bindings to window dimensions and D3's `scaleLinear` and `extent` functions keep the chart responsive and properly scaled as the viewport changes.

CCurran Kelleher

78% match

Loading thumbnail…

Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path-7000 data points

This visualization generates 12,000 random data points and renders them as both a smooth, colored path using D3’s line generator with a basis curve, and as small circles at each coordinate. Built with D3 v7, the SVG displays the synthetic dataset on a black background, with semi-transparent strokes and fills assigned via random RGB values. The path is drawn first, followed by the circles, which overlay the line to highlight the distribution of the raw data points. The code demonstrates D3’s `d3.line()` API and data join for dynamic SVG element creation.

NNita

78% match

Loading thumbnail…

Fork of Random Squares and circles

This gallery item demonstrates the visual result of overlaying randomly generated SVG shapes. Using an HTML5 `<svg>` canvas, the code executes three separate JavaScript loops to populate the space with 500 `<rect>` elements, 200 `<circle>` elements, and 100 `<polygon>` elements representing triangles. Each shape receives a random RGB color from a palette generated with `Math.random()`, as well as random positioning within the 1000-by-1000 pixel viewport and a random size up to 50 pixels. The visualization showcases how combining basic geometric primitives with randomized attributes can create a colorful, abstract composition.

NNita

78% match