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 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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG new

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.

Mmirna981
95% match
Loading thumbnail…

Shapes with SVG

This example demonstrates basic geometric shapes rendered directly through the SVG API, including a circle, rectangle, line, and path. A `<g>` group element applies a transformation to translate shapes vertically and sets fill and stroke attributes. Two additional groups illustrate styling variations with different colors and stroke widths. The code uses native SVG elements within an HTML document, with the stylesheet defining a large monospace font for the body but no styling for the shapes themselves.

Kkami310599
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling and grouping controlled through CSS and SVG attributes. It shows two circles and two rectangles, using explicit fill colors on some shapes and applying a blue fill to a grouped set of shapes via the SVG `<g>` element’s transform and fill attributes. The code uses raw SVG markup within an HTML document, linking to an external stylesheet that sets the body margin and overflow. No JavaScript libraries are involved; the rendering relies entirely on native SVG and CSS.

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

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214
91% 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
91% match