Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published2🌍 Public
TTomas S
Last edited Nov 13, 2019
Created on Nov 13, 2019

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles and rectangles with varying fill colors, stroke properties, and a line with a polyline path, all grouped and transformed within an SVG canvas. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, along with CSS classes to control stroke appearance and line joins. A `<g>` element applies a translation transform, and inline attributes set fill and stroke values directly. The rendering is entirely client-side via SVG, with no external JavaScript libraries or data sources.

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

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles, rectangles, lines, and a path, with colors applied both as inline attributes and through CSS classes. The SVG is scaled and translated using transform groups, while the `.lines` class controls stroke properties like width and color, and the path uses round line joins and caps. Rendering relies on raw SVG elements within an HTML page, styled entirely by an external stylesheet.

Ddktaylor916
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays geometric shapes—circles, rectangles, a line, and a path—arranged in a grid, with colors and strokes varied through nested SVG groups. The visualization uses raw SVG elements (circle, rect, line, path) with CSS for page styling and transform attributes for scaling and translation. Fill and stroke properties are set directly on elements or inherited from parent `<g>` groups, demonstrating how SVG’s group hierarchy controls visual inheritance and positioning without additional libraries.

TTomas S
92% 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
92% 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
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
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles, rectangles, lines, and a path rendered within an SVG element scaled by a factor of 1.7. The code uses inline SVG attributes like `cx`, `cy`, `r`, `x`, `y`, and `transform` to position shapes, while CSS classes define stroke properties for the line and path elements. Fill colors are applied both directly via SVG attributes and through a `<g>` group with a hexadecimal value. No data source is present; the visualization purely illustrates SVG geometric primitives.

Jjunge870214
91% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static visualization with varied colors, strokes, and transformations. It shows circles, rectangles, lines, and paths arranged in groups, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The code uses raw SVG elements—such as `<circle>`, `<rect>`, `<line>`, and `<path>`—along with CSS rules that define stroke properties like `stroke-linejoin` and `stroke-linecap`. The visualization is rendered entirely in SVG, with groups applying translations and scaling via the `transform` attribute.

Ssethips
91% match