Ep. 2 - Pseudo Viz - MK

100%

Ep. 2 - Pseudo Viz - MK

✓ Published1🌍 Public

Last edited Aug 5, 2022

Created on Aug 4, 2022

This example shows a simple geometric composition: a light pink rectangular frame containing a single gray five-pointed star, centered within the SVG canvas. The star is drawn using an SVG `path` element with explicit coordinate commands, while the background uses an SVG `rect` element with a custom fill color. The rendering relies entirely on static SVG markup in the HTML file, with no JavaScript libraries or data-binding frameworks involved. The visualization is a minimal pseudo-visualization that demonstrates basic vector shapes without any interactive or data-driven behavior.

AI-generated description

A demo of Pseudo Viz.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep. 1 - SVG Basics - MK

This example demonstrates how to draw basic scalar vector graphics (SVG) shapes—including circles, rectangles, lines, and a path—using raw inline SVG elements. The blue and grey circles are positioned at different coordinates with a filled blue circle and a grey circle, while a stroked rectangle with no fill shows a border. A grey horizontal line spans from the left, and a black path outlines a polygonal shape with straight-line segments. The rendering occurs directly in an HTML page using the `<svg>` tag, with no external libraries. The shapes use explicit numeric attributes for coordinates, dimensions, and stroke properties.

Mmattykuch

80% match

Loading thumbnail…

Ep 2: Pseudo visualisation

This example shows a sparse scatterplot of six dark circular marks scattered across a white 960-by-500 SVG canvas, with no axes, labels, or underlying data. The rendering is hand-coded in SVG, using static `<path>` elements with explicit coordinate arcs for each circle, wrapped in a `<g>` with a `clip-path` to constrain drawing to the canvas bounds. The code also includes a minimal HTML page with CSS resetting body margins, but no JavaScript libraries or data-processing logic are present, making it a purely visual placeholder.

Kkwambokar

78% match

Loading thumbnail…

pseudo visualization

This example presents a static geometric composition built with React and rendered as SVG. The visualization displays a collection of overlapping gray shapes that form a complex, layered pattern around a central point. The code constructs these forms using multiple SVG `<path>` elements with defined fill colors and masking techniques. The rendering relies on inline SVG markup directly embedded in the HTML, demonstrating a pure SVG approach without additional data processing or interaction handling. The result is a non-interactive, decorative abstract visual exploration.

Jjustinhersom@gmail.com

73% match

Loading thumbnail…

Test Viz

This example displays a static composition of basic SVG shapes on a 960 by 500 canvas, including two colored circles, a yellow border rectangle, two diagonal navy lines, and a black polyline path. The SVG markup is embedded directly in the HTML page alongside CSS styling. The rendering relies on raw SVG elements such as `circle`, `rect`, `line`, and `path`, without using any JavaScript libraries or data sources. The presentation is purely declarative, demonstrating how each shape’s geometry and stroke attributes are defined inline.

Ggutkem

73% match

Loading thumbnail…

Pseudo viz

This visualization presents a simple, abstract face composed of basic geometric shapes, built using SVG and styled with CSS. It demonstrates how static vector graphics can be assembled into a recognizable figure without any interactive or data-driven logic. The rendering uses raw SVG elements like `rect`, `path`, `ellipse`, `line`, and `g`, with drop shadows applied via the `filter` definition. The face is centered on a white background, featuring a gray head, two differently colored eyes (blue and purple), and a subtle mouth, all defined directly in the markup. No external libraries like D3 or React are used; the code relies solely on native web technologies.

Ddalia.miliauskaite@me.com

73% match

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

72% match

Loading thumbnail…

svg star

This example shows a simple geometric star composed of five black line segments arranged on a blank SVG canvas. The code uses raw SVG elements, specifically `<line>` tags, with hardcoded `x1`, `y1`, `x2`, and `y2` attributes to define each stroke, creating the outline of a five-pointed star shape. Rendered as static vector graphics, the visualization relies entirely on standard SVG syntax without any JavaScript or additional libraries, and the shape is fixed in the HTML markup without interactivity or data binding.

Aaissatheprogrammer

71% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape creation and styling within a static HTML document. It renders a pink background rectangle, a white inner rectangle, and two purple circles positioned side by side. The code uses the native SVG API with elements like `<rect>` and `<circle>`, setting attributes such as `fill`, `width`, `height`, and `cx`/`cy` directly in the markup. No JavaScript libraries are employed; the visualization relies solely on declarative SVG syntax embedded in the `index.html` file.

KKerotyzzzmo

71% match