Skip to main content
SimilarExport ZIP
100%

SVG Playground

✓ Published1🌍 Public
CCurran Kelleher
Last edited Dec 24, 2020
Created on Dec 24, 2020
Forked from D3 Starter

This example displays a single icon of two overlapping user silhouettes rendered as an SVG path. The visualization uses a fixed 24×24 viewBox and presents the graphic with a neutral black fill on a blank background. The code relies on raw SVG elements, including the `<svg>`, `<g>`, and `<path>` tags, with the path data defined by a complex `d` attribute. No interactive or data-driven features are present; it serves as a static showcase of hand-authored vector geometry within an HTML document.

AI-generated description

An icon.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Playground

This example shows a collection of primitive SVG shapes—circles, a line, and two paths—arranged in a 960 by 500 viewport to create a small, static composition. Overlapping circles in maroon and green sit beside a navy line, while a curved path and a rectilinear path add contrast. The code uses plain SVG markup within an `index.html` file, defining shapes with attributes like `cx`, `r`, and `d`. A commented-out rectangle and inline CSS for full-bleed display are also present, but no external libraries or data sources are involved.

CCurran Kelleher
81% match
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
77% 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
74% match
Loading thumbnail…

SVG Playground

This example presents an empty SVG playground built with D3 v6, offering a blank canvas for creating and experimenting with vector graphics. The page loads the D3 library and establishes a CSS-styled body, while the accompanying JavaScript logs "Hello" and the D3 object to the console. It demonstrates a minimal setup for SVG-based data visualization, relying on D3’s core API and CSS for layout, with no pre-defined marks or data bound to the scene.

Ddabrze3@gmail.com
74% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, lines, and paths, rendered in a static 960x500 viewport. The code uses raw SVG elements such as `<circle>`, `<line>`, and `<path>` to show overlapping circles, a stroke-only polyline, and a custom curved segment, with attributes like `cx`, `r`, `fill`, and `stroke-width` controlling geometry and styling. Several elements are commented out, including a rectangle, highlighting how SVG markup is manipulated directly in the HTML file without any additional JavaScript libraries or data sources.

CCurran Kelleher
74% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including overlapping circles, a line, and two path elements, all rendered directly in an SVG canvas. The code uses native SVG elements such as `circle`, `line`, and `path` with attributes like `fill`, `stroke`, `stroke-width`, and the `d` command for path data. A rectangle is present but commented out. The illustration showcases how basic geometric primitives and path coordinates compose a static vector graphic, with no interactive or data-driven behavior included.

AAndre J Denais
74% match
Loading thumbnail…

SVG fundamentals

An SVG playground demonstrates fundamental vector shapes—a circle, rectangle, line, ellipse, and a complex path with arcs and quadratic curves—drawn directly in an HTML document. The static scene uses no external libraries, relying solely on the browser's native SVG support with inline attributes like `cx`, `rx`, and `d` for path data. Shapes are styled via presentation attributes, including fills, stroke colors, and a transparent rectangle with a green outline. The example serves as a minimalist reference for constructing basic geometric primitives and path commands in Scalable Vector Graphics markup.

邱邱敬淳
74% match
Loading thumbnail…

SVG

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

JJasonXu1244
73% match