Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Oct 2, 2020

Created on Oct 2, 2020

This example demonstrates how SVG shapes are styled and transformed using CSS and inline attributes. It pairs circles and rectangles with default black fills, red and gray custom fills, and a group inheriting blue fill with black strokes. The code uses SVG elements like `circle`, `rect`, `line`, and `path`, with transformations via `scale` and `translate`. CSS classes like `.lines` define stroke properties, while `.lines path` overrides the stroke color and applies a round line join. The rendering uses inline SVG markup within an HTML document.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using both inline attributes and CSS. It shows circles, rectangles, lines, and a path, with some shapes grouped to share fill and stroke properties, while the `lines` class applies black strokes and a rounded line join. The SVG viewport scales up by 1.5, and a translated group shifts lines and paths into place. The code uses raw SVG elements and CSS rules, with no external JavaScript libraries.

Wwoo

96% 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 both inline attributes and CSS rules. It shows default black shapes, shapes with explicit `fill` colors, a group with a cyan fill and black stroke, and a separate group of lines and paths styled via CSS classes. The rendering uses SVG elements placed in an HTML page, with the `styles.css` file providing stroke width, color, and line-join properties for the `.lines` class and its path child.

AAlessan123

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

Aarg04

95% match

Loading thumbnail…

Shapes with SVG AND CSS

This example demonstrates basic SVG shape rendering and styling using raw SVG elements alongside CSS rules. It displays circles, rectangles, lines, and a path, with some shapes using default black fills while others specify explicit fill colors like red and green. A grouped set of shapes applies a light blue fill and black stroke through an attribute, while a separate group with the class `lines` uses CSS to define stroke properties, with its path element overridden to use a red stroke and rounded line joins. The SVG is scaled using a transform, and the page layout removes margins and hides overflow.

OOvxOO

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS classes. It shows circles and rectangles with default black fills, explicit red and green fills, and a group that inherits a light blue fill with a black stroke. Two additional elements, a line and a polyline path, are styled through the `.lines` CSS class with a thick stroke and rounded joins. The SVG uses transform groups for scaling and translation, while the HTML document links to an external stylesheet that also sets the page’s font size and hides overflow.

Wwoznicak

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

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled with inline attributes and CSS classes. It shows the same shapes rendered in default black, with explicit fill colors, and with a group-level fill and stroke applied via a transform. The code uses SVG elements directly within an HTML document, relying on CSS selectors like `.lines` and `.lines path` to set stroke properties. A scale transform enlarges the entire scene for display.

MMichael Todd

94% match