Shapes with SVG

100%

Shapes with SVG

✓ Published0🌍 Public

Last edited Oct 24, 2018

Created on Aug 23, 2018

A gallery example demonstrating basic SVG shape primitives for static data visualization. The page renders circles, rectangles, lines, and a path directly in an HTML document using inline SVG elements. The shapes are positioned with explicit coordinates and grouped using `<g>` elements with transforms for translation and scaling. Scalable Vector Graphics (SVG) handles the rendering, with CSS classes applied to the path group for stroke width, color, and fill properties. The code relies on native SVG APIs—not D3 or other libraries—to construct a simple, self-contained visualization of geometric forms.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes, with grouping elements (`<g>`) applying transformations like scaling, translation, and fill inheritance. The SVG is embedded directly in the HTML, using no external JavaScript libraries. Renders via the SVG DOM, showing static geometry without interaction or data binding.

CChristopher A. Pfeifer

91% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape rendering within a webpage, displaying circles, rectangles, lines, and a path. The shapes are organized in groups with transforms for scaling and translation, and styled via inline attributes and a CSS class. The visualization uses the SVG API directly within an HTML document, alongside D3.js’s `select` function for setting text content. Data is sourced from the static HTML and JavaScript files, with styling applied through an external stylesheet.

MMichał Szumnarski

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles, rectangles, lines, and a path rendered within an SVG element scaled by a factor of 1.7. The code uses inline SVG attributes like `cx`, `cy`, `r`, `x`, `y`, and `transform` to position shapes, while CSS classes define stroke properties for the line and path elements. Fill colors are applied both directly via SVG attributes and through a `<g>` group with a hexadecimal value. No data source is present; the visualization purely illustrates SVG geometric primitives.

Jjunge870214

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Ppengyugatech

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a small collection of primitive shapes—circles, rectangles, and lines—arranged in an SVG canvas. It demonstrates how SVG elements can be styled and transformed using both inline attributes and an external CSS stylesheet. The SVG groups use transform attributes like scale and translate to reposition shapes, while CSS classes like `.lines` and `.lines path` apply stroke colors and widths. The visualization shows basic geometric composition without any interactivity or data binding, relying solely on static SVG markup and CSS styling.

Llisacaligagan

91% match

Loading thumbnail…

Shapes with SVG

This example shows basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed composition with varied fill colors and stroke styles. It demonstrates how raw SVG markup, without any JavaScript libraries, can create static vector graphics. The code uses core SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with grouping via `<g>` and transform attributes for scaling and translation. CSS classes style the lines and paths, while inline attributes control fill and stroke properties for the other shapes.

Eestregan

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 viewport. The code uses SVG elements directly in HTML, with styling controlled by an external CSS file, including a `.lines` class that sets stroke properties on grouped line and path elements. Transformations like scaling and translation are applied via SVG attributes, and colors are specified through presentation attributes and a CSS class. The visualization is static, with no data-driven elements or interactivity.

Cccheung9595

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes, including circles, rectangles, a line, and a path, rendered within a 960 by 500 pixel SVG canvas. The shapes demonstrate various SVG presentation attributes, such as fill colors, stroke colors, and stroke widths, applied both directly and through the `<g>` grouping element. The visualization uses the SVG rendering API with an HTML page and a linked CSS stylesheet, where CSS is only used for global body styling and a non-applied `.highlighted` class. It does not incorporate any JavaScript libraries or external data.

AAlessan123

90% match