Skip to main content
SimilarExport ZIP
100%

Shape with SVG and CSS

✓ Published0🌍 Public
Rradiohead-lgl
Last edited Sep 8, 2021
Created on Aug 1, 2021
Forked from HTML Cars Reports

This example demonstrates primitive SVG shapes—circles, rectangles, lines, and paths—styled with CSS and grouped using SVG’s `<g>` element. It shows how fill, stroke, and stroke-width attributes are applied directly on elements or inherited collectively from a group, with transform operations like scale and translate adjusting their placement. The code loads no external data but renders entirely in SVG, using only D3 conventions for module imports without invoking D3 functions. The stylesheet controls body margins, hidden overflow, and class-based stroke styling for the line group.

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—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
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 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 and CSS

This example demonstrates primitive SVG shapes—circles and rectangles—with inline fill attributes, alongside grouped elements that inherit styling and a polyline path. The code uses raw SVG elements and CSS classes, where the `.lines` class applies stroke properties and the `.lines path` rule adds a red rounded stroke. A `<g>` element with a transform attribute shifts a pink-and-black group of shapes, while CSS sets the page margin and overflow. No JavaScript libraries are involved; the rendering relies solely on SVG markup and stylesheet rules.

RRobindj2000
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in groups and transformed with scaling and translation. It shows how CSS classes control stroke properties, including color, width, and line joins, while inline attributes set fill colors and stroke widths for individual elements. The visualization uses raw SVG markup within an HTML page, styled by an external stylesheet, with no JavaScript libraries involved. The rendering approach is purely declarative, showing how SVG and CSS combine to create static geometric compositions.

Llchen83
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—circles, rectangles, lines, and a path—arranged with CSS styling and SVG transforms. It shows how fill colors can be applied per shape or inherited by groups, and how stroke properties define the appearance of line elements. The code uses raw SVG markup with a `<g>` element for grouping and scaling/translating, while the external stylesheet applies stroke width and color to the `.lines` class and its path child. The rendering approach is purely SVG, with no JavaScript libraries involved.

GGuruBigData
90% 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
90% match
Loading thumbnail…

Shapes with SVG

This example shows how to compose SVG shapes—circles, rectangles, lines, and a path—into a grouped, scaled illustration using plain HTML and CSS. The code directly places SVG elements with attributes for position, size, fill, and stroke, and uses nested `<g>` elements to apply `translate` and `scale` transforms. CSS classes style the line group with purple and blue strokes, while the presentation is rendered entirely via the browser’s native SVG support, with no external JavaScript libraries.

Aadelgrosso
90% match