Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Hhairibung
Last edited Mar 5, 2020
Created on Mar 5, 2020

This example demonstrates how to construct and style basic geometric shapes—circles, rectangles, lines, and a path—using inline SVG elements and a linked CSS stylesheet. The drawing is scaled and translated via SVG `transform` attributes, with groups of shapes inheriting shared fills, strokes, and stroke widths from parent `<g>` elements. CSS classes further control the appearance of the polyline and path, specifying stroke color, line join, and line cap. The result shows how SVG’s native coordinate system and CSS presentational properties work together for crisp vector graphics.

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 demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through inline attributes and an external CSS stylesheet. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width` can be overridden by CSS rules, as seen with the `.lines` class applying black strokes. The SVG is scaled using a transform and grouped with translation to position elements, while CSS handles global layout. The code uses raw SVG elements and CSS, with no data or interaction.

Ssbgatech
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates drawing basic geometric shapes—circles, rectangles, and a polyline path—using inline SVG elements and CSS for styling. It shows how SVG shapes can be grouped and transformed with translation and scaling, while CSS classes control stroke properties like color, width, line join, and line cap. A non-filled path is also rendered with a stroke, using styling rules from an external stylesheet.

Jjlbullerc
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and color styling using inline attributes and CSS classes. It shows circles, rectangles, a line, and a polyline path, with fill colors applied directly (like red or `#83cc2a`) and inherited through group elements. The code uses SVG’s `<g>` elements for transforms (`scale`, `translate`), plus CSS rules to control stroke properties such as width, linejoin, and linecap. Rendering is entirely client-side via the SVG DOM, with no external libraries or data sources.

Iirasheed01
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through HTML and CSS. It shows circles, rectangles, lines, and paths arranged in groups with varying fill colors, stroke properties, and transforms. The code applies CSS classes to style the line and path elements, while inline attributes handle other visual properties. Rendering uses SVG markup directly, with the `line` element and `path` element for the polyline, all scaled and translated within the `<g>` container.

Pprativis
94% 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
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled and transformed using CSS. The graphic shows a progression from default black fills to explicit color fills, then a group with a custom light-blue fill and black stroke, and finally a connected polyline path. The code relies on native SVG elements like `<circle>`, `<rect>`, `<path>`, and the `<g>` container, while CSS classes such as `.lines` apply stroke properties and line joins. The inline `transform` attributes handle scaling and translation, and all shapes are embedded directly in the HTML without external data.

Vvigneshatreya4
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and an external CSS stylesheet. It shows how presentation can be controlled at the element level with `fill` and `stroke` properties, or grouped and applied via CSS classes like `.lines`. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, combining default styling, explicit fills, and CSS-defined strokes to illustrate layered control over vector graphics rendering.

TTheRoadSign
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and geometric transforms (`scale`, `translate`) can be applied at the element or group level, including inherited styles through `<g>` containers. The code uses native SVG markup inside a 960x500 canvas, with a separate stylesheet (styles.css) controlling the body layout and class-specific styling for the polyline group. The shapes are static with no data binding or interaction.

DDanteStack
94% match