Circular Geometric Patterns

100%

Circular Geometric Patterns

✓ Published0🌍 Public

Last edited Nov 22, 2019

Created on Nov 21, 2019

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

More Circular Geometric Patterns

A grid of small geometric star patterns fills the screen, each rendered as a circular arrangement of crossing lines and enclosing circles. The patterns vary across rows and columns based on two parameters: the number of nodes and the skip factor that determines how points are connected. Using React components and D3’s `range`, `line`, and `curveLinearClosed`, each star is drawn as SVG paths and circles, with a blue glow added through an SVG blur filter.

CCurran Kelleher

92% match

Loading thumbnail…

Circular Geometric Patterns

A grid of circular geometric patterns demonstrates how varying two parameters creates diverse stellate forms. Each cell renders a star-like SVG constructed by plotting points along a circular path, connected by a d3 `curveLinearClosed` line, with circles centered at each point having a radius equal to the segment length. The React component uses d3’s `range` and `line` APIs within an SVG canvas, iterating through node numbers and skip factors to produce tessellated variations. The resulting composition shows systematic repetition and structural variation across the 960 by 960 pixel space.

EEric Rodenbeck

90% match

Loading thumbnail…

Circular Geometric Patterns Tiled

This visualization displays a tiled grid of circular geometric patterns, where each tile contains arcs and lines generated from Vedic Square principles. The sketch shows 11 by 12 individual stars, each computed from a specific node number and skip factor. Built with D3 v5 and React, the Star component uses D3's `range`, `line`, and `curveLinearClosed` to construct polyline paths and circles, rendered as SVG elements. The resulting patterns, drawn with a blue stroke and gray circles, emerge from varying mathematical parameters across the grid.

CCurran Kelleher

90% match

Loading thumbnail…

More Circular Geometric Patterns

This example displays a grid of 64 by 64 geometric star patterns, each generated from a Vedic Square-inspired mathematical formula. Every cell combines a varying node number and skip factor to create unique polygonal paths rendered as SVG strokes. Built with React, the code uses D3’s `range`, `line`, and `curveLinearClosed` to compute coordinates, then maps each combination into a `Star` component. The resulting visualization forms a dense, evolving matrix of blue circular forms across a dark canvas.

CCurran Kelleher

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

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

85% match