Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published0🌍 Public
KKrishu
Last edited Aug 5, 2020
Created on Aug 5, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
100% match
Loading thumbnail…

Smiley face

This example creates a simple smiley face using D3.js and SVG. It draws a yellow circle for the face, two black circles for the eyes, and a mouth using an arc generator with specified inner and outer radii. The code uses D3 selections from the `d3` module, including `select` and `arc`, to create the shapes. The visualization is rendered in a React starter template with a fixed SVG size of 860 by 400 pixels.

Kkaviya-ds
94% match
Loading thumbnail…

Smiley face with D3

This example shows a classic smiley face drawn as a yellow circle with black eyes and a curved mouth on a transparent SVG canvas. The code uses D3 v5’s `select`, `append`, and `attr` methods to create SVG circles for the face and eyes, while the smile is rendered as a path generated by the `arc` generator with specified inner and outer radii and start/end angles. The face is centered within a 960×500 SVG element, and eye spacing and offset are controlled by numeric variables. No external data is loaded; all shapes are procedurally generated.

LLevi
94% match
Loading thumbnail…

Smiley face

This example renders a classic smiley face entirely with SVG primitives. The face is built using a yellow circle for the head, two smaller circles for the eyes, and a D3 arc path for the mouth, all grouped and centered via a transform. The code leverages React for component structure and rendering, while importing the `arc` function from d3.js to generate the curved mouth geometry. Stroke widths and positioning are defined through explicit constants, producing a simple, static illustration.

TThilak Raj T
93% match
Loading thumbnail…

Smiley

This example shows a smiley face rendered as an SVG graphic using React and D3. The face consists of a skyblue circle for the head, two smaller circles for eyes, and a mouth created with D3’s `arc` generator. The code defines constants for dimensions, positions, and radii, then uses a React component to output SVG elements. The `mouthArc` uses `d3.arc` with specified inner and outer radii and start/end angles to form the smile. The rendering approach combines React’s declarative UI structure with D3’s shape-generation API.

Ddivyagunuguntla
93% match
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
93% match
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
93% match
Loading thumbnail…

Smiley face

This example uses React and D3 v6 to render a smiley face as an SVG. The face is composed of a yellow circle for the head, two smaller circles for eyes, and a mouth drawn with a D3 arc path generator. The code positions the head and features relative to calculated center coordinates, with the arc’s inner and outer radii defining the mouth’s thickness and its angles creating the smile. All shapes are centered within a 960×500 viewport using a translated group element.

KKibegwa
93% match