shape with SVG and CSS

100%

shape with SVG and CSS

✓ Published0🌍 Public

Last edited Jan 9, 2023

Created on Jan 9, 2023

This example demonstrates primitive SVG shapes styled with CSS, showing circles, rectangles, lines, and paths arranged in a 960-by-500 canvas. It uses raw SVG elements (circle, rect, line, path) with inline attributes for coordinates, fills, strokes, and transforms like scale and translate. The code also links an external stylesheet, style.css, which defines classes such as `.lines` with stroke properties. No D3 or JavaScript libraries are loaded; the visualization relies solely on static SVG markup and CSS presentation.

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 displays a small collection of primitive shapes—circles, rectangles, and lines—arranged in an SVG canvas. It demonstrates how SVG elements can be styled and transformed using both inline attributes and an external CSS stylesheet. The SVG groups use transform attributes like scale and translate to reposition shapes, while CSS classes like `.lines` and `.lines path` apply stroke colors and widths. The visualization shows basic geometric composition without any interactivity or data binding, relying solely on static SVG markup and CSS styling.

Llisacaligagan

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Ppcbt1125

92% match

Loading thumbnail…

Shapes with SVG and CSS

Ppcbt1125

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in groups and transformed with scaling and translation. It shows how CSS classes control stroke properties, including color, width, and line joins, while inline attributes set fill colors and stroke widths for individual elements. The visualization uses raw SVG markup within an HTML page, styled by an external stylesheet, with no JavaScript libraries involved. The rendering approach is purely declarative, showing how SVG and CSS combine to create static geometric compositions.

Llchen83

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 viewport. The code uses SVG elements directly in HTML, with styling controlled by an external CSS file, including a `.lines` class that sets stroke properties on grouped line and path elements. Transformations like scaling and translation are applied via SVG attributes, and colors are specified through presentation attributes and a CSS class. The visualization is static, with no data-driven elements or interactivity.

Cccheung9595

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214

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 how SVG and CSS can be used to draw and style basic geometric shapes, including circles, rectangles, lines, and a path. The SVG markup positions each shape within a 960x500 canvas, with a group transformation scaling the entire drawing. CSS classes, such as `.lines`, apply stroke properties and a line-join style to the path, while individual elements use inline attributes like `fill` and `stroke-width`. The code relies solely on standard SVG elements and CSS styling, with no external JavaScript libraries or data sources involved.

YYUXUE LIU

91% match