Circular Geometric Patterns

100%

Circular Geometric Patterns

✓ Published0🌍 Public

Last edited Aug 11, 2021

Created on Apr 4, 2021

Forked from Circular Geometric Patterns Tiled

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.

AI-generated description

Experiments with geometric patterns and the Vedic Square. Developed in collaboration with Eric Rodenbeck.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

87% match

Loading thumbnail…

Circular Geometric Patterns

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.

CCurran Kelleher

85% match