Shapes with SVG

100%

Shapes with SVG

✓ Published1🌍 Public

Last edited May 20, 2021

Created on May 20, 2021

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.

AI-generated description

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

Similar vizzes

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 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 with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through CSS. The code uses raw SVG elements within an HTML page, applying inline attributes for positioning and fill colors, while external CSS rules control stroke properties and line joins. A transform scales the entire group and translates a sub-group, showing how SVG transformations compose. No JavaScript library is used; the rendering relies solely on SVG and CSS.

NNkwachi Abel

94% match

Loading thumbnail…

Shapes with SVG

This example demonstrates how to draw basic SVG shapes—circle, rectangle, line, and path—directly in a React-based HTML page. It shows how the `<g>` element groups shapes with shared transform and fill attributes, while CSS classes apply stroke styling to the line and path elements. The visualization relies solely on native SVG markup within the browser, rendered at a fixed 1000x1000 viewport, with no external charting library involved.

DDervinSun

94% match

Loading thumbnail…

Shapes

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.

DDavid Downie

94% match

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, and a line—using SVG elements within an HTML page. It shows how to apply CSS styling through an external stylesheet and how to use inline presentation attributes like `fill` and `stroke` to control color and borders. The code also groups shapes inside an SVG `<g>` element to apply consistent styling and a transformation. The page uses native SVG markup inside a React-rendered `index.html`, with the `style.css` file enforcing layout rules such as zero margins and hidden overflow.

CCristian Pintor

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