Shapes

100%

✓ Published0🌍 Public

Last edited Feb 25, 2021

Created on Feb 25, 2021

This example displays a set of basic SVG shapes—a circle, rectangle, line, and grouped shapes—positioned on a 900×500 canvas. It demonstrates how SVG primitives are styled with CSS and inline attributes, including fill colors, stroke properties, and transformations via a `<g>` element. The code uses plain HTML, CSS, and JavaScript, with SVG rendered directly in the browser. It shows how grouping elements and applying stroke, fill, and transform attributes affect the visual output.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

Aavglim3

94% match

Loading thumbnail…

Shapes with SVG

This example shows how to draw basic SVG shapes—circles, rectangles, and a line—on an HTML page. It demonstrates grouping with `<g>` elements to apply shared fill and stroke styles, and shows how individual shapes within a group can override those properties. The code uses raw SVG markup embedded directly in the HTML, with attributes like `transform`, `fill`, and `stroke-width` controlling appearance and position. No JavaScript libraries are used; rendering relies entirely on the browser’s native SVG support.

Jjlspangl

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, and a line—arranged within an SVG canvas. It shows how SVG elements can be styled directly via attributes like `fill`, `stroke`, and `stroke-width`, and how a grouping element `<g>` applies these styles collectively to its children. The rendering relies on raw SVG markup embedded in an HTML page, with a linked CSS stylesheet controlling page layout and overflow. The code uses core SVG APIs for drawing, without additional JavaScript libraries or data sources.

VVivian Peng

94% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered directly within an HTML page. It shows how SVG coordinates originate from the top-left corner, and how a `g` group element applies shared styling attributes like fill and stroke to its children. The code uses raw SVG markup, along with CSS for page styling and a small JavaScript snippet that logs a message to the browser’s console. The shapes are positioned using absolute pixel coordinates within a 960×500 viewport.

Ssravaniboggaram

94% match

Loading thumbnail…

shapes with svg

This example demonstrates basic SVG shapes— circles, rectangles, and a group—positioned within a 960×500 canvas. It shows how CSS styling and SVG attributes, such as `fill`, `stroke`, and `stroke-width`, control appearance and how a `transform` attribute translates a group of shapes together. The page is a static HTML document using inline SVG elements, with a minimal external stylesheet.

Nnexus1058

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, paths, and lines, composed within a single SVG canvas. The shapes are styled using both inline presentation attributes and an external CSS stylesheet, which defines a class for the line group to apply stroke properties. The SVG elements are nested within a `<g>` group that applies a scaling and translation transform. The rendering approach uses raw SVG markup within an HTML page, with no JavaScript libraries or data sources involved.

MMatthew Rubino

93% match

Loading thumbnail…

Shapes with SVG amd CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 canvas. The code uses raw SVG elements within an HTML page, with CSS in a separate stylesheet controlling presentation, such as red strokes for line groups and blue strokes for path elements. Grouping via the `<g>` tag applies shared transformations like scaling and translation, while CSS classes like `.lines` style these grouped elements. The rendering relies entirely on inline SVG markup and CSS rules, without any JavaScript interaction or data binding.

Ttgma99

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes can be styled and grouped using CSS and SVG attributes. It shows circles, rectangles, a line, and a path rendered on an SVG canvas, with fills and strokes applied directly or inherited from a `<g>` group. The code uses React to render the SVG elements, with styles defined in an external CSS file, and showcases SVG transforms for positioning shapes without repeated coordinates.

Bbcwein

93% match