Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
AAbhinav Arun
Last edited Sep 27, 2022
Created on Sep 27, 2022
Forked from HTML Starter

This example shows how to create basic geometric shapes—circles and rectangles—using SVG elements styled with CSS. The code defines two identical groups of shapes, each translated vertically using SVG’s `transform` attribute, rendering blue circles and green rectangles on a 960×500 canvas. It uses plain SVG markup within an HTML page, with CSS (via `styles.css`) controlling the page layout and margins, while no JavaScript or external library is required. The rendering approach relies entirely on static SVG and CSS, demonstrating fundamental vector graphics in a bare-bones React-free setup.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. It shows basic geometric forms composed in a single SVG canvas, with properties like fill, stroke, stroke-width, and transform applied to individual elements or grouped via the `<g>` tag. The code uses plain React to render static JSX, relying on SVG’s native presentation attributes and a linked stylesheet for class-based styling, such as colored strokes on line groups. No data or interactivity is involved; the focus is purely on visual construction and CSS inheritance.

Ccledevoute
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—styled with CSS. It shows how shapes can be rendered in an initial row, colored inline via fill attributes in a second row, and then repeated within a translated group element. The code uses raw SVG markup inside an HTML page, with a linked stylesheet that resets margins and sets a highlight color. React is listed as the framework, though the visible code is standalone SVG and CSS without React-specific syntax.

Rryanrholler
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 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 displays two basic SVG shapes—a circle and a rectangle—positioned on a 960 by 500 canvas. The page uses plain SVG markup within an HTML file, styled by an external CSS stylesheet that resets the body margins and defines a `.highlighted` class (though not applied to the shapes). The rendering relies on native SVG elements like `<circle>` and `<rect>`, with no JavaScript or React interaction visible in the code.

PPrerna Mishra
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and path elements—using SVG within a React application, styled with CSS. The SVG canvas contains groups with transformations like scaling and translation, applying fills, strokes, and stroke widths. The `styles.css` file defines classes like `.lines` for shared stroke properties and `.lines path` for path-specific styling. Using raw SVG markup in `index.html`, it showcases foundational vector graphics rendering without external libraries.

IIyke2909
93% match