Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published2🌍 Public

Last edited Nov 8, 2019

Created on Nov 8, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

Ppcbt1125

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a 960×500 viewport. It shows how CSS classes and inline SVG styling control fill, stroke, and stroke-width properties, including a grouped set of shapes with a blue fill and black outline. The code uses raw SVG elements and a stylesheet with classes like `.lines` and `.highlighted` to apply styling. Rendering is static, with no interactivity or data binding, and the SVG is scaled via a transform attribute.

AAndrewRiceMGW

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes like circles, rectangles, lines, and paths are drawn and arranged using SVG elements. It demonstrates SVG transforms, including scaling and translation, to position and resize shapes, as well as CSS classes to control stroke color, width, and line joins. The visualization uses raw SVG markup with inline attributes for fill and stroke, alongside a stylesheet (`styles.css`) for styling. The layout is static, strictly demonstrating fundamental SVG and CSS techniques without any data binding or interaction.

BBryan Liu

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581

94% match