Shapes with SVG new

100%

Shapes with SVG new

✓ Published1🌍 Public

Last edited Oct 7, 2019

Created on Oct 7, 2019

This example demonstrates how to draw basic geometric shapes and lines using raw SVG elements in VizHub. It shows circles, rectangles, and a line with a path that are positioned on a 960x500 canvas. The code uses native SVG tags including circle, rect, line, path, and g, with inline attributes for styling and transforms to group shapes. The CSS file applies stroke colors and widths to the line elements while hiding page overflow.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG new

This example showcases basic geometric shapes rendered with SVG, including circles and rectangles with varied fills and a translated group containing outlined shapes. It also demonstrates line and path elements with custom stroke styling, such as rounded joins and a distinct color. The code uses plain SVG markup within an HTML document, leveraging the `<svg>`, `<g>`, `<circle>`, `<rect>`, `<line>`, and `<path>` elements. Styling is applied via CSS classes and inline attributes, with the body hidden from overflow for a clean presentation.

Mmirna981

89% match

Loading thumbnail…

Shapes with SVG and CSS

A static SVG scene demonstrates how to compose basic shapes—circles, rectangles, lines, and paths—into a coherent graphic. The code uses raw SVG elements, CSS classes for styling strokes and line joins, and inline attributes for fills and transforms. A translated group applies a fill and stroke to its child shapes, while a scaled group positions the overall composition. This example highlights VizHub’s capacity for hand-coded vector graphics without additional JavaScript libraries.

Nnlp-user

88% match

Loading thumbnail…

Shapes with SVG new

A minimal SVG shapes example renders a single circle element inside an SVG container sized 960 by 500 pixels. The page imports D3.js’s `select` function and a local ES6 module exporting a "Hello VizHub!" message, though the circle remains static without any data binding or interaction. The rendering relies entirely on raw SVG markup in the HTML, with no JavaScript-driven updates to the shape’s attributes. The example demonstrates basic SVG structure and ES6 module usage within a VizHub project.

Mmirna981

88% match

Loading thumbnail…

Shapes with SVG new

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements. It shows default black shapes, shapes with explicit fill colors, a group with white fills and black strokes, and a separate group styled with thick lines and rounded line joins. The rendering relies solely on SVG’s native markup within an HTML document, with CSS imported from Google Fonts controlling the layout and hiding overflow. No external JavaScript libraries are used.

Mmirna981

87% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation and styling using inline SVG elements within an HTML document. It shows circles, rectangles, lines, and paths rendered directly to the SVG canvas, with colors and transformations applied through attributes and CSS. The code uses raw SVG APIs like `<circle>`, `<rect>`, `<line>`, `<path>`, and the `transform` attribute to group and position shapes. CSS classes, such as `.lines`, control stroke properties like width and color, while global styles set the page margin and hide overflow. No external libraries are used, relying entirely on native browser SVG support.

YYuri_Wg

86% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

86% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to build basic geometric shapes using raw SVG elements and CSS. It shows circles, rectangles, lines, and a path rendered on an SVG canvas of 960 by 500 pixels. The code applies inline attributes like fill, stroke, stroke-width, and transform to style and position each shape, including a grouped set with yellow fill and black stroke. A purple rectangle and red circle highlight shape customization, while the stylesheet sets page margins and overflow properties.

Ssslee8778960

86% match

Loading thumbnail…

Shapes with CSS and SVG

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged on an SVG canvas. It demonstrates how raw SVG elements can be styled using both inline attributes like `fill` and `stroke` and external CSS rules. The code also groups shapes with `<g>` elements to apply translation transforms and shared stroke properties, illustrating compositing and coordinate manipulation. The visualization relies directly on the SVG API within an HTML document.

FFadziMandondo

86% match