Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
SSong
Last edited Aug 6, 2019
Created on Aug 6, 2019

This example demonstrates foundational SVG shapes and styling through direct markup and CSS. Circles, rectangles, lines, and a path are arranged with basic attributes like `cx`, `cy`, `r`, `x`, and `y`, while CSS classes control stroke color, width, and line join styles. A `<g>` element groups shapes to apply shared fill and stroke properties, and another group uses the `transform` attribute to translate and scale the entire composition. The rendering is purely client-side SVG, with styling split between inline presentation attributes and an external `styles.css` stylesheet.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and a path. It demonstrates basic SVG attributes like `cx`, `cy`, `r`, `x`, `y`, and `transform` for scaling and translating groups, while CSS classes control stroke properties such as width, color, line join, and line cap. The code uses inline `fill` attributes with named colors, hex codes, and a group-level fill with an overriding black stroke. No JavaScript libraries are used; rendering relies solely on SVG elements and the linked stylesheet.

Ggonghewan
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both presentation attributes and an external CSS stylesheet. It shows how fill colors can be set directly on elements (e.g., red, `#83cc2a`) or inherited from a parent `<g>` group, with stroke properties controlling outlines. The CSS classes `.lines` apply stroke width and color, while the path uses the `stroke-linejoin` and `stroke-linecap` properties. The SVG structure employs `transform` attributes for scaling and translation, rendering vector graphics directly in the browser without additional JavaScript libraries.

Mmi-desai
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. The code shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation affect rendering. It uses raw SVG elements with CSS selectors (`.lines`, `.lines path`) to apply stroke properties, while a `<g>` element groups shapes to share fill and stroke settings. The rendering is pure SVG in an HTML page with no external libraries.

LLinkous
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled with CSS, using circles, rectangles, lines, and a path. It shows inline presentation attributes like `fill` and `stroke` alongside a `<g>` element that applies shared styles, and CSS classes that define stroke properties for line elements. The SVG is scaled with a transform, and the page hides overflow. The code uses raw SVG markup with no JavaScript libraries, relying on CSS for line styling.

Eegrebing
92% match
Loading thumbnail…

Shapes and Colors with SVG CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using SVG’s `<g>` element. It demonstrates how fill colors, stroke widths, and transforms like translation and scaling affect shape rendering. The code uses raw SVG markup within an HTML file, linked to an external stylesheet that applies classes to set stroke properties. No JavaScript libraries are used; rendering relies entirely on the browser’s native SVG support.

VVvgupta
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—with colors applied through inline attributes and CSS classes. It shows how the `<g>` element groups shapes to share fill and stroke properties, while a scale transform enlarges the entire scene and a translate moves part of it. The code uses raw SVG markup with CSS for styling, including stroke-width, stroke-linejoin, and stroke-linecap on the line and path elements. No external libraries or data are involved; rendering is purely static SVG.

TTheRedUnicorn
91% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styles combine to create a static composition of circles, rectangles, lines, and a path. The code renders without any JavaScript libraries, relying directly on SVG elements and a linked stylesheet. The stylesheet applies stroke properties to the lines group, and the markup uses inline attributes like `fill`, `stroke`, and `transform` to assign colors and positions. The `g` elements demonstrate grouping and coordinate-space transformations, while a path with a `non-scaling` stroke demonstrates stroke styling independent of the parent scale.

Eedxiao97
91% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—positioned and styled through SVG attributes and CSS classes. It shows how shapes inherit fill and stroke properties from a parent `<g>` element, how transforms like `scale` and `translate` reposition entire groups, and how CSS rules can assign stroke color and width to line elements. The code uses raw SVG markup and linked CSS styles, with no JavaScript or external visualization libraries.

BBrett Cunningham
91% match