Shapes with SVG

100%

Shapes with SVG

✓ Published0🌍 Public

Last edited Jul 12, 2019

Created on Jul 9, 2019

This example demonstrates basic SVG shape rendering within a webpage, displaying circles, rectangles, lines, and a path. The shapes are organized in groups with transforms for scaling and translation, and styled via inline attributes and a CSS class. The visualization uses the SVG API directly within an HTML document, alongside D3.js’s `select` function for setting text content. Data is sourced from the static HTML and JavaScript files, with styling applied through an external stylesheet.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation and grouping within a static web page. It shows circles, rectangles, a line, and a path rendered directly in the markup, with CSS styling for stroke, fill, and line joins. The code uses standard SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with the `<g>` grouping element and transform translations. No external libraries are loaded; all shapes are hand-coded in `index.html` and styled through `styles.css`, making it a pure SVG demonstration without D3 or additional JavaScript APIs.

FFaysalIbnMohi

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

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering using HTML markup and CSS styling, producing circles, rectangles, lines, and paths within a single SVG canvas. The code combines inline attribute styling with stylesheet rules, including a transformed group that shifts shapes and applies a grouped stroke effect using the `lines` class. It uses standard SVG elements (`circle`, `rect`, `line`, `path`) with `transform` and `stroke` attributes, while CSS handles font import and global layout. The visualization is static, showing how SVG primitives combine with CSS for customizable visual output.

KKwadwo 'Que' Amankwa

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes, with grouping elements (`<g>`) applying transformations like scaling, translation, and fill inheritance. The SVG is embedded directly in the HTML, using no external JavaScript libraries. Renders via the SVG DOM, showing static geometry without interaction or data binding.

CChristopher A. Pfeifer

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214

91% match

Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates various SVG shapes rendered directly on a page, including circles, rectangles, lines, and a path. The SVG markup applies styling through attributes and CSS, with group elements (`g`) using transforms and inherited fill and stroke properties. It also illustrates CSS class-based styling for the line and path elements via the `.lines` rule. The visualization uses raw SVG and CSS, with no additional libraries, showing how shape attributes and styles interact.

Aavirathtib

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered with CSS styling, including circles, rectangles, lines, and a path. The shapes are drawn with SVG elements such as `circle`, `rect`, `line`, and `path`, using attributes like `fill`, `stroke`, and `stroke-width`. A `transform` attribute scales the entire group, while nested groups apply translations and inherit styles. The HTML includes an inline SVG with a viewBox of 960 by 500, and the external stylesheet defines classes like `.lines` to apply stroke properties globally. No JavaScript or external data is used.

AAbhijit Roy

91% match