Skip to main content
SimilarExport ZIP
100%

React-sirkel

✓ Published0🌍 Public
Ssheetbag
Last edited Aug 20, 2021
Created on Aug 20, 2021

This example renders a single cartoon face composed of SVG shapes in a React component hierarchy. The face includes a wheat-colored background circle, two eyes, and a D3-generated mouth path created with the `arc()` API. The Face component composes reusable subcomponents (`BackgroundCircle`, `Eyes`, `Mouth`) inside a `FaceContainer` that positions the group at the center of a 960×500 SVG canvas. All visuals are static, produced with d3.v7 for the arc geometry and React 17 for DOM rendering.

AI-generated description

Ut del VI på kurset. Tok ikke med Math.random() og multiplisering av flere ansikter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face Part V

A cheerful cartoon face renders as SVG from React components. The example splits the visualization into separate files for the background circle, eyes, and mouth, using ES6 modules and React fragments to organize the code. The mouth's arc shape is generated with the `d3.arc` API, while the background and eyes are simple SVG circles. The face is centered on a yellow circle with a black stroke, and the eyes and mouth are positioned relative to the center using SVG transforms.

Kkripton-it
86% match
Loading thumbnail…

D3 React Face

Ten identical cartoon faces are arranged in a row, each rendered as a yellow SVG circle with black outlines, two eyes, and a mouth. The example demonstrates the composition of reusable React components (`BackgroundCircle`, `Eye`, `Mouth`) assembled into a `Face` element. The `Mouth` uses the D3 v7 `arc` generator to create a curved path, while the `FaceContainer` handles the SVG coordinate translation. The `App` component maps over an array to render the repeated faces.

MMark Lam
85% match
Loading thumbnail…

base for face

This example shows a cartoon face built from layered SVG circles and an arc, rendered with React components. The face consists of a yellow background circle with a navy stroke, gray eye whites, sky-blue irises with black pupils, and a d3.arc-generated smile. Each facial feature is a separate React component (BackgroundCircle, EyeCircles, IrisCircles, PupilCircles, MouthArc) composed within a FaceContainer that handles SVG centering. The code uses d3.v5’s arc() API to construct the mouth path, with all geometry driven by numeric props for radius, eye placement, and thickness.

KKristopher Skelton
85% match
Loading thumbnail…

face

A simple cartoon face is drawn using React and SVG, with a yellow circular background, two eyes, and a smiling mouth. The face is composed of separate React components, each responsible for a part (BackgroundCircle, Eyes, Mouth). The mouth is generated using the `arc` function from the d3 library to create a path with a specified inner radius, width, and angular range. The overall composition is centered and scaled through the `FaceContainer` component.

Ooeohomos
85% match
Loading thumbnail…

Let's make a face

This example shows a cartoon face built from layered SVG shapes, with a blue circular background, two black eyes, and a curved mouth. The face is composed modularly, with separate React components for the background, eyes, mouth, and a container that translates the center point. The mouth uses the d3.arc() API to generate its path from radius and angle parameters. All elements render as SVG inside a React component tree, positioning the face at the center of a 960-by-500 viewport.

EEd Hutchinson
85% match
Loading thumbnail…

Hello HTML

This example renders a simple cartoon face using React components and SVG. It shows a yellow circle face with two eyes and a mouth, centered on a 960x500 canvas. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, which use d3’s `arc` to generate the mouth path. The face is composed declaratively via React props in `Face.js`, with `FaceContainer` providing the SVG root and coordinate transforms. The main app sets dimensions and offsets directly in JSX, targeting plain HTML via ReactDOM.

Aask4jm
85% match
Loading thumbnail…

p1

This example shows a simple cartoon face rendered with React and D3. The face consists of a yellow background circle, two eyes, and an arc-based mouth, all composed as reusable React components that accept props for dimensions and positioning. The `<Face>` component assembles `BackgroundCircle`, `Eyes`, and `Mouth`, which uses D3's `arc()` generator to create the smile path. A `FaceContainer` SVG wrapper translates the coordinate system to center the face within a 960x500 viewport. The code uses React 16.7 for component rendering and D3 v7 for the arc shape, with the face's appearance defined entirely by prop values.

Kkiteogawa1@g.ucla.edu
85% match
Loading thumbnail…

Face

This example builds a stylized cartoon face from reusable React components, including a yellow background circle, two eyes, and an arc-shaped mouth. The components are composed in a FaceContainer that centers all elements within an SVG using a transform. The mouth is drawn with the d3.arc() API, which generates the path using specified inner and outer radii and start and end angles. React 18 and D3 v7 handle the rendering, with visual properties like eye offset, radius, and stroke width passed as props to customize the face.

SSergey Shulzhenko
85% match