Pseudo Circle Packing

100%

Pseudo Circle Packing

✓ Published3🌍 Public

Last edited Mar 20, 2021

Created on Mar 16, 2021

A pseudo circle packing visualization displays nested and overlapping circles in a black-and-white composition, with labeled regions from A to W. The SVG rendering uses hardcoded circle elements with fixed coordinates and radii, rather than algorithmic packing. Text labels and white fills on select circles create visual hierarchy. The design was created in Figma and embedded directly into the HTML, with styling applied through CSS using the Share Tech font.

AI-generated description

A pseudo visualisation of circle packing.

Shapes generated in Figma, text added in VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Circle Packing

A pseudo circle packing visualization displays nested and overlapping circles in pink, white, and black, with letter labels from A to W. The SVG shapes are manually positioned, not generated algorithmically. The code uses raw SVG `<circle>` and `<text>` elements, with styling from CSS, featuring the Share Tech font. The circles appear to be pre-computed in Figma and exported, rather than computed dynamically.

FFangda Qiu

91% match

Loading thumbnail…

DanFork of Pseudo Circle Packing

The visualization is a static pseudo-circle-packing diagram, presenting a nested arrangement of circles labeled with letters. It shows how circles can be packed to suggest a tree-like or fan-like structure, with some circles filled white and others left transparent to create contrast. The graphic is rendered as an SVG, with all shapes manually defined via `<circle>` elements and text labels added. The code uses specific Cartesian coordinates for each circle, with styling and font control via CSS and the 'Share Tech' font.

DDanDecoito

82% match

Loading thumbnail…

Pseudo Scatter Plot

This example shows six circles arranged diagonally across a white SVG canvas, creating a minimal pseudo-scatter plot. The circles are placed at fixed coordinates, with no axes or data mapping. The visualization uses raw SVG elements—a `<rect>` background and `<circle>` shapes—without any JavaScript libraries. The code is generated from Figma exports, as noted in the README, and rendered directly in the browser via static SVG markup. Each circle has a radius of 33.5 pixels, and their positions suggest a loose downward trend from left to right.

AAllison Leggett

75% match

Loading thumbnail…

Pseudo Visualizations

Seven circles in a square SVG canvas appear as a pseudo network visualization, with each node represented by a circle of identical radius. The circles are placed at varying coordinates, creating an organic, scattered layout that resembles a graph without connective edges. The example uses static SVG elements—rect and circle—rendered directly in HTML markup, with no JavaScript framework or data binding. The white background rect anchors the visualization, while the unpositioned circles suggest a minimal, unfinished force-directed simulation.

JJun Alvarado

75% match

Loading thumbnail…

Circles with SVG

This example displays twelve pastel-colored circles scattered across an SVG canvas, each positioned at fixed coordinates with varying radii. The visualization demonstrates static SVG rendering with a simple, decorative composition, using no external libraries or JavaScript for interaction. The circles are defined directly in markup with individual `fill` attributes, while CSS centers the SVG on a light gray background and applies a subtle shadow and rounded corners. The code relies on basic SVG elements and inline styling, with `index.js` containing only a placeholder console statement.

223100098@lums.edu.pk

74% match

Loading thumbnail…

Pseudo scatter plot

This example shows a simple pseudo scatter plot: twelve black circles positioned on a white background. The visualization approximates a scatter plot without using axes, scales, or data mapping. The SVG markup directly specifies each circle’s center coordinates and radius using the `circle` element with `cx`, `cy`, and `r` attributes. The fixed size, the positioning, and the uniform styling suggest a hand-authored or generated layout rather than a data-driven projection. The graphic relies entirely on static SVG rendering without JavaScript libraries or interaction.

KKhanin Sisaengsuwanchai

74% match

Loading thumbnail…

Untitled

This example shows a nested set of concentric circles centered on a 550 by 550 SVG canvas, with the two largest circles filled in pale pink and thinner grey outlines marking the inner radii. The visualization uses only static SVG elements—specifically `circle` tags with explicit pixel coordinates—so no JavaScript libraries or data-binding frameworks are involved. The rendering approach relies on basic SVG attributes like `fill`, `stroke`, and `r` to create a simple radial hierarchy, suggesting a possible target for force-directed or layered layout experimentation, though no dynamic behavior is present.

AAdrSieber

73% match

Loading thumbnail…

Circles Pack

This visualization shows a large grid of concentric circles arranged in a repeating pattern across an SVG canvas. The circles are drawn with green outlines, a stroke width of 8, and 0.8 opacity, creating a dense, mosaic-like texture. The code uses React to render the SVG elements, with a custom `Circles` component that wraps the native SVG `<circle>` element. It generates 20 distinct radii and maps them over a 5×5 grid of positions, scaling the entire group by 0.4. ReactDOM mounts the tree to the DOM, and the page uses the UMD production builds of React 16.10.0.

NNita

73% match