Skip to main content
SimilarExport ZIP
100%

Shapes with SVG new

✓ Published1🌍 Public
Mmirna981
Last edited Oct 7, 2019
Created on Oct 7, 2019

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements. It shows default black shapes, shapes with explicit fill colors, a group with white fills and black strokes, and a separate group styled with thick lines and rounded line joins. The rendering relies solely on SVG’s native markup within an HTML document, with CSS imported from Google Fonts controlling the layout and hiding overflow. No external JavaScript libraries are used.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG new

This example showcases basic geometric shapes rendered with SVG, including circles and rectangles with varied fills and a translated group containing outlined shapes. It also demonstrates line and path elements with custom stroke styling, such as rounded joins and a distinct color. The code uses plain SVG markup within an HTML document, leveraging the `<svg>`, `<g>`, `<circle>`, `<rect>`, `<line>`, and `<path>` elements. Styling is applied via CSS classes and inline attributes, with the body hidden from overflow for a clean presentation.

Mmirna981
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be drawn and styled using SVG elements and CSS. It shows shapes with default black fills, explicit color fills, grouped shapes with shared stroke and fill attributes, and a separate class for lines and paths that applies stroke styling via CSS rules. The code uses plain SVG markup within an HTML page, with a linked stylesheet for class-based styling, and includes an ES6 module exporting a message.

YYF
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped with SVG transforms. The first row uses default black fills, the second introduces explicit fill colors, and the third demonstrates a group-level fill with a black stroke. A fourth group applies a CSS class to style the lines and path with custom stroke width and colors. The rendering uses plain SVG elements in an HTML page, with CSS rules in `styles.css` controlling presentation attributes like stroke, fill, and line joins.

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

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Mmirna981
90% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Mmirna981
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in two translated groups against a plain background. The first group shows default black shapes, while the second uses group-level fill and stroke attributes to alter appearance. A third group, moved horizontally, displays a stroke-heavy line and a semi-transparent steelblue path with rounded corners. The code relies on raw SVG elements and CSS class selectors (`.lines`, `.lines path`) for styling, with a JavaScript console log present but no interactive behavior.

Kkkwyoung
90% match