Shapes With SVG and CSS

100%

Shapes With SVG and CSS

✓ Published1🌍 Public

Last edited Sep 28, 2018

Created on Sep 28, 2018

This example shows how to combine SVG shape elements with CSS styling to create a small composition of circles, rectangles, a line, and a path. The code directly embeds the shapes in an `index.html` file, using an inline `<svg>` element with a `scale` transform. Separate rules in `styles.css` apply the black stroke and width to all elements within a `.lines` group, and a darker stroke with rounded joins specifically to the group’s path. The SVG `fill`, `stroke`, and `stroke-width` attributes are also set directly on the elements to control color and outline.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG AND CSS

This example shows how to combine inline SVG shape elements with CSS styling to create a static composition of circles, rectangles, lines, and paths. The graphic renders a simple geometric scene with default black shapes, a colored group with red and green fills, a blue group with black strokes, and a separate line and path group. The code uses raw SVG markup with attributes like `transform`, `fill`, and `stroke`, while the CSS file styles the `.lines` class and its child path. All rendering is done through standard browser SVG support.

Rryankinsey1

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shape elements and CSS classes can be combined to create a static composition of circles, rectangles, lines, and paths. The SVG markup uses native elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with inline attributes for fill, stroke, and transforms like `scale` and `translate`. CSS rules in `styles.css` style the `.lines` group and its child paths, adding black strokes with a cyan stroke-linejoin on paths. No external JavaScript libraries are used; the visual is purely declarative, relying on browser-rendered SVG and linked stylesheet.

CChangbeom Shim

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental SVG shapes—circles and rectangles—styling through both inline attributes and CSS classes. It shows how presentation properties like fill, stroke, and stroke-width can be defined either directly or via a stylesheet. The code applies a scale transform to the entire group, then a translate with a grouped color and stroke style, and finally a path with a round stroke-linejoin. The `.lines` class in `styles.css` sets stroke appearance, while `index.html` uses standard SVG markup within an HTML document.

Hhamza.miftah@gmail.com

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

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.

Wwoo

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

92% match

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

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

92% match