Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited Feb 26, 2020

Created on Feb 26, 2020

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create a visually layered composition. It shows circles and rectangles with varying fill colors, including a grouped set with a shared fill and stroke, alongside a line and a polyline path. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes defined in `styles.css` to control stroke properties. Transforms apply scaling and translation, while the external stylesheet handles global body margins and overflow settings.

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

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and paths. The code uses inline SVG elements within an HTML page, with a separate stylesheet applying stroke properties to line and path elements. Circle and rect elements are colored individually or grouped via the `fill` and `stroke` attributes, while a `transform` scales the entire graphic. The rendering is purely SVG-based, requiring no JavaScript libraries.

DDaniel Korosi

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create static graphics, showing circles, rectangles, lines, and paths with varied fill colors and stroke properties. The code uses raw SVG elements within an HTML document, with styles defined in an external stylesheet using CSS classes and selectors. Several attribute-based styles, such as inline `fill` and `stroke` properties, are applied directly to shapes, while the `.lines` class controls stroke width and line join styles for the polyline-like paths. The SVG is scaled using a `transform` attribute, and the rendering approach uses standard web technologies without additional libraries, making it a minimal illustration of SVG and CSS fundamentals.

Rrohit sohlot

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

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged with transforms and grouped elements. It illustrates how inline attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheet rules targeting classes such as `.lines` and `.lines path` for stroke color and line joins. The rendering uses raw SVG markup within an HTML page, with a CSS file controlling layout and visual properties.

Ffasynator

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

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined to create a simple, static visualization. It draws circles and rectangles with various fill colors, and includes a group that applies both a fill and stroke. A separate group of lines and a path demonstrates stroke styling with rounded joins and caps. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS rules in styles.css controlling stroke properties, while inline attributes and nested `<g>` transforms handle layout.

Jjlbullerc

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

The example demonstrates how SVG shapes—circles, rectangles, lines, and paths—are styled with inline attributes and CSS classes to create a colorful, layered composition. It shows grouped elements inheriting fill and stroke properties, while a dedicated `.lines` class applies thicker stroke styling to line and path elements. The code uses plain SVG markup within an HTML document, with CSS rules controlling the body margin and line appearance, and applies a scaling transform to the entire group for visual emphasis.

JJosé

93% match