Skip to main content
SimilarExport ZIP
100%

Layer 1

✓ Published0🌍 Public
JJustinGOSSES
Last edited Jan 23, 2022
Created on Jan 23, 2022

Three stick figures stand at different positions against a blank background, each drawn identically with a circular head and a single continuous path for the body. The SVG rendering uses basic geometric shapes and path commands, with no explicit data binding or interaction. The figures appear static, suggesting a simple illustration or icon set rather than a data-driven visualization. The work is authored by JustinGOSSES and shared as a gist.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG Playground

This example shows three identical SVG figures arranged in a row, each displaying a yellow circle with a rectangular hat, but dressed in different colors. A separate group of green lines, one straight and one zigzag polyline, crosses below them. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path` within grouped `<g>` tags, applying transforms, fills, strokes, and CSS classes. D3 v6 is loaded for scripting, but the visualization relies entirely on static SVG markup without data binding or dynamic updates.

Ddabrze3@gmail.com
72% match
Loading thumbnail…

start from scratch

Three overlapping shapes illustrate basic SVG layering in a simple static scene. A black circle sits at the upper left, followed by a red circle offset to the right, and finally a green rectangular outline encloses both. Each subsequent element renders on top of the previous ones, demonstrating paint order. The example uses raw SVG markup inside an HTML document, with circle and rect elements positioned via cx, cy, r, x, y, width, and height attributes. No JavaScript libraries or external data are involved; the rendering depends solely on the browser’s SVG parser.

CCX-Lee
71% match
Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com
70% match
Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aarontha
70% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and their attributes in a static visualization. It shows circles with varying fill colors, a rectangle with both fill and stroke styling, and geometric paths that form a crude stick figure. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—to construct the composition. Each shape is defined with inline XML attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` for path data, with no external JavaScript libraries or data sources.

CClaudio Puggioni
70% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG shapes, using a static, predefined dataset of geometric elements. It shows how basic primitives such as rectangles, circles, lines, and paths are defined and styled within a 960×500 coordinate system. The code uses raw SVG tags like `<rect>`, `<circle>`, `<line>`, and `<path>`, with attributes for positioning, fill colors, strokes, and widths. The visualization highlights the contrast between filled shapes and stroked outlines, and includes a multi-segment path that connects four points with a thick black line.

SShankar Ghimire
70% match
Loading thumbnail…

This is a title

This visualization uses raw SVG elements to create a simple geometric composition of three circles and one rectangle on a 1000x1000 canvas. The circles appear in black, red, and blue at different sizes and positions, while the rectangle is filled pink with a thick blue stroke. The static graphic demonstrates basic shape rendering with explicit SVG attributes for fill, stroke, and stroke-width, with no interactivity or data binding.

Llucia111219
70% match
Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Hharika-1929
70% match