Pseudo Graphs

100%

✓ Published1🌍 Public

Last edited Nov 14, 2022

Created on Nov 14, 2022

This visualization uses raw SVG text elements and rectangles to construct a pseudo graph, labeling four nodes A through D vertically while drawing thick black bars at varying angles as stand-in edges. The code relies on native SVG APIs like `text` and `rect` with `transform="rotate"` to position the graph elements, with no JavaScript libraries involved. The design deliberately mimics a simple graph structure using only static HTML/SVG markup, rendered directly from a Figma export as noted in the README. The visualization demonstrates a minimal, non-interactive approach to graph representation.

AI-generated description

Making Psuedo graphs from figma export

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo

This example shows four gray bars labeled A, B, C, and D, each with different heights representing categorical values. The bars are rendered as SVG rectangles on a white background, with text elements using black fill for labels. The visualization uses a static HTML page with CSS for styling and inline SVG markup, demonstrating a minimal bar chart without any JavaScript libraries or data processing. The bars are positioned at fixed coordinates within a 361×372 viewBox, with heights varying from 120 to 328 pixels to convey relative magnitudes.

Vvalsorayksterob

80% match

Loading thumbnail…

Pseudo Graphs

Static SVG rectangles and paths form a simple bar-like chart where each shape has a distinct color and size, demonstrating basic vector graphics rendering. The page uses inline CSS to apply black strokes and varied fills, with a hover transition that gradually changes rectangle fill to midnightblue and increases stroke width over three seconds. This example shows how SVG elements can respond to user interaction through CSS transitions, with the markup structured directly in the HTML file.

DDasbach.EJ

79% match

Loading thumbnail…

Pseudo horizontal bar chart

This pseudo horizontal bar chart is a static SVG composition built directly in HTML. Four labeled bars (A, B, C, D) extend from a common left margin, each with a fixed height and varying widths to represent distinct magnitudes. The visualization relies on raw SVG `<rect>` and `<text>` elements styled with CSS, including a custom Share Tech font. A hover effect is applied to a small circle, changing its fill and stroke color via a CSS transition, though the chart itself is non-interactive.

NNico-Nico

79% match

Loading thumbnail…

Pseudo visualizations

This SVG-based pseudo visualization demonstrates typographic hierarchy through nested black rectangles on a white field. A single large black letter “A” anchors the left side, while four descending width blocks create a bar-chart-like progression. The rendering uses plain SVG elements (`rect` and `text`) with Roboto italic type, with no JavaScript libraries or data binding. The example strips visualization to geometric abstraction, where proportional rectangle widths suggest diminishing categories or values.

LLorenzo Lazzarotto

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

79% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a pseudo horizontal bar chart where three labeled bars (A, B, C) are drawn as filled black rectangles of varying widths, with large text labels positioned to their left. The visualization uses only raw SVG elements—`rect` and `text`—inside an inline `<svg>` tag, with no JavaScript or data-binding logic. The bars are hardcoded in the markup, and the chart relies on CSS (including the Share Tech font) and the SVG coordinate system to position elements, with commented-out path data suggesting an alternative icon-based labeling approach.

Iissam.benabid@gmail.com

79% match

Loading thumbnail…

Pseudo Bar Chart

This example shows a simple bar chart made from black rectangular bars labeled A through D, with each bar’s length decreasing from top to bottom. The chart is drawn using raw SVG `<rect>` and `<text>` elements in an inline `index.html` file, with no external data source. Styling relies on CSS for font family and size, and the SVG is set to a fixed 960 by 500 viewBox with white background. The bars are positioned manually via x and y attributes, and the chart demonstrates basic SVG shape rendering without any JavaScript libraries.

CCaroline Ghisolfi

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

78% match