Shapes with SVG and HTML

100%

Shapes with SVG and HTML

✓ Published2🌍 Public

Last edited Jun 6, 2020

Created on Jun 4, 2020

This example demonstrates how to draw a face using basic SVG shapes—circles, rectangles, a polygon, and an arc—positioned relative to the canvas center. The code leverages D3 v5 selection and attribute methods (`select`, `attr`, `append`) to build each element, with the mouth created via the `d3.arc()` function. It uses a fixed 960×500 coordinate space, with hardcoded pixel offsets for facial features like eyes and eyebrows, all rendered as SVG within a React-free HTML page.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

A stylized face built from geometric primitives is rendered using SVG elements styled and positioned through D3.js. The code demonstrates the use of D3's `select`, `append`, and `attr` to create and configure circles for the face and eyes, alongside a path that uses the `arc` generator to form a mouth shape. Data for element positions and sizes are derived from the SVG's `width` and `height` attributes, showcasing dynamic, attribute-driven layout. The example relies on React for the overall application structure, with rendering handled via raw SVG within the HTML document.

Aandy-yc-lin

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example constructs a smiling face out of basic SVG shapes—circles, rectangles, and a path—drawn inside a 960 by 500 pixel canvas. The face is centered using a `transform` on a group, with static features like the yellow head, black outline, eyes, and an arc-based mouth. The eyebrows are rectangles that animate up and down using sequential `d3.transition()` calls, each lasting two seconds. The code leverages the D3.js v7 library's `select`, `append`, `attr`, and `arc` APIs within a React framework, rendering entirely as SVG.

Mmrdeevid

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example creates a simple animated face using SVG shapes and CSS styling. The face consists of a yellow circle with black stroke, two eyes, eyebrows, and a mouth path drawn with the `arc` function. The eyebrows animate up and down using D3’s `transition` method over two-second intervals. The code uses D3 v6 selections and SVG attributes to position elements relative to the center of the 960x500 canvas, with a standalone HTML page linking to a stylesheet and bundled JavaScript.

AAlbert

89% match

Loading thumbnail…

Shapes in SVG and CSS

An animated face drawn with SVG shapes is rendered inside a 960×500 viewport. The code uses D3 v5’s selection and arc helpers to construct the circular head, eyes, and a mouth path, while CSS handles the page layout. Eyebrow rectangles animate upward and downward through a chained `transition` call lasting two seconds per movement. The face is centered with a transform, and all elements rely on SVG attributes for positioning and styling.

BBaraneedharan N M

89% match

Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates how to create a smiling face using basic SVG shapes—circles for the eyes and an arc for the mouth—positioned within a 960x500 viewport. The code uses D3 v5’s `select` and `arc` functions to append elements to the SVG, while CSS styles handle page margins and a red highlighted text class. The arc is generated using inner and outer radii with a start angle of zero and an end angle of π, producing a half-circle smile centered in the composition.

SSuperweedMan

88% match

Loading thumbnail…

Shapes with SVG and CSS

A face constructed from SVG circles uses React to render two yellow circles with black strokes as eyes and a larger yellow circle as the head, all positioned using JavaScript variables for coordinates and radii. The example demonstrates how to create simple vector shapes with D3.js and React, using inline styling and SVG attributes to control fill colors, stroke widths, and layout within a 960x500 viewport.

Jjwadh

88% match

Loading thumbnail…

Face using HTML, CSS, SVG

This example renders a stylized face as an SVG graphic using React and D3. It uses D3’s arc generator for the mouth, along with HTML and CSS for layout and styling. Circles are used for the head and eyes, while a rotated rectangle forms the nose, all positioned within an SVG canvas. The code is a bare-minimum starter demonstrating how to combine React’s declarative JSX with D3’s shape utilities for custom data visualization. The face is centered on a fixed 960×500 viewport.

LLakshyaSatpal

88% match

Loading thumbnail…

Shapes with SVG and CSS

This example uses D3.js to build a smiling face entirely from SVG shapes—circles, rectangles, and an arc path—with animated eyebrows. The SVG canvas is selected directly, and D3’s `transition()` and `duration()` methods move the eyebrow group up and down in a looping motion. The page also includes static SVG circles and rectangles with CSS-defined fills to demonstrate basic shape styling. Rendering relies on SVG elements created via D3 selections, with the face centered using width and height attributes from the SVG element.

Rrkdunn

88% match