Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Feb 19, 2023

Created on Feb 19, 2023

This example demonstrates how D3 version 7 renders basic SVG shapes—circles, rectangles, and a line—within an HTML page. The SVG markup shows explicit styling through inline attributes (like `fill="red"` or `stroke-width="5"`) and group elements using `transform` for positioning and scaling. A separate `styles.css` file resets body margins and hides overflow, while D3 is loaded from a CDN but not used for drawing. The code also references a `bundle.js` file, indicating a potential bundling step, though the visible shapes are static and rely solely on SVG and CSS rather than dynamic D3 data binding.

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 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

91% match

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

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of SVG shapes—including circles, rectangles, and polygons—styled with CSS properties such as fill colors, strokes, and opacity. The shapes are static and arranged on a blank canvas with no margins. The code uses D3 v5 only to load the page structure, while all visual styling is handled through an external stylesheet. The HTML includes links to the D3 library and CSS file, but the body remains empty, meaning the actual shape rendering relies on CSS-drawn elements not present in the provided files. The page sets `overflow: hidden` and removes default margins.

Ddinhthengoc2021998

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling. A single SVG canvas is rendered, and D3 is loaded to manipulate it, referencing CSS classes for line properties. The visualization uses the SVG rendering approach and D3 v5 framework, with styles defining stroke colors and widths for path elements. The code sets up the SVG element with a fixed width and height, but the specific shape-drawing logic is incomplete in the provided file.

Ssourcebox-bug

90% match

Loading thumbnail…

Shapes with SVG and CSS

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.

Sshuksbhoney

90% 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

90% match

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

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. Circles and rectangles are drawn with static positions, colors, and stroke properties, while a line and path are grouped together to showcase shared stroke attributes. The visualization uses D3 v5 imported via UNPKG and leverages the `select` function from D3, though the code primarily relies on raw SVG markup within the HTML. Local ES6 modules and CSS from external files are also imported to structure the project.

MMuiruriscode

90% match