Shape with SVG and CSS

100%

Shape with SVG and CSS

✓ Published1🌍 Public

Last edited Feb 17, 2023

Created on Feb 17, 2023

This example demonstrates how geometric shapes can be composed and styled using SVG and CSS. It shows circles, rectangles, lines, and a path, with attributes like fill color, stroke, and stroke-width applied both inline and through CSS classes. The SVG is scaled and translated using transform groups, while CSS rules set stroke properties for the line and path elements. The code uses standard SVG elements (`circle`, `rect`, `line`, `path`) with inline styles and an external stylesheet (`styles.css`) that defines classes like `.lines` and `.lines path`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG and styled using CSS. It shows circles, rectangles, lines, and a path within a container that applies scaling and translation transformations. Specific elements use inline `fill` attributes for color coding, while a group with class `lines` uses CSS rules to define stroke color, width, and line join rounding. The SVG markup is embedded directly in the HTML, with `transform` attributes controlling layout and positioning. No additional libraries are used beyond the native SVG and CSS APIs.

Iishmam11

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

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG elements styled with CSS. It shows how SVG presentation attributes like `fill` and `stroke` can be applied directly to elements or inherited from parent `<g>` groups. The code uses the React framework but primarily relies on raw SVG markup within an HTML file. A CSS class named `.lines` applies stroke properties to line and path elements, with path-specific styling for `stroke-linejoin`. The example illustrates layering, grouping via transforms, and styling inheritance.

Bbhayyasaheb

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered within a single SVG element. It shows how inline presentation attributes coexist with external CSS rules, where the `.lines` class applies stroke styling to grouped elements while individual shapes use inline `fill` and `stroke` values. The SVG uses transform groups to scale, translate, and reposition shapes, with colors and stroke widths controlling visual hierarchy. The page is a plain HTML file with a linked stylesheet, using no JavaScript libraries, relying purely on SVG’s declarative markup and CSS for styling.

Jjugsomilk

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements with CSS styling. It shows how presentation attributes like `fill` and `stroke` can be set either directly on elements, grouped in a `<g>` tag, or via CSS classes such as `.lines`. The code uses raw SVG markup within a React application, applying transforms for scaling and translation. The styling approach highlights CSS’s role in controlling stroke width, line joins, and colors, while the SVG namespace handles the coordinate-based drawing.

KKarol Paks

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS rules. The code uses raw SVG elements within an HTML page, with a React starter context, and applies CSS selectors like `.lines` and `.lines path` to control stroke color, width, and line joins. A grouping element with translate and fill/stroke attributes shows inherited styling, while a scale transform enlarges the entire visualization. The rendering relies entirely on SVG markup and CSS, with no data or JavaScript logic involved.

JJordan Chiu

94% match