Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published1🌍 Public
Ssakthi1001
Last edited Nov 6, 2020
Created on Nov 5, 2020
Forked from HTML Starter

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Ssakthi1001
100% match
Loading thumbnail…

Smiley face

This visualization displays a simple yellow smiley face rendered as SVG, composed of a circular face, two black eyes, and an arc-shaped mouth. The code uses D3 v5’s `select` and `arc` APIs to construct the path for the mouth, while positioning all elements relative to the SVG’s width and height. The face is drawn with a circle, and the eyes are offset from the center using explicit pixel coordinates. The `arc` generator defines the mouth’s inner and outer radii with start and end angles, producing a fixed smile shape.

Ssrwezuva
95% match
Loading thumbnail…

Smiley

A smiling face is drawn as a yellow circle with black outlines, using two smaller circles for eyes and an arc-shaped path for the mouth. The visualization is built with React, where the SVG elements are declared in JSX. It uses D3’s `arc` function to generate the mouth’s path data, with explicit angles and radii controlling the smile’s curvature. The complete graphic is rendered to the page via `ReactDOM.render`.

BBlake Fitzpatrick
93% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, set against a red background. Two smaller circles create the eyes, while a thick arc-shaped path forms the mouth. The drawing is centered using an SVG `g` element and a `translate` transform. The code uses d3’s `select` and `append` to build the SVG structure, and the `arc` generator to define the mouth’s path, with all coordinates calculated relative to the canvas center.

Kkaddindr
93% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, containing two white eyes with black pupils, a simple nose made of two connected lines, and a curved smile drawn with a D3 arc path. The SVG is built with React components, using d3.arc to compute the mouth’s path with specified inner and outer radii and angles. All shapes are positioned relative to a centered transform, with fixed dimensions and stroke widths defining the minimalist cartoon style.

Dddelorimier
93% match
Loading thumbnail…

Smiley Face

This example presents a classic smiley face rendered as an SVG graphic. It uses a yellow circle for the face, black circles for the eyes, and a path for the mouth, all centered within a 960 by 500 viewport. The visualization is built with React, using JSX to define the SVG elements, and leverages the `arc` function from d3 to construct the mouth's curved path. The code demonstrates precise positioning through coordinate offsets and transforms.

NNathan Miller
93% match
Loading thumbnail…

Smiley???

The visualization shows a simple smiley face composed of a yellow circle with black outlines, red eyes, and a red mouth. The face is built using SVG shapes, including circles and a rectangle. The React application renders the face using D3’s `arc` generator to create the mouth as a semicircular path. The code defines dimensions for the eyes, mouth radius, and stroke widths, and both the circle elements and the path are positioned within a transformed group. The source is provided in the `index.js` file, which uses React and D3 for rendering.

DDavidPal94
93% match
Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

KKrishu
93% match