SVG Shapes

100%

✓ Published0🌍 Public

Last edited Jul 19, 2019

Created on Jul 19, 2019

This example demonstrates fundamental SVG shape elements—circle, rect, and line—positioned within a fixed 960 by 960 coordinate system. The visualization compares shapes with default styling against those customized with explicit `fill` and `stroke` attributes, while a `<g>` group applies shared `fill="teal"` and `stroke="black"` to its children. Beyond these static SVG primitives, the code also showcases basic D3 integration by importing `select` from `d3` and using it to set the text content of a div element, along with a separate ES6 module export. The rendering relies entirely on SVG markup.

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

89% match

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

89% match

Loading thumbnail…

SVG and CSS Shapes

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.

JJSR2000

88% match

Loading thumbnail…

shapes with svg

This example demonstrates basic SVG shapes—circles, rectangles, and a path—rendered on a red background using static markup in index.html. It shows how to apply fill colors, stroke styling, and group transformations using the `<g>` element, with shapes appearing both unstyled and with inline attributes. The code directly embeds SVG elements in HTML and uses a separate styles.css file that imports D3’s `select` function, though no dynamic data or interaction is present. The visualization relies solely on declarative SVG syntax without JavaScript-driven updates.

Nnexus1058

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

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

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

SVG Fundamentals

This example demonstrates fundamental SVG shape elements, including rectangles, circles, lines, and paths, using static coordinates and styling attributes. It showcases basic D3 version 7 usage via `select` from the `d3` module to set the body text. The visualization is rendered directly in the browser through an inline SVG element with a width of 960 and height of 500, featuring shapes such as a blue outlined rectangle, red and default-colored circles, a yellow rectangle with a navy stroke, a diagonal line, and a black polyline path. The code also embeds an introductory video and README explaining D3 version 6.

MMatheesha Yapa

87% match