Skip to main content
SimilarExport ZIP
100%

Frowned face

✓ Published0🌍 Public
Nnjerijadline@gmail.com
Last edited Jan 27, 2025
Created on Jan 27, 2025
Forked from Fork of Hello HTML

This example uses React and D3 v7 to render a simple yellow face with two eyes and a frown in SVG. The code defines the face using D3’s `arc()` API to create the mouth path, with circles positioned via computed offsets for the eyes. The drawing is centered as a group, with the head stroke-width set explicitly. It does not load any data; it’s a static geometric visualization.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Frowned face

This example renders a simple cartoon face using React and SVG. It shows a yellow circle for the head, two black circles for eyes, and a curved path for a frowning mouth, all centered on the canvas. The face is constructed programmatically with D3's `arc()` API to generate the mouth arc, while the head and eyes are drawn using standard SVG `<circle>` elements. The code uses React to define the SVG structure and D3 v7 for the arc geometry, with the entire composition transformed to the center of the 960×500 viewport.

Nnjerijadline@gmail.com
95% match
Loading thumbnail…

Frowny Face (orobor0s)

A frowny face rendered as a single SVG graphic, built with React and D3’s `arc` generator. The code defines the yellow circle face, two black eye circles, and a downward-curving mouth path created from a D3 arc with specified inner and outer radii, angles, and a vertical translation. The SVG canvas is fixed at 960 by 500 pixels, with all elements centered via a transform group. React 18 manages the component rendering, while D3 v7 supplies the geometric arc calculation. No data is loaded; the visualization is purely code-driven.

BBen
89% match
Loading thumbnail…

Frown Face Part II

This example shows a frown face built with React and D3, rendered as SVG. The face uses a red circle for the head, black circles for eyes, and a mouth path generated by D3’s `arc` function with adjusted start and end angles to create a downward curve. The code imports `arc` from `d3-shape` and uses `ReactDOM.render` to mount the SVG inside a React component. All dimensions are computed from fixed variables for width, height, and offsets, with the mouth positioned via a translation and the arc’s inner and outer radii controlling its thickness.

Nnatsgeorge.ng@gmail.com
88% match
Loading thumbnail…

Sad Face

A sad face rendered in SVG using React and D3. The visualization shows a yellow circle with black outline as the face, featuring two black circular eyes positioned symmetrically, and a downward-curving mouth arc. The code uses `d3.arc` to generate the mouth path, with React components for the background circle and eyes. D3 v6 and React 17 are loaded via UMD, and the final drawing is produced by rendering SVG elements to the DOM.

KKolliSaiTeja
87% match
Loading thumbnail…

Face

A simple yellow smiley face rendered as an SVG in React, with two black eyes, a curved mouth, and a circular outline. The component uses D3’s `arc` generator to create the mouth path, while positioning elements with fixed pixel offsets from the center. The face is drawn using basic React elements inside an SVG container, with D3 v7 handling the arc’s inner and outer radii and angle range.

RRajumar Pagey
87% match
Loading thumbnail…

Face 3

A smiling face rendered as an SVG using React and D3, with a yellow circular background, two black eyes, and a curved mouth. The D3 arc generator defines the mouth's shape by setting inner and outer radii and start and end angles. React components structure the drawing, with a BackgroundCircle component and an Eyes component placed inside a translated group element, while D3 v6 provides the arc path calculation.

Eequiilibriumdigital
87% match
Loading thumbnail…

D3 FACE!

This example draws a simple smiley face using D3.js and renders it as SVG. The visualization shows a yellow circle with black eyes and a mouth, all positioned using fixed coordinates derived from the SVG's width and height attributes. The code uses D3's `select` API to target the SVG element and the `arc()` generator to create the mouth path. The implementation relies on D3 v5.15.0 loaded from a CDN, with all geometric values hardcoded in JavaScript.

Bbl75d
87% match
Loading thumbnail…

Face V

This example renders a stylized yellow face built with React and D3 v7, displaying a circular head, two black eyes, and a curved mouth. The code defines React components for the background circle and left eye, while the right eye is written inline as a JSX element. The mouth is generated using the `arc` function from the `d3-shape` package, producing an SVG path within a `<g>` element that uses a transform attribute to center it. All shapes are drawn as SVG elements, with the face composed directly in the source code rather than from external data.

HHimanshu Sharma
87% match