Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Oct 5, 2019

Created on Oct 5, 2019

A large black circle spans the full height of an SVG canvas, centered with its radius set to half the viewport height. Two smaller circles serve as eyes, positioned symmetrically with fixed spacing and a vertical offset, creating a simple face-like composition. The example demonstrates basic SVG shape creation and styling using D3 v5’s selection and attribute methods, such as `svg.append("circle")` and `.attr()`, alongside CSS resets that remove page margins and hide overflow. Rendering relies entirely on SVG elements manipulated through D3’s declarative API.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

A single large circle is rendered in the center of an SVG canvas, demonstrating basic shape creation and styling. The example uses D3 v5's selection and append methods to add the circle, with its radius and positioning calculated from the SVG's width and height attributes. CSS classes define stroke properties for potential line elements, while the circle itself relies on default SVG styling. The code shows a minimal setup for combining D3 with SVG and external stylesheets.

MMark Moesch

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes in an SVG canvas, displaying circles and a rectangle with default black fills except for one red circle. The scene is rendered entirely through SVG markup, with external styling handled by a CSS stylesheet. The code uses the D3.js `select` function to update a message element’s text content, while also showcasing an ES6 module import from a local file. The page layout is set with CSS to remove margins and hide overflow.

Rrmaldonadosnz

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example constructs a cartoon-like face from basic SVG shapes, including a large red circle, two smaller eyes, and a mouth drawn as an arc path. The visualization uses D3 v5 selection methods and the `d3.arc` generator to define the mouth’s geometry, while CSS sets a black background and removes page margins. Shapes are positioned and scaled dynamically based on the SVG’s width and height attributes.

BBraja Gopal Das

88% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A static SVG canvas displays a single large yellow circle with a grey outline, centered using explicit width and height attributes. The example demonstrates basic SVG shape creation and CSS styling through a D3.js v5 script that selects the root `svg` element, appends a `circle`, and sets its radius, position, fill, and stroke attributes. The accompanying stylesheet applies a full-bleed layout with no margin or overflow. This minimal composition highlights fundamental vector graphics and presentation techniques in a browser-based visualization.

AAnkush Malik

88% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black eyes and a white rectangular lower section forms a simple face. The example demonstrates fundamental SVG shape creation and styling using D3 v5 methods like `select`, `attr`, and `append`, along with the `arc` generator for the mouth path. CSS sets the page margin and overflow. The visual is built entirely with static SVG elements positioned via attributes, with no data binding or interaction.

Aadlankj

87% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to render shapes in an SVG canvas with CSS styling. It loads D3 through UNPKG and uses an SVG circle element with a radius set to 100 pixels. The stylesheet defines a basic body reset and a highlighted class that changes text color to red, though the circle itself does not currently apply this class. The visualization shows the structure for combining raw SVG markup with external styling rules.

BBlakeMcMurray

87% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A minimal SVG scene drawn with D3 v5 renders a single circle centered within a 960-by-500 viewport. The code uses `svg.append('circle')` and sets `r`, `cx`, and `cy` attributes based on the SVG’s width and height, while an external stylesheet removes page margins and hides overflow. The circle fills half the vertical space, demonstrating basic shape creation and attribute binding without data or interaction.

NNick S.

87% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—a circle and an empty rectangle—positioned within a 960x500 viewport, with the SVG element's background colored red via D3's selection and style methods. It uses D3 version 6 to select the SVG and apply CSS styling, while the shape styling is handled through linked CSS. The page shows how to integrate D3 with raw SVG markup and external stylesheets, rendering static vector graphics without data binding or interactivity.

SSadik Özoguz

87% match