Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published3🌍 Public
Sshuksbhoney
Last edited Feb 12, 2022
Created on Feb 12, 2022
Forked from D3 Starter

This example demonstrates how to combine SVG shape elements with CSS styling to create static graphics, showing circles, rectangles, lines, and paths arranged in nested groups with various fills, strokes, and transforms. The code uses D3 version 6's `select` API from the `d3` module to modify the page content, while the visual output relies entirely on inline SVG markup and an external stylesheet. Shapes are positioned and scaled using SVG attributes like `transform`, `translate`, and `scale`, with CSS classes controlling stroke properties for the line and path elements.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic SVG shapes—circles, rectangles, lines, and paths—and style them using CSS rules defined in a separate stylesheet. It shows the effects of inline fill attributes, group-level styling properties, and class-based selectors, including stroke color and width. The code imports `select` from D3.js and uses it to set text content in a `div`. The entire scene is rendered through raw SVG markup, with a `transform` applied to the root group.

Ddtdenver
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Sshis1011
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—using SVG elements embedded directly in an HTML page, with styling controlled through CSS. The code uses D3.js v5 to select the SVG container and relies on standard SVG attributes like `cx`, `r`, `x`, `y`, and `d` to define geometry. A simple transform group shifts and scales the shapes, while stroke and fill properties, including a blue fill with black stroke on a subgroup, show how visual appearance is set.

DDaniel Weston
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes and CSS styling to create a static graphic. It shows circles, rectangles, a line, and a path, with some shapes inheriting presentation attributes like fill, stroke, and stroke-width from a group, while the line and path are styled through a CSS class. The SVG element has a scale transform applied, and the code uses native SVG elements and a linked stylesheet.

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

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581
92% match