Skip to main content
SimilarExport ZIP
100%

Weird Smiley Face

✓ Published0🌍 Public
SSomu1433
Last edited Feb 25, 2023
Created on Feb 25, 2023

A stylized smiley face built with React and D3 renders as an SVG, with asymmetrical eyes, rotated brows, a triangular nose, and an open mouth arc. React components manage the SVG elements, while D3’s `arc` generator defines the mouth, brow, and inner mouth paths. Eyebrows and mouth are repositioned using SVG `transform` rotations and translations, and facial features are styled with varied fills, strokes, and opacity.

AI-generated description

Smiley face implementation with React & D3. Some tweaks on eyes, eyebrows, nose, mouth and hair. And eyebrows and mouth are rotated and translated.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part III

This smiley face visualization shows a cartoon face with asymmetrical eyes, eyebrows, a nose, a mouth, and hair, all rendered as SVG elements within a React component. The face is constructed using D3’s `arc()` generator for the eyebrows and mouth, with rotation and translation transforms applied to position them. React manages the SVG markup, while D3 v5 provides the arc paths. The eyebrows are rotated by -70 and 70 degrees, and the mouth is flipped 180 degrees, demonstrating composable geometric transformations.

Yyuzhang21
89% match
Loading thumbnail…

My D3.js Face

This D3.js and React example constructs a stylized smiley face using SVG primitives, combining circles, paths, and rectangles for its features. The face is assembled with D3 selections and vector drawing, including a mouth arc generated by the `arc()` API. The implementation also includes an animated eyebrow movement using the `transition()` method, which repeatedly shifts the eyebrows up and down over two-second intervals. The code demonstrates a hybrid approach, mixing declarative React components for some facial elements with imperative D3 commands for others, all rendered as static SVG within the page.

SSomu1433
88% match
Loading thumbnail…

Not so Smiley Face

A yellow smiley face rendered with React and SVG features two black eyes and a d3.arc-generated mouth, but the mouth is positioned off-center to the right, creating a lopsided expression. The face is drawn using React components for the background circle and eyes, while the mouth path is computed with d3.arc specifying inner and outer radii and start and end angles. The React application renders the SVG with fixed dimensions, and the misplaced mouth arc produces a subtly distorted facial expression.

Yyastika
88% match
Loading thumbnail…

Fork of Smiley Face Part III

A React and D3 composite renders a stylized smiley face using SVG primitives. The face features asymmetric eyes—one white with a black outline, the other light blue with a green outline—along with a purple triangular nose, gray rotated eyebrows, a white arc-shaped mouth with a concentric seam, and black hair-like strokes. D3’s `arc` generator constructs the mouth and eyebrow curves, while SVG `<circle>` and `<path>` elements define the remaining features. The composition is centered via a translated `<g>` group, with rotations applied to the mouth and eyebrows for expressive positioning.

SSomu1433
88% match
Loading thumbnail…

Smiley face with d3.js!!

This example shows a stylized smiley face built from basic SVG shapes—circles for the head and eyes, a line for an eyebrow, and an arc for the mouth—all rendered inside a React component. The face is centered using a `<g>` transform, with sizes and positions derived from computed constants like `eyeOffsetX` and `mouthRadius`. It uses React 16.9 with ReactDOM to mount the SVG, while the mouth arc is generated with D3’s `arc()` function, specifying inner and outer radii plus start and end angles. The code also includes an ellipse and an extra line that are not visually connected to the main composition.

HHarshinireddyy19
88% match
Loading thumbnail…

Smiley Face with green eyes

A yellow smiley face with green eyes, rendered as an SVG, uses React to structure the markup and D3’s `arc` generator to draw the nose and mouth paths. The face’s circular head, elliptical eyes, and decorative black eyelashes and smile lines are composed of hard-coded SVG shapes. React 16.9 manages the component, while d3.v5 provides the arc geometry for the mouth and nose, all displayed at a fixed 890×450 viewport.

Mmkt-ds
88% match
Loading thumbnail…

Smiley 1

A stylized smiley face is drawn with React and rendered as SVG, featuring a green circular background, red semi-transparent eye shapes, gradient-filled irises, a yellow diamond nose, and a curved mouth generated using d3.arc. The face is centered using a FaceContainer that applies a translation transform, while individual components like Eyes, BackgroundFace, and Mouth manage their own SVG elements. React 17 and D3 v6 are used, with the mouth path computed via d3.arc’s inner and outer radii and angle intervals.

Aavcwisesa
88% match
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face composed of SVG shapes, with distinct eyes, eyebrows, nose, mouth, and hair rendered in React. The face is centered within a 960×500 viewport, using a yellow circle for the head and colored arcs for the eyebrows and mouth. The code leverages React for component rendering and D3’s `arc()` generator to create the curved eyebrow and mouth paths, applying rotations and translations via SVG transform attributes. Stroke widths, fill colors, and opacity vary across features, highlighting the mix of D3 geometry helpers with declarative React markup.

SSomu1433
87% match