Skip to main content
SimilarExport ZIP
100%

starter

✓ Published0🌍 Public
SShijiaYan
Last edited Jun 5, 2021
Created on May 27, 2021
Forked from React Starter

A face built from SVG circles and a D3 arc path responds to the mouse position. The multi-component React app, using `useState` and `useCallback`, tracks cursor coordinates and renders a simple circle. The face is composed from `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth generated by `d3.arc()` and the face assembled via `FaceContainer`. The code defines a yellow circle with black stroke, black eyes, and an arc-shaped mouth, all arranged in a fixed layout.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This interactive example shows a yellow, black-outlined face composed of SVG circles and a D3 arc path, centered on a 960×500 canvas. Built with React, the `Face` component dynamically positions eyes and a mouth based on configurable parameters like `eyeOffsetX`, `eyeRadius`, and `mouthWidth`. The D3 `arc` API generates the mouth’s semicircular shape, while React’s rendering composes the separate `BackgroundCircle`, `Eyes`, and `Mouth` components within an SVG container.

Yyawikflame
87% match
Loading thumbnail…

Face Starter

This visualization displays a stylized cartoon face composed of a yellow circular background, two black eyes, and an arc-shaped mouth, all rendered as SVG elements within a React component. The code uses React functional components and JSX to structure the face, while D3’s `arc` API generates the mouth path. The FaceContainer wraps the SVG and applies a translate transform to center the face, with fixed dimensions and positioning constants defining the layout.

Ssangar-si
86% match
Loading thumbnail…

React Starter

This React Starter example renders a smiling face using D3 v5 within a React application. The visualization shows a yellow circle with black stroke as the face, two black eyes, a curved mouth path, and an eyebrow rectangle, all positioned using SVG attributes. The code imports `select` and `arc` from D3 to append SVG elements and generate the mouth’s curved path with specified inner and outer radii and angles. Static dimensions and offsets, such as eye radius and position, are hardcoded, and the rendering relies on SVG elements created programmatically via D3 selections.

Ddistortedlights
86% match
Loading thumbnail…

HTML Starter

This example shows a simple yellow face composed of SVG circles and an arc-shaped mouth, centered within a 960×500 viewport. The code uses React to render the SVG elements, with D3’s `arc` generator defining the mouth’s path. Styling is handled via CSS, and the face’s geometry is computed from fixed constants like `faceRadius` and `eyeOffsetX`.

Vvram80
86% match
Loading thumbnail…

D3 Starter

A minimalist React application renders a smiling face in SVG using D3 v5, demonstrating basic shape creation and animation. The code builds circles for the head and eyes, a path for the mouth via `d3.arc()`, and rectangles for eyebrows within a group. A `transition().duration(1000)` animates the eyebrow group upward, while the static SVG elements use attributes like `cx`, `cy`, and `r`. The example highlights D3’s selection and append methods for constructing visual elements on a 960×500 canvas.

YYu Liu
85% match
Loading thumbnail…

Fork of React Starter

A simple face is drawn as yellow SVG circles, with black-stroked outer head, two eyes, and an arc-shaped mouth. The example uses React 18’s `createRoot` to render a static `App` component, while D3 v7’s `arc()` generator computes the mouth path from an inner and outer radius and fixed start and end angles. All shapes are positioned via SVG transform coordinates, and the code demonstrates basic integration of React JSX with D3’s geometry helpers for declarative visualization without interactivity.

AAlexander Lee
85% match
Loading thumbnail…

HTML Starter

This example shows a simple face constructed with SVG shapes: a yellow circle for the head, two black eyes, and an arc-shaped smile. The code uses D3 v5 selection methods like `select` and `append` to build the SVG hierarchy, and leverages the `arc` generator to define the curved path for the mouth. The visualization is rendered entirely through SVG elements within a 960x500 canvas, demonstrating a minimal setup for a React-based D3 project.

SSumit Gupta
85% match
Loading thumbnail…

HTML Starter

This example shows a simple face constructed with SVG shapes: a yellow circle for the head, two black eyes, and an arc-shaped smile. The code uses D3 v5 selection methods like `select` and `append` to build the SVG hierarchy, and leverages the `arc` generator to define the curved path for the mouth. The visualization is rendered entirely through SVG elements within a 960x500 canvas, demonstrating a minimal setup for a React-based D3 project.

SSumit Gupta
85% match