Skip to main content
SimilarExport ZIP
100%

Pseudo Bar Chart using Figma

✓ Published0🌍 Public
KKamen Yin
Last edited Dec 9, 2023
Created on Dec 9, 2023

A pseudo bar chart displays four categories, labeled with Japanese characters, alongside horizontal bars of varying lengths to suggest a quantitative comparison. The chart is rendered as a fixed SVG, generated from a Figma design, and embeds the bars and text directly within the markup. It uses a custom web font, Shizuru, for the labels. The SVG relies on basic `rect` elements with rounded corners and `text` elements, with no underlying dataset or interactive behavior.

AI-generated description

A pseudo-visualization of a slope graph, which shows change over 2 points in time. It was created in Figma which generated the SVG copied here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Psuedo bar chart SVG from Figma

This example shows a pseudo bar chart rendered as static SVG rectangles on a gray background, with black bars of varying heights and positions representing categorical data values. The visualization relies on raw SVG elements—specifically `<rect>` tags—defined directly in the HTML, with fixed pixel coordinates and dimensions supplied from a Figma design. The code uses no JavaScript charting library; instead, it employs plain SVG and CSS styling within a React context. The layout is hardcoded, not generated from a dataset, and the bars’ heights and x-positions are manually set in the markup.

NNita
84% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart displays six vertical bars of varying heights across a dark background, suggesting categorical data without axes or labels. Each bar is a simple SVG `<rect>` element positioned manually, with heights that imply quantitative differences between groups. The chart uses no JavaScript libraries or data binding; instead, it relies on hardcoded SVG coordinates and dimensions, with a fixed viewport of 802 by 368 pixels. The bars are rendered directly in the HTML, created in Figma and exported as static SVG markup.

AAllison Leggett
84% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart renders four vertical bars in red, blue, yellow, and green, each paired with a black letter label (A–D) beneath it. The bars vary in height and vertical offset, suggesting categorical values without an explicit scale or axes. Built with plain SVG, the visualization uses static `rect` and `text` elements inside an `svg` container, with styling applied via CSS using the Share Tech font and a white background. No JavaScript libraries are involved; the chart relies entirely on hard-coded coordinates.

SSam Hege
83% match
Loading thumbnail…

Pseudo Bar Chart

Four simple SVG rectangles form an approximate bar chart, creating a pseudo-visualization of categorical values. The chart uses hardcoded coordinates and heights to simulate bars of varying magnitudes, with no axes or labels. Each rectangle is drawn directly via SVG `rect` elements inside an inline `<svg>` tag, with positioning and dimensions set manually. The rendering relies purely on static SVG markup with no JavaScript libraries, CSS styling only affecting the page body, and the bars arranged horizontally across a 960 by 500 pixel canvas.

Aajoua
83% match
Loading thumbnail…

Figma Chart

The chart displays a bar-chart taxonomy inspired by the DataViz Project, comparing multiple categories with rounded horizontal bars. Rendered as pure SVG, it uses inline `<rect>` and complex `<path>` elements to draw each bar with a layered, glossy highlight effect. The design relies on a custom Poppins typeface for text. Underlying data is represented through shape coordinates, with the rendering achieved through raw SVG markup, capturing a stylized, two-tone appearance for each bar.

Vvmistry94@gmail.com
83% match
Loading thumbnail…

Pseudo bar chart

The visualization presents a pseudo bar chart built from four rectangular bars of varying heights, each rendered as a static SVG element. It uses raw SVG `<rect>` shapes within an HTML page, with CSS styling for hover effects on circles. The chart relies on basic JavaScript and CSS, with no external charting library, instead encoding categorical data through bar lengths. The backdrop is a white canvas, and the bars are positioned to create a simple, unlabeled comparison.

NNico-Nico
83% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart displays categorical data as horizontal bars with varying widths to imply values. Each bar is drawn as an SVG `<rect>` element, with a dark background and distinct fill colors including gold, green, white, maroon, and a blank entry. The chart renders entirely through static SVG markup, without any data-binding or interaction libraries, and uses the Aboreto font for category labels (A through E) via Google Fonts. The code relies solely on native SVG elements and CSS transitions for styling, presenting a minimal, non-dynamic visualization.

Ssz2036
82% match
Loading thumbnail…

Pseudo bar chart

A pseudo bar chart represents categorical data with four wide bars labeled A through D, using varying bar widths to encode values. Built as a static SVG, the visualization uses plain `rect` elements for the bars and `text` elements for category labels, with the first bar distinguished by a white fill and thick black stroke. The rendering relies solely on inline SVG styling and HTML, with no JavaScript libraries or data-processing APIs involved.

KKhanin Sisaengsuwanchai
82% match