Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jan 12, 2019

Created on Jan 12, 2019

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple composition, featuring three circles and three rectangles with varying fill and stroke attributes, alongside a line and a polyline path. The SVG is scaled via a transform, while a group element applies a shared fill and stroke to its children. CSS classes define the stroke properties for the line and path elements, using specific hex colors and line-join and line-cap styles. The code uses the native SVG API and plain CSS, with no external libraries.

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

A set of SVG shapes demonstrates styling with both inline attributes and CSS rules. Circles, rectangles, a line, and a polyline-like path are arranged within a transformed group. Inline fill and stroke properties define basic colors, while a CSS class applies stroke width and line join styles to the path elements. The example uses only standard SVG elements and external CSS, with no JavaScript libraries involved.

Vveagy

93% match

Loading thumbnail…

Shapes with SVG and css

This example shows how SVG shapes and CSS styling can be combined to create a simple composition of circles, rectangles, lines, and a path. The first two shapes use default black fill, while the next two apply explicit red and green fills via attributes. A nested group applies a light blue fill and black stroke to its children, and a separate group with the class "lines" sets stroke color and width through CSS, with the path getting a cyan stroke and rounded joins. The entire drawing uses SVG elements and CSS rules, scaled 1.5 times within a 960 by 500 viewport.

Ssemopz

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS. It shows a static composition where the first circle and rectangle inherit default fills, a translated group applies shared fill and blue stroke attributes, and the `.lines` class sets black stroke width for lines while paths override the stroke to red with round line joins. The code uses the SVG API directly within an HTML document, with CSS rules in a separate stylesheet controlling presentation. No external libraries are involved.

TTiffani Gamboa

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS classes. It shows circles and rectangles with default and explicit fills, a group with blue shapes and black strokes, and a polyline with rounded joins. The code uses raw SVG elements within an `<svg>` container, applying `scale` and `translate` transforms, while a CSS class controls stroke properties on the line and path.

DDanteStack

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes and CSS styling to create a static graphic. It shows circles, rectangles, a line, and a path, with some shapes inheriting presentation attributes like fill, stroke, and stroke-width from a group, while the line and path are styled through a CSS class. The SVG element has a scale transform applied, and the code uses native SVG elements and a linked stylesheet.

BBKirst3

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple visual composition. It shows circles, rectangles, lines, and a path, with shapes using inline attributes for fill and stroke colors, while a CSS class applies stroke properties to the line and path elements. The rendering relies on native SVG elements inside an HTML page, with a scale transform on the parent group and a translate on a subgroup to position elements. No external libraries are used; the code directly employs SVG markup and CSS rules.

Ssemopz

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic SVG shapes combine with CSS styling to create a layered, static composition. It demonstrates circles, rectangles, and a polyline path within a transformed group, with one group filled red and stroked black. A separate group class applies black strokes to lines and a blue stroke with round joins to paths. The page uses raw SVG elements and an external CSS file, with no JavaScript libraries, to illustrate direct styling and transformation techniques.

OOliver Wills

93% match