Make Shapes

100%

✓ Published0🌍 Public

Last edited Aug 15, 2021

Created on Aug 15, 2021

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with varied colors, strokes, and transforms. It demonstrates fundamental SVG rendering in a static scene without interaction. The code loads D3 via UNPKG, but primarily uses native SVG elements and CSS styling. It also showcases local ES6 module imports through `myMessage.js` and applies group-level attributes like `fill` and `stroke` for visual organization.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

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

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

87% match

Loading thumbnail…

Shapes

This example displays a set of basic SVG shapes—a circle, rectangle, line, and grouped shapes—positioned on a 900×500 canvas. It demonstrates how SVG primitives are styled with CSS and inline attributes, including fill colors, stroke properties, and transformations via a `<g>` element. The code uses plain HTML, CSS, and JavaScript, with SVG rendered directly in the browser. It shows how grouping elements and applying stroke, fill, and transform attributes affect the visual output.

DDavid Downie

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

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

86% match

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

86% match