Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Gginnyching
Last edited Oct 1, 2022
Created on Oct 1, 2022
Forked from Hello VizHub

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS classes. The code shows how fill colors can be set via hex, RGB, or named values, and how CSS rules like `.lines` apply stroke properties. It uses plain SVG markup without D3 dependencies, though the README notes the project can load D3 via UNPKG and supports ES6 module imports. The rendering approach uses a transformed `<g>` element to scale and position all shapes.

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 shows how SVG shapes such as circles, rectangles, lines, and paths can be styled and arranged using both inline attributes and external CSS. It demonstrates loading D3 via UNPKG and importing from local ES6 modules, though the visible shapes rely purely on static SVG markup. The code uses SVG elements like `circle`, `rect`, `line`, and `path` with transforms for scaling and translation, while `styles.css` defines classes like `.lines` to apply stroke properties. The rendering approach is plain SVG output with no JavaScript-driven data updates.

Yyejichun@naver.com
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. The code shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation affect rendering. It uses raw SVG elements with CSS selectors (`.lines`, `.lines path`) to apply stroke properties, while a `<g>` element groups shapes to share fill and stroke settings. The rendering is pure SVG in an HTML page with no external libraries.

LLinkous
93% 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
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a coordinate system and scaled up. The shapes have various fills, strokes, and stroke widths, with some styles inherited from a parent group or defined via CSS classes. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path`, with transformations like `scale` and `translate`. The rendering approach uses an inline SVG, with styling applied through an external CSS stylesheet that defines classes like `.lines` for stroke properties.

DDifan Gu
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 SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4
92% match