Fork of Fork of Random lines

Fork of Random lines

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.

94% match

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.

83% match

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()`.

81% match

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.

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

This example displays a generative abstract composition of overlapping, semi-transparent circles scattered across a black SVG canvas. The circles have random radii, positions, and stroke colors ranging in green and blue hues, creating a dense, layered visual texture. The code generates an array of 990 coordinate pairs using a loop that applies random scaling factors, then binds this data to circle elements. It relies on D3 v7’s selection and data join methods, with attributes set directly via `.attr()` calls, including fill, stroke-width, and stroke color derived from random RGB values.

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.

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.