Shapes wtih SVG and CSS

100%

Shapes wtih SVG and CSS

✓ Published2🌍 Public

Last edited Jun 23, 2020

Created on Jun 23, 2020

This example shows a set of basic SVG shapes—circles, rectangles, a line, and a path—arranged in a grid and styled through both inline attributes and CSS. The scene demonstrates how SVG elements inherit properties from parent groups, such as a filled and stroked `<g>` that applies black outlines, and a classed group that uses CSS to set stroke width and color. It uses raw SVG markup within an HTML document, with presentation controlled by a linked stylesheet.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It uses raw SVG markup within an HTML page, applying inline attributes for fill, stroke, and transforms, while a linked stylesheet (`styles.css`) defines classes for line width, color, and path join styles. The scene groups elements to show how attributes and CSS rules combine, with a global scale transform enlarging the entire composition.

Ssourcebox-bug

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a custom path—arranged in a grid and scaled up. It demonstrates how inline SVG attributes set fill and stroke colors, while a CSS class applies a thick black stroke to the lines and a light blue color with rounded joins to the path. The rendering relies solely on the SVG markup in the HTML file, with no additional JavaScript libraries or data sources.

Ggabrielribeirob

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid on a 960×500 canvas. It demonstrates how inline SVG elements combine with CSS styling to control appearance, including fill colors, stroke widths, and line join styles. The scene explicitly assigns colors via attributes and CSS classes, with a transformed group and translated lines adding visual variety. The rendering uses raw SVG markup with no external libraries, relying on the browser's native SVG engine and CSS rules defined in a separate stylesheet.

AAdam Usmani

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. It shows circles, rectangles, a path, and a line, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG uses transform attributes like `scale` and `translate` to reposition groups of shapes, while the stylesheet applies stroke and stroke-width properties via class selectors, including specific styling for path elements.

Kketuckychix

92% match

Loading thumbnail…

Shapes with SVG and CSS

Kketuckychix

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, and a line—styled and arranged through inline attributes and CSS. It shows how SVG groups (`<g>`) can apply shared fill colors, strokes, and transforms to multiple shapes at once, while individual elements can override those inherited styles. The code uses raw SVG markup within an HTML document, with no external JavaScript libraries, and relies on a linked stylesheet for overall page typography and layout. The rendering approach is purely static SVG, with all positioning and styling declared directly in the markup.

Rross-fisher

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a coordinate system and scaled up. The shapes have various fills, strokes, and stroke widths, with some styles inherited from a parent group or defined via CSS classes. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path`, with transformations like `scale` and `translate`. The rendering approach uses an inline SVG, with styling applied through an external CSS stylesheet that defines classes like `.lines` for stroke properties.

DDifan Gu

92% match