Skip to main content
SimilarExport ZIP
100%

Frowny Face (orobor0s)

✓ Published0🌍 Public
BBen
Last edited Jul 21, 2023
Created on Jul 21, 2023

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.

AI-generated description

Smiley face made via HTML, CSS, SVG, React, and D3

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

Faccia Sorridente

A smiling face is drawn with a yellow circle for the head, two black eyes, and a mouth formed by a thick arc. React renders the SVG elements, while D3’s `arc` generator creates the mouth path with specified inner and outer radii and start and end angles. The head and eyes are simple SVG circles, with positions calculated relative to a central group transform. All dimensions and offsets are defined as constants in the React component.

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

lets make a face I

A smiling cartoon face rendered as an SVG, composed of a large yellow background circle with a black stroke, two small eye circles, and a curved mouth arc. The illustration is built with React components and D3.js v7, using the `arc` generator to create the mouth path. All shapes are centered and positioned via SVG transform, with fixed dimensions of 960 by 500 pixels. The example demonstrates a simple, static data visualization using declarative React elements and D3 utilities for geometric path construction.

Tthaisonnguyenbt
85% match
Loading thumbnail…

D3

A smiling face built from SVG shapes, rendered with React components and D3’s `arc` generator for the mouth and nose. The face is centered via a `g` transform, with a yellow background circle, two eye circles, and an outlined smile path. D3 v7 computes the arc paths, while React 17 manages the component hierarchy and SVG rendering. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting size or offset props to control the face’s geometry.

SShasvathan Pathmanaban
85% 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
85% match
Loading thumbnail…

Face - tweakage

A cheerful yellow smiley face rendered as a static SVG uses D3's `arc` generator to create a mouth and React to compose a set of positioned circles and rectangles for eyes and facial details. The face is centered within a 960 by 500 viewport, with the head drawn as a circle and annotated by two black eye circles, white highlights, and red rectangular accents. The code demonstrates a React functional component that outputs SVG markup directly, combining D3 shape utilities with React's declarative element creation.

Eequiilibriumdigital
85% match