heart

100%

✓ Published0🌍 Public

Last edited Feb 18, 2022

Created on Feb 17, 2022

A heart-shaped face is drawn in SVG, with a yellow circular head, black-outlined eyes featuring white and black pupils, and a curved mouth formed as an arc. The visualization is built using D3.js v5, rendered through SVG elements, with the code importing `select` and `arc` from the D3 library. The example demonstrates programmatic creation of shapes and attributes, using the SVG viewport dimensions to scale features relative to the canvas.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Heart

A large yellow smiley face rendered with SVG. The face is centered on the screen, with its radius and the positions of the eyes and mouth calculated from the window dimensions. The code uses React and ReactDOM to draw the face, composing a circle for the head and two smaller circles for the eyes within a single SVG element. The stroke width and eye offset are predefined constants, and the face is positioned using an SVG transform.

Fferneyhoughedward@gmail.com

81% match

Loading thumbnail…

d3

This example uses D3.js (v7) to draw a simple yellow face on an SVG canvas. The visualization shows a circle for the face, two smaller black circles for eyes, and an arc-shaped path for a mouth. The code uses D3's `select` and `append` functions to build the SVG elements, and the `arc` function to generate the mouth path with specified inner and outer radii and angular range. The entire composition is centered on the canvas using a group element with a translate transform.

HHeet Bhatt

81% match

Loading thumbnail…

Face

This example shows a simple, stylized face rendered in SVG. A yellow circle forms the head, two black circles serve as eyes, and a black arc creates a smiling mouth. The code uses D3’s `select` and `arc` functions to construct the shapes, setting coordinates and radii relative to the SVG’s width and height. The rendering uses D3 v5 and outputs to SVG, with the mouth path created using the `arc` function’s parameters for inner and outer radius and start and end angles.

Ddvyachkil

81% match

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS1

A yellow circle face with SVG ellipses for eyes and a red smile is drawn over a red heart-shaped path. The code uses D3 v6 selections to append and style the circle, eyes, pupils, smile, and two smaller red heart ellipses as cheek decorations. The SVG template path provides the background heart shape, while d3.arc is imported but not used, with all rendering handled directly through SVG attributes in an HTML file.

Aanandamayeemodak

80% match

Loading thumbnail…

Shapes with SVGs

This example builds a smiling face out of basic SVG shapes, using D3 v6 to generate and style the visualization. A yellow circle serves as the head, with two black circles for eyes and an arc-shaped path for the mouth. The code imports `select` and `arc` from D3, and uses the `arc()` generator to create the mouth’s curved path based on inner and outer radii and angular start/end values. The visualization reads an SVG element from the HTML and positions elements relative to its center.

NNehaGawri

80% match

Loading thumbnail…

face again

A yellow circular face with black-outlined features sits centered on an SVG canvas. Two black eyes and a curved mouth are positioned symmetrically relative to the center. The code uses D3 v5’s `select` and `arc` APIs to construct the shape, with the mouth drawn via an arc path using inner and outer radii and specified start and end angles. The face is rendered entirely with SVG elements, sized relative to the canvas height.

PPabloEscargot

80% match

Loading thumbnail…

Hello

This example displays a simple, stylized face: a yellow circle for the head, two black circles for eyes, and a quarter-circle arc for the mouth. The SVG is built using D3 v6 selection and append operations, with positioning handled via SVG attributes. The mouth is generated using d3.arc, which creates a path based on inner and outer radius and angle parameters. The code uses D3’s selectors and the arc function on an empty 960x500 SVG canvas.

LLara Issa

80% match

Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face built from SVG shapes appears centered in the viewport, with two black eyes and a curved mouth. The example demonstrates basic D3.js shape generation using the `select` and `arc` APIs. Circles define the head and eyes with fixed pixel coordinates, while the mouth uses `d3.arc` with an inner and outer radius and a half-circle angle range. The SVG canvas is 960 by 500 pixels, and all elements are positioned relative to its dimensions.

FFatima125

80% match