Fork of Pseudo Circle Packing

100%

Fork of Pseudo Circle Packing

✓ Published0🌍 Public

Last edited Sep 28, 2022

Created on Sep 28, 2022

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.

AI-generated description

A pseudo visualisation of circle packing.

Shapes generated in Figma, text added in VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Circle Packing

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.

AAdil Zeshan

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

87% match

Loading thumbnail…

Fork of Pseudo Scatter Plot

This is a static visualization of six circles arranged in a scatter plot pattern on a white background. Each circle is rendered as a distinct SVG element with fixed coordinates and a radius of 34.5 units. The example uses plain HTML, CSS, and inline SVG to construct the chart, with no JavaScript or external libraries involved. The plot offers a simple, minimal demonstration of how SVG shapes can be positioned manually to create a data-like layout.

AAbhinash Mallick

76% match

Loading thumbnail…

Fork of Pseudo Scatter Plot

This example demonstrates the fundamental building blocks of SVG graphics, presenting seven black circles arranged at scattered coordinates across a white rectangular canvas. The visualization showcases basic vector shape creation using the SVG `<svg>`, `<rect>`, and `<circle>` elements directly inline in an HTML page. Each circle is positioned using explicit `cx` and `cy` attributes with a uniform `r` value of 50 pixels. The code relies purely on static SVG markup without any JavaScript libraries, frameworks, or external styling, providing a minimal illustration of how geometric primitives compose a simple graphical composition.

Jjinjuta.s.au@gmail.com

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

74% match

Loading thumbnail…

Fork of Fork of Circles with D3

This visualization displays seven hand-positioned circles of varying sizes and neon colors on a soft green background, with each circle semi-transparent to create overlapping depth. The code uses D3.js version 7.8.5 with method chaining and data binding via `selectAll`, `data`, and `join` to create SVG elements. Each circle's position, radius, fill color, and opacity are set through attribute accessor functions. The example demonstrates the D3 General Update Pattern within an exported `main` function that dynamically sizes the SVG to its container dimensions.

Yyashaswisanjanaaerra@my.unt.edu

74% match

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays three concentric circles in green, yellow, and blue, each nested inside the previous one. The circles are centered at the same point (100, 100) within an SVG canvas sized 4000 by 4000 pixels. The example demonstrates how to draw basic geometric shapes using SVG elements directly in HTML, with CSS controlling the font size of a message. It relies on native SVG circle elements and CSS styling for the visualization.

Ssantoshmitra-05

74% match

Loading thumbnail…

Fork of pseudo dv

This example displays a minimalist SVG composition: five dark circles scattered across a white rectangular canvas. The circles are positioned at fixed coordinates, creating a sparse, balanced visual layout. The visualization relies on raw SVG elements—`rect` and `circle`—directly embedded in an HTML page, with styling controlled by CSS. No JavaScript libraries or data-binding frameworks are used, making it a static, declarative rendering rather than an interactive or data-driven visualization.

PPeiyang Li

74% match