Random lines

100%

✓ Published2🌍 Public

Last edited Jan 3, 2024

Created on Jan 3, 2024

Forked from Fork of Random Squares and circles

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.

AI-generated description

Demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Random Squares

Random Squares demonstrates SVG shape generation by populating a 1000×1000 canvas with 500 randomly positioned, sized, and colored rectangles. Each `<rect>` element receives a random RGB fill, a random x/y coordinate within the viewport, and a random width and height up to 50 pixels. The code uses vanilla JavaScript with `Math.random()` to compute values and `document.querySelector('svg').innerHTML` to append shapes directly to the SVG DOM. The result is a dense, chaotic mosaic of overlapping squares with no underlying data or interaction, showcasing basic SVG rendering through a simple procedural loop.

NNita

82% match

Loading thumbnail…

Random lines

The visualization displays a dense field of 800 randomly colored, semi-transparent lines radiating from a central point, creating a chaotic, abstract burst of color. Each line is positioned using trigonometric functions with randomized radius values, and its stroke color is generated via the `rgb()` function with random values. The SVG elements are appended using D3.js v6, with the main group rotated 90 degrees and translated to center the composition. The lines are rendered statically with a stroke-width of 5 and opacity of 0.5, creating overlapping visual depth.

NNita

81% 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

80% match

Loading thumbnail…

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.

NNita

80% match

Loading thumbnail…

Filled lines art - 1

A single, organically curved line rendered in SVG snakes across the canvas, enclosed by a semi-transparent fill of randomly generated RGB color. Built with D3 v7, the example generates 999 random coordinate pairs, passes them through `d3.line()` with a `curveBasis` interpolation, and appends the resulting path to an SVG group. The fill color is computed via `Math.random()` at render time, creating a unique, vibrant shape on each page load.

NNita

79% match

Loading thumbnail…

Random Path

This example renders a dense composition of randomly positioned circles and connecting line segments on a gray SVG canvas. The visualization repeatedly maps an array of numbers from 0 to 10 through nested map operations, generating overlapping shapes at coordinates computed with `Math.random()`. Each circle uses a computed `rgb()` fill color derived from its index, while paths are stroked with varying gray shades. The React component renders the SVG directly, with no external data source, producing an abstract, generative pattern.

NNita

78% match

Loading thumbnail…

Random Path

This example displays a dense cluster of overlapping circles and polylines drawn across a gray SVG canvas. The visualization uses React to render a grid of 10x10x10 elements, each generating random coordinates for its circle and path positions. Colors are derived from the loop variable, creating a gradient of reds and grays. The code relies on React’s `ReactDOM.render` and JSX to construct the SVG, with no external data source or animation, resulting in a static, chaotic composition of geometric primitives.

NNita

77% match

Loading thumbnail…

Something with D3

This example uses D3’s `line` generator to draw 40 random black polylines, each with seven vertices, on an SVG canvas sized to the browser window. A radial gradient defined in `<defs>` fills the background with a smooth transition from grey to dark grey. The code generates coordinates using `Math.random()` and appends each path with a 2-pixel stroke.

IIgorGorin00

77% match