Shapes

100%

✓ Published1🌍 Public

Last edited Jan 30, 2022

Created on Jan 30, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes SVG

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.

SShirley Guo

92% match

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

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

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

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

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

88% match

Loading thumbnail…

shapes with svg and css

This example demonstrates a collection of basic geometric shapes rendered with SVG and styled using CSS, including circles, a rectangle, a line, and a path. The shapes are organized within nested groups to apply transforms like scaling and translation, and CSS classes define strokes and fill colors. The code uses raw SVG elements (circle, rect, line, path) inside an inline `<svg>` tag, with styles defined in an external stylesheet. No JavaScript data source is present; the visualization relies entirely on static markup and CSS for its appearance.

DDominika Modzelewska

88% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG and CSS styling. It shows various fill colors, stroke properties, and grouped transformations like scaling and translation to position shapes across the canvas. The visualization uses raw SVG elements within an HTML file, with a linked stylesheet providing additional styling rules for line elements. The code includes D3.js imports but primarily relies on native SVG markup to render the shapes, with CSS classes and attributes controlling appearance.

Bbobi0017

87% match