Shapes with SCG and CSS

100%

Shapes with SCG and CSS

✓ Published1🌍 Public

Last edited Jun 24, 2020

Created on Jun 24, 2020

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled using CSS. It shows three shapes on an SVG canvas: two circles and a rectangle, with the second circle explicitly filled red via an attribute. The code uses plain SVG markup within an HTML page, linked to an external stylesheet. The stylesheet defines a highlighted class with a red text color, although no elements in the markup currently apply this class, and sets the body margin to zero with hidden overflow. No JavaScript or additional libraries are involved.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SCG and CSS

This example shows four basic SVG shapes rendered in a 960×500 viewport. Two circles and two rectangles demonstrate SVG’s default black fill versus explicit CSS-independent color attributes, using named colors and hex values. The code relies on plain HTML, inline SVG elements, and a linked stylesheet that resets margins and hides overflow. It uses no JavaScript, React, or data, serving as a bare-minimum illustration of static SVG markup and CSS integration.

MMarina Shemesh

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—on a fixed 960 by 500 canvas. The circle uses default styling, while the rectangle is explicitly filled with red. The code directly embeds SVG elements in HTML and applies a small external stylesheet to remove page margins and hide scrollbars. Rendering relies solely on native SVG markup within the browser, without any JavaScript libraries, and the stylesheet also defines a `.highlighted` class that is not used by the shapes.

Aargonaeut

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and a line—styled with CSS and positioned directly in an HTML document. It shows how SVG elements can be given inline attributes like `fill`, `stroke`, `stroke-width`, and a `transform` group to control color, outlines, and placement. The code uses no JavaScript libraries, relying purely on native SVG markup and a small external stylesheet that resets the page margins. A red-highlighted class in the CSS hints at potential text styling, though no text elements appear in the rendered graphic.

Nncube-eng

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows basic geometric shapes rendered as SVG elements on an HTML page, with a few shapes styled using inline fill attributes and a CSS class that sets text color to red. The page displays two circles and two rectangles at fixed positions within a 960-by-500 SVG viewport, using plain SVG markup without any external libraries. The rendering approach is straightforward static SVG, with one circle and one rectangle using default black fills, while the remaining circle and rectangle use explicit red and green fill colors. The HTML links to a separate Styles.css file for global body styling, but the visual shapes rely entirely on SVG attributes.

Mmayurgadge58

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

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates two fundamental SVG shapes—a circle and a rectangle—styled purely with CSS. The SVG canvas is fixed at 1000 by 600 pixels, with the circle positioned at (60,60) and the rectangle at (150,10). The stylesheet applies a maroon fill to the circle and gray to the rectangle, while the body margin is reset to zero and overflow hidden. The implementation uses raw SVG elements directly in HTML, with CSS selectors targeting the `<circle>` and `<rect>` tags for styling.

RRaghavKakkar

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—are styled using CSS, with explicit fills, strokes, and group transformations. The SVG markup defines a 960×500 canvas, scaled by 1.5, containing shapes with hardcoded coordinates. CSS rules in `styles.css` apply stroke styling to line elements via a `.lines` class and set a round stroke-linejoin on paths, while the body’s margin and overflow are reset. No JavaScript or data is involved; the rendering relies solely on SVG’s native presentation attributes and external stylesheets.

Mmp7090

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create basic geometric shapes using SVG elements, including circles and rectangles with different fill colors and positions. The code defines an SVG canvas with a width of 900 and height of 500, then adds four shapes directly in the HTML markup. It uses plain SVG syntax for rendering, with a linked CSS stylesheet that resets the body margins and hides overflow. A small JavaScript snippet logs a message to the browser console, demonstrating where to inspect output using developer tools. The shapes include two circles and two rectangles, with fill attributes specified inline for some elements.

Ssrhodes

90% match