ice fork

100%

✓ Published0🌍 Public

Last edited Jun 19, 2022

Created on Jun 19, 2022

This example shows a stylized smiley face built entirely from SVG shapes, with the facial features arranged around a central point using React components. The face includes a yellow background circle, elliptical eyes and eyebrows, and a mouth drawn as a d3.arc path. The React components (BackgroundCircle, Eyebrows, Eyes, Mouth) accept props for positioning and sizing, while the main App component translates the coordinate system to center the face within a 960×500 viewport.

AI-generated description

A bare minimum HTML page.

HAlf way towards a smilley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face ICE

This example shows a yellow smiley face composed of a large background circle, two eyes, and a curved mouth, all rendered as SVG elements. React manages the component structure, while D3’s `arc` function generates the mouth path using specified inner and outer radii and start/end angles. The `BackgroundCircle` component is a reusable React piece, and the entire graphic is centered via a `<g>` transform. The code uses React 16.9, D3 v5, and the `arc` API, with no external data source.

JJerlineJJ

89% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from three reusable SVG components: a yellow background circle, a pair of eyes, and a mouth drawn as an arc. The face is positioned at the center of a 1060×500 SVG canvas using React components that receive geometry props for radii and offsets. The mouth path is generated with d3.arc(), while BackgroundCircle and Eyes render plain SVG circle elements. React 16.9 and D3 v7 work together, with all drawing handled declaratively through JSX.

Rrishyossarian

89% match

Loading thumbnail…

This is fork smiley for ICE-4

This fork of the classic smiley face example renders a static SVG scene using React and D3.js v7. It shows a large circular face with two eyes, colored pupils, a mouth drawn as an arc, and stylized hair and eyebrow lines. The visualization is constructed declaratively in React, with SVG primitives like circles, ellipses, and lines, while D3’s `arc` API generates the mouth path. All elements are positioned relative to a central transform, with hardcoded dimensions and stroke widths.

SSnigdha6698

88% match

Loading thumbnail…

Fork of Smiley face part 1 cooler face

This example shows a stylized smiley face rendered as an SVG using React and D3. The face consists of a yellow background circle, two eyes, and a mouth drawn with an arc generator from D3. The components are modular, with separate React components for the face, eyes, mouth, and background circle, all composed within a face container that applies a transform to center the graphic. The mouth uses `d3.arc()` with specified inner and outer radii and angles to create a curved smile shape.

Ddreidrachen

88% match

Loading thumbnail…

Fork - ICE 4

Built with React and D3, this example renders a smiley face as an SVG using geometric primitives such as circles, ellipses, and an arc path. The face is centered with proportional coordinates, and D3's `arc` generator creates the mouth, while React manages the component structure and rendering. Reusable constants define dimensions, colors, and offsets, and standard SVG elements like `<circle>` and `<ellipse>` are used for features like eyes, ears, and a nose. The code runs in a browser with React 17 and D3 v7, outputting a static vector illustration.

SSonuSriN

88% match

Loading thumbnail…

Fork of Hello HTML

This example shows a stylized smiley face built entirely from SVG primitives. A yellow circle with a black outline forms the head, two solid black circles serve as eyes, and a curved mouth is drawn as a partial ring. The face is constructed from modular React components, including `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the D3 `arc` API to define a path, while the entire composition is centered within an SVG using a translated group.

RRohith arabati

88% match

Loading thumbnail…

Fork of smile face part 1

This example displays a simple smiley face drawn as a yellow circle with black stroke, two eyes, and an arc-shaped mouth, all centered in an SVG. It shows how reusable React components define each facial part, with the `BackgroundCircle` and `Eyes` components accepting props for sizing and positioning. The code uses D3’s `arc` generator to create the mouth path, while React 17 and D3 v7 render the static SVG output. The viewport is fixed at 960 by 500 pixels, with a hidden overflow style.

Hhung2606

88% match

Loading thumbnail…

Fork of Smiley Face Part 1

This example renders a stylized smiley face using SVG primitives within a React component. The face is centered on a 960 by 500 canvas, featuring a yellow circle head, two black eyes, a nose, eyebrows, and a mouth drawn with d3.arc. The code imports the arc function from d3 and constructs the mouth path with inner and outer radii and specified start and end angles. Additional facial features are positioned via SVG circles, rectangles, and an ellipse, all transformed relative to the center point.

JJannaBe27

88% match