Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 30, 2021

Created on Jan 30, 2021

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how to create basic geometric shapes using Scalable Vector Graphics (SVG) and style them with CSS. It shows circles and rectangles filled with various colors, including yellow, gray, and black, arranged in a grid-like pattern, along with a line and a polyline path. The SVG elements are organized within groups using the `<g>` tag, some with transform attributes for scaling and translation. CSS classes, such as `.lines`, apply stroke styling and rounded line caps to the path elements. The rendering uses pure SVG markup in an `index.html` file, with `styles.css` controlling visual properties.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

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.

Tthespiraltree

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to build basic geometric shapes using raw SVG elements and CSS. It shows circles, rectangles, lines, and a path rendered on an SVG canvas of 960 by 500 pixels. The code applies inline attributes like fill, stroke, stroke-width, and transform to style and position each shape, including a grouped set with yellow fill and black stroke. A purple rectangle and red circle highlight shape customization, while the stylesheet sets page margins and overflow properties.

Ssslee8778960

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

93% match

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements and style them with CSS. It shows circles and rectangles with both fill colors applied directly as attributes and groups of shapes where the fill is inherited from an enclosing `<g>` element. The visualization also illustrates how to draw lines and paths, with the line stroke properties defined in a stylesheet. The rendering uses raw SVG markup within an HTML page, with CSS selectors targeting the `.lines` class to apply stroke color and width.

CChristopher A. Pfeifer

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It demonstrates how scale and translate transforms reposition elements, while classes like `.lines` apply stroke properties. The rendering relies directly on SVG markup in `index.html` with CSS rules from `styles.css`, using no JavaScript libraries. A yellow background and grouped elements with shared fills and strokes highlight how SVG and CSS combine to control color, geometry, and coordinate systems.

Mmeihaoming

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through CSS and inline attributes. The SVG markup uses standard elements like `circle`, `rect`, `line`, and `path`, with `transform` groups to scale and translate the drawing. CSS classes in `style.css` apply stroke colors, widths, and line joins to the line and path elements. The result shows how geometric primitives combine with presentational styling to create a static vector illustration, rendered directly in the browser via SVG.

KKaleb LaBarrie

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG scene with inline styling and cascading style sheets. The visualization shows how SVG primitives combine with CSS classes to control appearance, such as setting fill colors, stroke widths, and line joins. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with transformations applied via the SVG `transform` attribute. CSS rules in `styles.css` style the `.lines` group and its path, demonstrating separation of structure and presentation.

SShawn Kearney

93% match