Shapes SVG

100%

✓ Published1🌍 Public

Last edited Aug 11, 2019

Created on Aug 11, 2019

This example demonstrates the basic SVG shapes—circles, rectangles, lines, and paths—rendered with both default and explicit fill and stroke styling. A nested group transforms shapes by translating them and applying a blue fill with a black stroke, while a separate group uses no fill and a thick stroke for line and path elements. The visualization is built with D3.js v5 and relies on static SVG markup, with a scale transform applied to enlarge the entire graphic.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid with varied fill and stroke styling. It demonstrates how CSS classes and inline attributes control shape appearance, including a group with a light blue fill and black stroke, plus a separate group of lines with a thick round-joined stroke. The visualization uses plain SVG markup within an HTML file, linked to an external stylesheet, and does not rely on D3 or any JavaScript libraries. The shapes are scaled uniformly via an SVG transform.

Rreo440

92% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

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

91% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jjakenachlas

91% match

Loading thumbnail…

Shapes with SVG

This example shows how to construct basic SVG shapes—circles, rectangles, lines, and a path—positioned in a group with a scale transform. It demonstrates styling shapes with inline attributes, a group-level fill and stroke, and a CSS class that adds stroke properties to lines and the path. The code uses raw SVG elements within an HTML document, with no JavaScript libraries or data binding, relying solely on static markup and a linked stylesheet for visual customization.

IImmaculata-Mary Muoghalu

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 a group—styled and transformed with CSS attributes like fill, stroke, and translate. It shows how static SVG elements can be composed and visually customized in a web page. The rendering uses raw SVG markup embedded in HTML, with external styles applied via a linked stylesheet. No JavaScript libraries drive the visualization; the included D3 import and message module remain unused in the final display.

JJokerhan88

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