Skip to main content
SimilarExport ZIP
100%

SVG and CSS Shapes

✓ Published1🌍 Public
JJSR2000
Last edited Aug 14, 2019
Created on Aug 13, 2019
Forked from Hello VizHub

This example demonstrates fundamental SVG and CSS shapes, including circles, rectangles, lines, and a path, organized within a scaled group. It shows how CSS classes like `.lines` apply stroke styling to the SVG elements, while inline `fill` and `stroke` attributes override defaults for specific shapes. The visualization uses D3.js’s `select` function to update a text message in the DOM. Rendering occurs through SVG elements with transforms, such as `scale` and `translate`, to reposition groups and illustrate basic vector graphics composition.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using Cascading Style Sheets (CSS) alongside inline attributes. The visualization shows a scaled grouping of primitives, with some shapes inheriting fill and stroke properties from parent `<g>` elements, while others specify these directly. The code imports the `select` function from D3.js to update a message div, and uses SVG’s `transform` attribute for scaling and translation. CSS classes like `.line` apply stroke styling and path-specific properties, such as `stroke-linejoin`, to the rendered vector graphics.

Ccpsshan
92% match
Loading thumbnail…

SVG with CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups and transformed by scaling and translation. It shows how shape styling is applied directly via SVG attributes like `fill` and `stroke`, and how CSS classes from an external stylesheet selectively override properties: the `.lines` class sets stroke color and width, while `.lines path` overrides the stroke with a custom color and rounded joins. The rendering uses native SVG elements within an HTML page.

Ii211367
91% match
Loading thumbnail…

SVG and CSS: Shapes

This example demonstrates fundamental SVG shape rendering combined with CSS styling. It displays a circle, rectangle, line, and path on a 900x500 canvas, with elements grouped and transformed using SVG’s `scale` and `translate` attributes. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`, `text`) and defines a CSS class in `styles.css` to apply stroke styling to grouped shapes. No external libraries are used, relying solely on native Scalable Vector Graphics markup and CSS.

Bbkopruluoglu3
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

RResl411
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

RResl411
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a grid and styled through CSS classes and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and transforms (scale, translate) apply both directly and via stylesheet rules. The visualization loads D3.js from UNPKG and uses its `select` API to inject a message into an HTML element, while a local ES6 module supplies the text. Rendering relies entirely on SVG markup within the HTML file, with CSS controlling the appearance of grouped elements.

Ccharliekramer
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—and apply styling directly through attributes and CSS classes. The SVG is scaled with a transform, while a nested group uses inline styles for fills and strokes. CSS rules in `styles.css` define black strokes for the `.lines` group and an orange stroke for its path element. The visualization relies solely on raw SVG markup and CSS, with no JavaScript-based data logic or D3 imports involved in the rendering.

Cchrisvaillancourt
91% match