Circular Geometric Patterns

100%

Circular Geometric Patterns

✓ Published2🌍 Public

Last edited Nov 19, 2019

Created on Nov 18, 2019

This interactive visualization cycles through circular geometric patterns, drawing a series of overlapping circles and a connecting polyline at the center of an SVG canvas. The pattern evolves automatically as a timer increments both the number of nodes and a "skip factor" that determines the angular spacing between points. Built with React and D3 v5, it uses `d3.range`, `d3.line`, and `d3.curveLinearClosed` to generate points along a circle and construct the path, while React's `useState` and `useEffect` drive the animation loop.

AI-generated description

Experiments with geometric patterns. Developed in collaboration with Eric Rodenbeck.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circular Geometric Patterns

This animated example generates circular geometric patterns by placing points along a circle and drawing both the connecting polygon and overlapping circles around each point. As the animation runs, a continuously increasing skip factor and node count alter the points’ positions, producing evolving abstract shapes. The visualization uses React for state management and rendering, with D3’s `line` and `curveLinearClosed` to create the polygon path, while each circle’s radius is calculated from the distance between the first two points. The scene is rendered as SVG, with a blue semi-transparent outline tracing the polygon and gray strokes for the circles.

EEric Rodenbeck

91% match

Loading thumbnail…

Circular Geometric Patterns

A grid of overlapping circular geometric patterns radiates from the center of an SVG canvas, each layer composed of translucent circles and a blue polyline connecting nodes arranged around a circle. The visualization iterates through combinations of node counts and skip factors, generating distinct starburst-like shapes. Using React, it renders each pattern as a `Star` component that computes node positions with trigonometry and draws circles plus a `d3.line` path with `curveLinearClosed`. The code leverages `d3.range` to generate data and controls parameters like radius and center coordinates.

CCurran Kelleher

90% match

Loading thumbnail…

Circular Geometric Patterns

This example renders a circular geometric pattern by plotting 9 points along a sine-cosine path and connecting them with a closed polyline. The visualization uses React to manage the SVG output and d3’s `line` generator with `curveLinearClosed` to draw the path, while each point also gets a circle centered on it with a radius equal to the distance between adjacent points. The result is a layered, symmetric composition of overlapping rings and a bold blue stroke, all rendered in a 960px square SVG canvas.

CCurran Kelleher

90% match

Loading thumbnail…

Circular Geometric Patterns

This example renders a geometric pattern of eight circles arranged in a circular layout, with a blue polyline connecting their centers. Using React and D3 v5, the code computes circle positions from trigonometric functions, sizes each circle by the segment length between adjacent points, and draws the connecting path via `d3.line` with `curveLinearClosed`. The static SVG visualization is centered on a 960×960 canvas, with circles stroked in light gray and the polyline highlighted in blue.

EEric Rodenbeck

89% match

Loading thumbnail…

Circular Geometric Patterns

Five circles appear around the center of an SVG, each drawn at a radius influenced by a factor of seven and connected by a closed polyline. The circles are sized by the distance between the first two points, creating an overlapping geometric composition. Implemented with React and D3 v5, the visualization uses `range`, `line`, and `curveLinearClosed` to generate the points and path, with the circles and stroke rendered directly as SVG elements. The example explores ordered circular symmetry through minimal code.

Mmshoer

89% match

Loading thumbnail…

Circular Geometric Patterns

The visualization displays a grid of circular geometric patterns formed by connecting points on a virtual circle. Based on the Vedic Square concept, each cell plots lines between nodes using varying skip factors and node counts, with thin orange strokes over light gray circles on a muted background. Built with React and D3 v5, it uses the `range()` and `line()` APIs with `curveLinearClosed` to generate star-like polylines, while SVG `<circle>` elements are rendered per node. A CSS blur filter softens the overall appearance.

Ssofia-martinovich

89% match

Loading thumbnail…

Circular Geometric Patterns

A dense grid of circular geometric patterns fills the screen, each cell containing a star-like figure formed by red outlines over filled circles. The patterns are generated algorithmically, varying the number of nodes and skip factors that control point placement along a circle, with radius fixed. Built with React and D3 v5, the visualization maps each combination of parameters to a position in the grid, using D3’s `line` generator with `curveLinearClosed` to draw the star paths and SVG circles for the filled nodes.

Ssofia-martinovich

85% match

Loading thumbnail…

Circular Geometric Patterns

A grid of circular geometric patterns fills the screen, each composed of a blue polygonal path nested within a set of gray rings. The visualization uses React to render SVG elements, with each individual pattern generated by a `Star` component that computes node positions using trigonometric functions, drawing concentric circles and a connecting line via D3’s `line` and `curveLinearClosed`. The grid layout varies parameters like node count and skip factor across rows and columns, producing a systematic exploration of star-like forms.

EEric Rodenbeck

85% match