Skip to main content
SimilarExport ZIP
100%

Shapes with SVG

✓ Published1🌍 Public
FFaysalIbnMohi
Last edited Feb 14, 2022
Created on Feb 12, 2022
Forked from HTML Car Report

This example demonstrates basic SVG shape creation and grouping within a static web page. It shows circles, rectangles, a line, and a path rendered directly in the markup, with CSS styling for stroke, fill, and line joins. The code uses standard SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with the `<g>` grouping element and transform translations. No external libraries are loaded; all shapes are hand-coded in `index.html` and styled through `styles.css`, making it a pure SVG demonstration without D3 or additional JavaScript APIs.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives and styling within a static webpage. It shows a line, a path, a circle, a rect, and a filled circle, all grouped inside a scaled `<g>` transform. The code uses raw SVG elements defined directly in the HTML, with CSS providing layout resets and overflow control. No JavaScript libraries are involved; rendering relies solely on the browser’s SVG support.

CCarlIssac
94% match
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
92% match
Loading thumbnail…

Shapes with SVG

This example shows how to construct basic SVG shapes—circles, rectangles, lines, and a path—positioned in a group with a scale transform. It demonstrates styling shapes with inline attributes, a group-level fill and stroke, and a CSS class that adds stroke properties to lines and the path. The code uses raw SVG elements within an HTML document, with no JavaScript libraries or data binding, relying solely on static markup and a linked stylesheet for visual customization.

IImmaculata-Mary Muoghalu
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, and a line—styled and arranged through inline attributes and CSS. It shows how SVG groups (`<g>`) can apply shared fill colors, strokes, and transforms to multiple shapes at once, while individual elements can override those inherited styles. The code uses raw SVG markup within an HTML document, with no external JavaScript libraries, and relies on a linked stylesheet for overall page typography and layout. The rendering approach is purely static SVG, with all positioning and styling declared directly in the markup.

Rross-fisher
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. It shows how shapes can be grouped and transformed using SVG’s `g` elements with `transform` and `translate` operations. The rendering uses pure SVG embedded directly in the HTML, with a linked `styles.css` file applying stroke color, width, and line-join properties to the line and path elements. No external data or JavaScript libraries are involved; the visualization is static and relies entirely on markup and CSS styling.

FFhouston17
92% 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
92% match