Shapes with SVG & CSS

100%

Shapes with SVG & CSS

✓ Published1🌍 Public

Last edited Jan 3, 2020

Created on Jan 1, 2020

A green frog-like face drawn with SVG shapes and CSS styling. The image shows a large green circle with two layered eyes, a curved mouth, and a brown rectangular nose with horizontal lines. The SVG markup uses primitive shapes like `<circle>`, `<rect>`, `<path>`, and `<line>`, with CSS rules in `index.css` controlling stroke color and width for specific elements. The `src` attribute links the stylesheet, and the rendering is entirely vector-based in the browser.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. It shows circles, rectangles, a path, and a line, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG uses transform attributes like `scale` and `translate` to reposition groups of shapes, while the stylesheet applies stroke and stroke-width properties via class selectors, including specific styling for path elements.

Kketuckychix

82% match

Loading thumbnail…

Shapes with SVG and CSS

Kketuckychix

82% match

Loading thumbnail…

Shapes and Colors with SVG CSS

This example demonstrates how to create a simple face using SVG shapes styled with CSS. It shows a yellow circle with two black eyes and a curved mouth, all composed of basic SVG elements. The code uses D3 v5’s `select`, `arc`, and attribute methods to append and position the circles and path. The face is centered within an SVG canvas, with the mouth drawn using an arc generator specifying inner and outer radii and start and end angles. The styles.css file removes page margins and hides overflow.

LLHFO94

82% match

Loading thumbnail…

Shapes with CSS + SVG

This example demonstrates basic geometric shapes rendered with SVG, comparing their default styling, explicit fill attributes, and inherited presentation properties. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path` within a `<g>` container that applies a scale and translation transformation. CSS, via `styles.css`, defines a monospaced body font and strokes for the line group, including a rounded line join on the path. The code shows how shape attributes and CSS rules interact to control color, stroke width, and the overall visual appearance.

AAditya Kumar

82% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as scalable vector graphics: a red circle, a green rect, a thick black line, and a polygonal path composed of straight segments. The shapes are drawn directly in an SVG element within the HTML, with styling applied through inline attributes such as `fill`, `stroke`, and `stroke-width`. The accompanying CSS sets the page margins and overflow, while all visual properties for the shapes are defined using native SVG presentation attributes rather than a JavaScript library.

Mmeghagoyal17

82% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree

82% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

An SVG face centered on a 960×500 canvas uses D3 v5’s selection and arc APIs to build its features. Green and greenyellow circles form the head and eyes, while two rectangles animate as eyebrows via chained `transition().duration(2000)` calls, moving up and down over four seconds. A mouth path is generated with the `arc` function, using inner and outer radii with a half-turn angular sweep. The example demonstrates common SVG shapes and CSS styling within D3’s declarative, animation-capable rendering.

OOsekovS

82% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a simple face whose eyes, eyebrows, and mouth are built from SVG shapes. The eyebrows, drawn as rectangles, animate upward and back down using chained D3 transitions over two seconds each. The mouth is a path generated with the d3.arc helper, while the face’s construction relies on D3 selections, attribute setting, and SVG groups for positioning. CSS hides page margins and overflow.

Aarg04

82% match