Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published2🌍 Public

Last edited Oct 29, 2019

Created on Oct 29, 2019

This example demonstrates how SVG shapes and CSS classes can be combined to create colorful, styled graphics. It shows circles, rectangles, lines, and paths rendered at various positions, with some shapes using inline fill attributes while others inherit styles from CSS rules. The SVG markup pairs shape elements like `<circle>`, `<rect>`, and `<line>` with grouping via `<g>` elements that apply transforms and shared presentation properties. The CSS stylesheet defines stroke colors, widths, and font settings, while the code relies entirely on native SVG and CSS—no JavaScript libraries—to achieve the visual output.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create simple graphics. Circles, rectangles, lines, and paths are drawn directly in the markup, with attributes like fill, stroke, and stroke-width controlling appearance. A group with an inline fill and stroke attribute overrides those for its child elements, while a separate CSS class applies stroke styling and line-join/line-cap properties to path elements. The rendering approach is pure SVG, with layout transformations handled through the transform attribute and styles defined in an external stylesheet.

Ssayli-lab

93% 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. It shows circles and rectangles with explicit `fill` colors, and a group that inherits a fill and stroke from its parent, while individual shapes override these properties with their own attributes. The `.lines` class applies stroke styling to line and path elements, with the path taking its own color and stroke-linejoin settings. The graphic uses SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` inside a `<g>` container with transforms for scaling and translation.

SShinCai

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 2

This example demonstrates how SVG shapes and CSS classes can be combined to create colorful, layered graphics. It shows circles, rectangles, lines, and a path arranged with nested transforms, using fill and stroke attributes to assign colors. The code relies on native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while a separate stylesheet defines the `.lines` class for stroke width, red color, and the path’s teal stroke. A `<g>` element uses a scale transform and global fill, with local overrides for specific shapes.

Xxhoumba

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

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes and CSS classes. It shows the effects of fill colors, stroke widths, line joins, and grouped transformations such as scaling and translation. The rendering relies entirely on SVG elements styled by CSS, with classes like `.lines` controlling stroke properties and the `fill` attribute applying color. No JavaScript libraries are used; the visualization is purely static markup and styles.

Wwen787

92% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a simple graphic, using circles, rectangles, lines, and a path. The SVG is scaled via a transform, with individual elements colored through inline fill attributes or grouped under a shared fill and stroke. CSS classes apply stroke width and color to the line and path elements, while the body margin is removed for full-bleed display. The rendering relies solely on SVG markup and external stylesheets, with no JavaScript or data sources involved.

Ddtdenver

92% match