Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Aug 17, 2019

Created on Aug 17, 2019

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

96% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Hhugomell

96% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG elements and style them with CSS. It renders circles, rectangles, lines, and a path within an SVG canvas, showing how attributes like fill, stroke, and transform control appearance. The code uses inline SVG properties for shape definitions and CSS rules to apply stroke styles and color to specific groups, such as the `.lines` class. The rendering approach uses standard SVG markup with scale and translate transformations, illustrating a simple approach to vector graphics without external libraries.

ZZachery2008

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic geometric shapes—circles, rectangles, a line, and a path—drawn with SVG and styled through CSS. It shows how shape properties like fill color, stroke width, and stroke color can be set either as inline attributes or via classes in an external stylesheet. The code uses native SVG elements within an HTML file, with a CSS stylesheet defining the `.lines` class for styling. The rendering is purely static, with no JavaScript libraries, data sources, or interaction.

Jjmarcrum3

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Sshis1011

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be drawn and styled using SVG elements and CSS. It shows shapes with default black fills, explicit color fills, grouped shapes with shared stroke and fill attributes, and a separate class for lines and paths that applies stroke styling via CSS rules. The code uses plain SVG markup within an HTML page, with a linked stylesheet for class-based styling, and includes an ES6 module exporting a message.

YYF

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to assemble basic geometric shapes—circles, rectangles, lines, and paths—directly in SVG, with styling controlled through CSS and inline attributes. The SVG is scaled and grouped with transforms, while a CSS class applies stroke properties to line elements. The code uses raw SVG markup and CSS rules, with no additional libraries, showing how SVG primitives and cascading styles combine to create a static vector composition.

JJasonXQH

95% match