shapes with svg

100%

shapes with svg

✓ Published0🌍 Public

Last edited Dec 7, 2020

Created on Dec 7, 2020

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.

AI-generated description

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

Similar vizzes

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

93% 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 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

92% match

Loading thumbnail…

Shapes with SVG

This example demonstrates fundamental SVG shapes—a circle, rectangle, line, and path—arranged in a 960-by-500 coordinate space. The graphics are defined directly in the HTML markup using SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`. One group applies a translation transform while another adds stroke styling, showing how SVG attributes control appearance and positioning. The page is styled with a minimal CSS file that resets the body margins and hides overflow.

Ppriyanshi0799

92% match

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates the basic building blocks of SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It shows how a group element can apply shared fill and stroke properties, while a separate class targets line and path elements for custom stroke width and color. The code uses plain HTML, CSS, and JavaScript within a React framework, rendering via SVG. The shapes are manually positioned with fixed coordinates on a 960 by 500 canvas, with no external data source.

Vvoid-LSTM

92% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—rendered on a 960-by-500 canvas. The composition uses a scaling transformation and a group with translation, fill, and stroke settings to show how attributes like fill, stroke-width, and stroke-linejoin alter appearance. The shapes are created directly in the markup with coordinates and styling, and the page is styled using a minimal CSS file, all within a React starter project.

Uujjwalgarad

92% 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

92% match