Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
Rrayray196
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from HTML Starter

This example displays a simple composition of four shapes—two large and small circles and a horizontal line—rendered on a 960 by 500 SVG canvas. The code uses raw SVG elements with CSS styling to set the pink fill, black stroke, and stroke widths. A group element applies the line’s thick stroke. It is a minimal demonstration of basic SVG shape drawing and CSS presentation, with no external libraries or data, providing a barebones starting point for visual experimentation.

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 how to draw basic geometric shapes using SVG elements styled with CSS and inline attributes. It shows a pink circle with a black stroke and a green rectangle with a blue stroke, each positioned within an SVG canvas. The code uses raw HTML markup with `<svg>`, `<circle>`, and `<rect>` elements, applying fill and stroke properties directly via presentation attributes. While the title references CSS, no external stylesheets or JavaScript libraries are present, relying solely on SVG’s native styling capabilities.

Rrayray196
94% 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
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how simple geometric shapes can be composed and styled using SVG elements and CSS. It shows two circles and two rectangles arranged on a canvas, with a lime stroke applied to one group and a hotpink line and path rendered as part of a separate group. The code uses raw SVG markup within an HTML page, along with a linked stylesheet that applies global typography and group-specific styling, such as stroke color and width, as well as a round line join for the path.

AAnnie Liao
93% 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
93% 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
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example renders a static composition of SVG shapes—circles, rectangles, lines, and a path—on a 960×500 canvas. It demonstrates how CSS classes and inline attributes control visual styling, such as fill colors, stroke widths, and line joins. The SVG is scaled with a transform, and elements are grouped using `<g>` tags to apply shared styling like white fill with green strokes. The code uses raw SVG syntax, including the `d` attribute for the path’s move-to and line-to commands, and a linked stylesheet assigns stroke properties to the line and path groups. No external libraries are used.

Vvic126
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a set of geometric shapes—a circle, a rectangle, a line, and a path—arranged in a 960 by 500 SVG canvas. The SVG elements are wrapped in groups that use transform attributes for scaling and translation, while CSS classes style the line and path with strokes and rounded joins. Rendered through React, the code uses inline SVG with attributes like `fill` and `stroke-width`, and the stylesheet defines the `.lines` group’s properties.

MMo
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a set of geometric shapes—two circles, two rectangles, and a line—arranged in an SVG canvas. The rectangles are grouped and styled with red strokes and a soft pink fill via CSS, while the circles use inline fill attributes. It demonstrates basic SVG rendering with React, using static markup without interactive behavior or data binding. The code relies on plain SVG elements (`circle`, `rect`, `line`) and CSS class selectors to apply visual properties, highlighting a minimal approach to shape composition.

TTeaMelab
93% match