Spiral Intersection Design

100%

Spiral Intersection Design

✓ Published0🌍 Public

Last edited Oct 1, 2020

Created on Oct 1, 2020

Forked from Pentagon

A spiral of intersection emerges from concentric black and white circles, with a web of white lines radiating from the center and connecting points around a circular path. The design uses D3 v5 to generate 25 points, map them into spokes, and create wheel-like connections between every ninth point. Built with SVG, the code draws these lines with a stroke width of five, layered over the static circle pattern, all rendered against a black background.

AI-generated description

A spiral design constructed from SVG by Math using D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Spiral Visualization with D3

This example renders a colorful spiral of 50 circles connected by thin, semi-transparent lines. Generated procedurally using trigonometric functions, the circles vary in size and hue, creating a dynamic, decorative pattern against a dark background. The visualization is built with D3 v7, using selections and data joins to efficiently draw and update both the `<circle>` and `<line>` elements. The code recalculates the layout on window resize to maintain its centered composition.

VVinayak Revankar

79% match

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Mmbostock

76% match

Loading thumbnail…

spinning-spiral

A spiral of white line segments rotates continuously, expanding and contracting as its radial offset shifts over time. The animation uses D3’s `d3.timer` to update an array of 480 points each frame, computing polar coordinates with `d3.scale.linear` for angle and distance, then rendering them as SVG `path` elements with `join('L')`. The code draws a single path whose data changes cyclically based on a sine wave, producing a smooth pulsing motion against a dark background.

11wheel

74% match

Loading thumbnail…

Circular Layout

The example shows a circular pattern of 180 radial spokes, each containing ten small circles that recede and shift in color outward from the center, producing a sunburst-like mandala effect. It uses D3 v3 to generate the SVG structure, with each spoke rotated incrementally via `transform` attributes. Circle positions and fills are mapped linearly through `d3.scale.linear`, transitioning from brown to steelblue along a radius of 180 to 240 pixels. All shapes have black strokes, and the rendering relies on SVG elements created through data joins on `d3.range` values.

Mmbostock

74% match

Loading thumbnail…

circle-lines

Nine circles arranged in a grid have points that orbit their centers, connected by lines between every pair of circles. The lines form a dynamic, web-like pattern that evolves over time. Built with D3.js, the visualization uses a canvas element with the `globalCompositeOperation` set to `xor` to create the intersecting line effects. An animation loop driven by `d3.timer` updates the positions of the orbiting points and redraws the connections, creating a continuously changing geometric composition.

11wheel

72% match

Loading thumbnail…

Fork of Circles with D3

This example renders a generative spiral of 500 semi-transparent circles that grow and shift in a golden-hued gradient across a pale green canvas. The visualization uses D3 v7’s `select` API and the `.join()` operator to declaratively create and update an SVG, computing each circle’s `cx`, `cy`, `r`, and `fill` from sine and cosine functions of its index. The code demonstrates D3’s modern “join” pattern for idempotent state management, with the container’s dimensions driving the spiral’s center and radius.

MMatt Hagger

72% match

Loading thumbnail…

My Fork of Circles with D3

This example generates an animated spiral galaxy of 420 circles in SVG using D3 v7. Each circle is positioned at a radius proportional to the square root of its index and an angle based on the golden angle, with colors assigned via `d3.interpolateRainbow`. The circles transition from radius zero to their final size with staggered delays, followed by an infinite sinusoidal pulse animation using `transition.attr`. The visualization is centered in a fixed container with a light green background, rendering purely through D3’s data join and transition APIs in an ES module.

Ccsabavath@wpi.edu

71% match

Loading thumbnail…

MZ Fork of Circles with D3

Ten circles are arranged in a spiral, expanding outward from the center of the canvas against a pastel green background. Each circle uses a different radius, position, and color from a repeating palette of red, white, and blue. Built with D3.js, the code employs the `select` API and the General Update Pattern with `selectAll`, `data`, and `join` to create and style the SVG elements, with positions calculated using trigonometric functions on the container’s dimensions.

Mmzujewski@wpi.edu

71% match