Skip to main content
SimilarExport ZIP
100%

SVG Demo

✓ Published1🌍 Public
GGabrz
Last edited Mar 25, 2020
Created on Mar 25, 2020
Forked from Cars Report

This example demonstrates basic Scalable Vector Graphics (SVG) shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML page. The visualization uses inline SVG elements within an `index.html` file, with styling applied via an external `styles.css` stylesheet. The SVG canvas is scaled and translated using SVG transform attributes, while CSS classes like `.lines` and `.c3` control stroke colors, widths, and fill properties for grouped elements. The code highlights how SVG’s native coordinate system and CSS cascading rules combine to define a static, vector-based graphic.

AI-generated description

Data Visualization with D3 course; Shapes with SVG and CSS

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Demo

This demo shows basic SVG shapes composed directly in HTML markup, including a circle, rectangle, line, and path. The SVG element uses a fixed 960x500 viewport with inline styling for stroke and fill attributes. It renders static vector graphics without any JavaScript libraries or data sources, relying solely on native SVG presentation attributes. The message styling suggests decorative intent, while the line element contains duplicated X1 attributes and the path draws a simple polyline.

RRashidi
89% match
Loading thumbnail…

SVG demo

This demo shows basic SVG shapes—circles and rectangles—styled with colors, strokes, and a group transform. It uses inline SVG elements directly in the HTML, with CSS rules that set the page margin and overflow. Shapes are positioned via attributes like cx, cy, and x, y, while a <g> element applies a blue fill, black stroke, and a vertical translation to multiple shapes at once. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support.

Ssamawi.samadikun@gmail.com
88% match
Loading thumbnail…

SVG With HTML

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with inline and CSS styling. It shows how SVG elements can be transformed using `scale` and `translate` attributes, and how CSS classes like `.lines` control stroke appearance and line joins. The code uses raw SVG markup with no external libraries, alongside a minimal HTML page and a console script that logs a message. The rendering approach relies entirely on SVG’s native coordinate system and styling properties.

Aalobry
88% match
Loading thumbnail…

SVG

This example shows basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition with varied fill colors and stroke styles. The code uses plain Scalable Vector Graphics (SVG) elements directly in the HTML, including a `<g>` group with `transform` attributes for scaling and translation. A CSS class named `.lines` applies black strokes and rounded line joins to the path, demonstrating how styles can style SVG geometry. No JavaScript libraries are used, and no data is loaded; the rendering relies solely on static markup and CSS.

GGloria Higley
88% match
Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, organizing circles, rectangles, lines, paths, and polygons in nested groups. The SVG canvas scales the entire composition with a `transform` attribute, while a second group applies a further scale to the polygon. Cascading style sheets define red stroke styling for the `.lines` class, including a darkened path with rounded joins and caps, plus a light-blue stroked, dark-blue filled polygon. The code uses raw SVG elements—`circle`, `rect`, `line`, `path`, `polygon`—with inline attributes for fills, strokes, and coordinate positions, showing static vector graphics without external libraries.

Iirasheed01
87% 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
87% match
Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, showing circles, rectangles, a line, and a custom path. The SVG element spans 960 by 500 pixels and uses inline attributes for styling, such as fill colors, stroke colors, and stroke widths. A circle with a red fill, a blue-stroked hollow rectangle, a gold-filled inner rectangle, a navy diagonal line, and a red triangular path all appear without interactive behavior. The code relies solely on native SVG elements—no external libraries—highlighting how static vector graphics can be defined directly in markup.

Mmanunair16
87% match
Loading thumbnail…

HTML CSS SVG

This example demonstrates how SVG shapes and CSS styling combine within an HTML document. It shows circles, rectangles, lines, and a path, with some shapes grouped together and styled with attributes like fill, stroke, and stroke-width. The rendering uses raw SVG elements, while CSS classes such as `.lines` apply strokes and line joins to grouped paths. The code uses basic SVG APIs and CSS selectors to control visual properties.

Nnobbak
86% match