Skip to main content
100%

mosaico - estrella de 8 puntas

✓ Published0🌍 Public
Aaaizemberg
Last edited Oct 4, 2020
Created on Mar 7, 2019

This example renders a decorative mosaic pattern of eight-pointed stars built from overlapping squares. A teal SVG background hosts white rectangles, with each star formed by two rotated square tiles repeated in a grid. The visualization uses D3 v5 to append SVG `<rect>` elements, applying `transform` attributes for positioning and rotation. Hovering highlights individual tiles in steelblue, revealing the underlying grid structure. The code defines a `prototile` function that places a base square and a 45-degree rotated square, iterating over a 10×10 grid with spacing offsets.

AI-generated description

Similar vizzes

Loading thumbnail…

Mosaic

This example generates a mosaic-like pattern of colored polygons using a Poisson disc sampling algorithm to distribute points evenly across a 960 by 500 canvas. The code then creates a Voronoi diagram from these points via `d3.voronoi`, and each resulting cell is filled and stroked with a color derived from the CIE Lab color space using `d3.lab`, based on the cell’s distance from the canvas center. The SVG paths are rendered with D3 v4, and the overall effect is a gradient of hues radiating outward from the middle.

AAjayyy
73% match
Loading thumbnail…

Mosaic II

A mosaic of hundreds of triangular tiles fills the browser window, each colored by a CIE Lab color model based on its distance and angle from the center. The tiles are generated by computing a Delaunay triangulation over a set of points sampled with a Poisson disc process, ensuring even spacing. The visualization uses the d3.v4 library, leveraging `d3.voronoi().triangles()` for the triangulation and `d3.polygonCentroid()` to determine each triangle's fill and stroke color.

AAjayyy
70% match
Loading thumbnail…

Mosaic3

This example shows a mosaic-like visualization built from a Voronoi diagram. A Poisson disc sampler generates a set of evenly spaced sample points across a 960×500 SVG canvas, and `d3.voronoi()` computes the corresponding polygons. Each polygon’s fill and stroke color are derived from its data point’s position using a `d3.lab()` color space, producing a smooth radial gradient effect from the center. The code uses D3 v4, SVG paths, and the custom `poissonDiscSampler` function.

AAjayyy
70% 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
70% match
Loading thumbnail…

Mosaic III

This visualization uses a Poisson-disc sampling algorithm to generate a set of points across a 1920×1080 canvas, which then feeds a D3.v4 Voronoi tessellation to create a mosaic of polygons. Each polygon is filled and stroked with a color derived from its centroid’s distance from the canvas center, computed in the CIE Lab color space via d3.lab. The result is a smooth radial gradient of hues across the irregularly shaped cells, rendered as SVG paths. The code relies on d3.voronoi and a custom poissonDiscSampler implementation based on Jason Davies’ algorithm.

AAjayyy
69% match
Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
69% 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
68% match
Loading thumbnail…

d3d3d3 2

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

GGusnaRWX
68% match