Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Aug 15, 2020

Created on Aug 14, 2020

This example displays a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in groups using SVG elements inside an HTML page. The code applies CSS classes to style the line group with a black stroke and a rounded path join. A transform attribute scales the entire drawing by 1.5 times, while groups use translate to position shapes, with fill and stroke properties set directly on elements to control color and borders.

AI-generated description

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

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in overlapping groups against a blank canvas. It demonstrates how SVG elements can be styled and transformed using CSS classes and inline attributes. The code uses raw SVG markup with a `<g>` element for grouping, and applies styling through a linked stylesheet that sets stroke widths and colors. The visible transformations include scaling and translation, with the rendering approach being purely static SVG without any JavaScript libraries or data sources.

SShengjie-Sun

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic geometric shapes—circles, rectangles, a line, and a path—rendered within a single SVG canvas. It shows how presentation varies: shapes appear both with default black fills and with explicit `fill` attributes, while a group applies a unified light-blue fill and black stroke. The example uses plain SVG markup alongside CSS to style elements, specifically targeting elements with the `.lines` class to set stroke color and width, and further styling the path within that group. A `transform` scales the entire composition.

JJustinS1209

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, rectangles, a line, and a path—all rendered inside a single SVG canvas. It demonstrates how CSS classes control vector styling, such as setting the stroke color, width, and line-join for the line and path elements, while inline attributes like `fill` and `transform` handle shape-specific properties and scaling. The code uses raw SVG elements and a linked stylesheet, with no external JavaScript libraries.

Ffbudwill

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of primitive shapes—circles, rectangles, lines, and a path—arranged within a single SVG canvas. The code demonstrates how CSS classes and inline attributes control visual properties such as fill colors, stroke widths, and line joins. A scale transformation enlarges the entire group, and a separate translate group shifts a set of blue shapes with black outlines. The rendering relies on the SVG API directly within an HTML document, with the linked stylesheet applying presentation rules like the rounded line join for the path.

Mmla341

94% match