Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Apr 5, 2020

Created on Apr 5, 2020

This example shows how to create and style basic SVG shapes, including circles, rectangles, lines, and paths, using both inline attributes and CSS classes. The shapes are drawn within an SVG element and scaled via a transform. CSS rules in `styles.css` apply stroke styling to the group with class “lines,” while the `path` element uses a custom stroke color and rounded line joins. The code demonstrates combining SVG’s native shape attributes with external stylesheet rules for visual customization.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline attributes and CSS classes. It shows how CSS rules, such as setting stroke width and color on a group with class `lines`, can apply consistent styling to multiple elements. The code uses raw SVG markup within an HTML page, with a linked `styles.css` for presentation. A transform on the outer group scales and translates the entire composition, while nested groups inherit fill and stroke properties, illustrating SVG’s grouping and inheritance model.

Aavssvd

96% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic SVG shapes—circles, rectangles, lines, and paths—using a combination of inline SVG attributes and external CSS rules. It shows how CSS classes can control stroke color, width, and line join styling, while SVG group elements apply global transforms and presentation attributes like `fill` and `stroke` to multiple children. The rendering uses raw SVG markup within an HTML page, with styles defined in a separate stylesheet.

SSchmittYannic

95% match

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—and style them using CSS classes. The shapes are nested inside a scaled and translated SVG group, showing how transforms affect their positions. The code uses raw SVG elements within an HTML page and applies styling through an external stylesheet, where the `.lines` class sets stroke color and width, and a descendant selector customizes the path's line join.

Rrgarimella-viz

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—combined with CSS styling. The code uses raw SVG markup within an HTML page, with CSS rules in a separate stylesheet. Shapes are scaled, translated, and grouped using SVG transform attributes, while CSS classes control stroke and fill properties. The presentation shows how CSS can override SVG attributes, as seen in the `.lines` class applying stroke styles to paths.

AArsenalRobert

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using inline attributes and CSS classes. It shows shapes painted with default colors, explicit fills like red and green, and a group inheriting shared fill and stroke properties. A CSS class applies thick black strokes to lines and a purple stroke with rounded joins to paths. The code uses plain SVG elements with `transform` for scaling and translation, plus CSS from `styles.css` for styling.

Fffrabal

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline SVG attributes and an external CSS stylesheet. It shows how presentational properties like fill, stroke, and stroke-width can be set directly on elements or inherited from parent `<g>` groups and CSS classes. The visualization uses React to render the SVG elements within an HTML page, with the `.lines` class applying green strokes and rounded line joins to paths, while a group transform scales and translates the shapes.

Jjcksnm

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and an external CSS stylesheet. It shows how fill, stroke, and stroke-width properties apply differently when set directly on elements versus via CSS classes. The code uses raw SVG markup within an HTML page, with a CSS rule targeting the `.lines` group to apply consistent styling, including a rounded line join for the path.

Ppengpenghub

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling rules. It shows circles, rectangles, lines, and a path, organized into groups that inherit fill and stroke properties. The code uses plain SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes like `.lines` to define stroke styles, and inline `transform` attributes for scaling and translation.

Ddamankwah

95% match