Skip to main content
SimilarExport ZIP
100%

Psuedo bar chart SVG from Figma

✓ Published0🌍 Public
NNita
Last edited Mar 13, 2021
Created on Mar 13, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

psuedo bar graph.

A pseudo bar graph rendered with raw SVG rectangles presents a series of vertical bars in varying shades of gray and black, ranging from light to dark, against a white background. The chart shows a set of categorical values distributed across the horizontal axis, with bar heights corresponding to the data points. This example uses hand-coded SVG primitives within an HTML file, utilizing the `rect` element to construct the visualization without any charting library or JavaScript framework.

Ffaraz189
91% 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
89% match
Loading thumbnail…

Pseudo Bar Chart

This example displays a pseudo bar chart composed of five black bars of varying heights on a white background. The bars are rendered as plain SVG shapes—using `rect` and `path` elements—positioned within a 960 by 500 viewBox. The visualization uses no JavaScript or external libraries, relying solely on static SVG markup defined in the HTML. The bars are clipped using an SVG `clipPath` to maintain a clean rectangular boundary.

EEarnAnurat
89% match
Loading thumbnail…

Pseudo Bar Chart

This example shows a pseudo bar chart with six black rectangular bars labeled A through F, rendered as static SVG elements on a white canvas. The bars vary in height and y-position to simulate quantitative values, while labels sit beneath each bar. The code uses raw SVG `<rect>` and `<text>` elements, positioned manually with pixel coordinates, and styled with the Share Tech font from Google Fonts. It demonstrates a minimal, hand-coded alternative to data-driven charting, using only HTML and CSS within a React-free setup.

Ccharlieronchetti@gmail.com
89% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart displays four black rectangles of varying heights and widths on a white background, suggesting categorical data through simple geometric shapes. The example demonstrates foundational SVG rendering with raw `rect` elements and explicit width, height, and fill attributes, all defined directly in the HTML markup. Built with React, the code uses no external visualization libraries, relying instead on static SVG coordinates to create a clean, minimalist chart. The layout follows a fixed 1512-by-982 pixel canvas, illustrating how basic shapes can communicate quantitative comparisons.

Jjinjuta.s.au@gmail.com
88% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart presents a minimalist data-visualization composition using only raw SVG elements, including rectangles and a path, to create the appearance of a bar chart without any underlying data. The chart features a series of black bars of varying heights and widths positioned on a white background, simulating a categorical or temporal comparison. The rendering relies entirely on static SVG markup within an HTML page, with no JavaScript libraries or interaction. The example demonstrates how visual structure alone can evoke chart semantics, even in the absence of axes, labels, or data-binding logic.

DDhruva654
88% match
Loading thumbnail…

Psuedo charts

This example displays four vertical bars as raw SVG `<rect>` elements, each with hard-coded positions and sizes, forming a minimal bar chart. The bars vary in height to suggest different values, though no axes or labels are included. The visualization uses plain SVG markup inside an HTML page, with CSS setting the margin to zero and hiding overflow. No JavaScript libraries or data-processing APIs are employed; the chart is purely static, relying on inline coordinates for each rectangle.

Gguththered
88% match
Loading thumbnail…

Psuedo bar chart

This example shows a bar chart with four labeled bars (A through D) of varying lengths, rendered as SVG rectangles. The first bar is styled with red fill and a thick black stroke via a CSS class that overrides its inline blue fill, while the remaining bars alternate between blue and black fills. The visualization uses raw SVG elements within an HTML page, styled using CSS rules that set the font family, size, and bar appearance. No JavaScript libraries are used; the rendering relies entirely on static SVG markup and CSS properties.

Gguththered
88% match