Fork of Smile

100%

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

Forked from Smile

A yellow circle face with eyes, eyebrows, and a mouth forms a static smiley, but the right eyebrow performs a brief animated wink-like movement before settling back. The SVG is drawn using D3 v5 selections and the `arc` generator for the mouth path, with transitions applied to the eyebrow's vertical position over two timed stages. The face is centered at 960 by 500 pixels, using pure SVG shapes without any external data.

AI-generated description

My first try HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley face

A yellow smiley face is drawn on an SVG canvas, centered and sized to the viewport. The graphic shows a static face with two black eyes, eyebrows, and a curved mouth, while the eyes transition from their initial state to black over three seconds after a one-second delay. The code uses D3 v6 selections and transitions, including `transition.delay()` and `transition.duration()`, to animate the eye fill colors. The face is constructed with SVG circle, rect, and path elements, using `d3.arc()` for the mouth’s curved shape, all within a centered group.

AArun

91% match

Loading thumbnail…

Fork

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—demonstrating DOM selection and manipulation via `d3.select` and `d3.append`. The eyebrows repeatedly shift vertically using a chained `transition().duration(2000)` sequence. All positioning relies on fixed numeric coordinates and transforms, with no external data source.

Nnsatyaprakash22

89% match

Loading thumbnail…

Fork of Smile Face

This visualization shows a simple smiley face composed of a large yellow circle with two smaller black circles for eyes. The SVG is rendered with fixed dimensions of 960 by 450 pixels, using straightforward shape elements like `<circle>` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No JavaScript libraries or interaction are involved; the page relies solely on inline HTML and CSS for presentation. The face occupies the center of the canvas, with the eyes positioned symmetrically on either side of the face’s vertical axis.

Kkiranshashi

89% match

Loading thumbnail…

Smile

A yellow circle face with black eyes and animated eyebrows renders as an SVG in D3 v5. The code uses `select`, `arc`, and chained `transition` calls to lower and raise the rectangular brows over two seconds. A mouth path built from an arc with reversed inner and outer radii completes the expression. The static image shows a cheerful face, while the eyebrow animation adds a dynamic, playful smile effect.

BBeeehive

89% match

Loading thumbnail…

Fork of Fork of face

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation using D3.js. The face is built from SVG shapes, including circles for the eyes and head, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses d3.select and d3.arc, with a chained transition that moves the eyebrow group up and down over two-second intervals, creating a looping eyebrow raise. Static attributes set the face dimensions and positions within a 960 by 500 SVG canvas.

EEbenizerR

88% match

Loading thumbnail…

Fork of Smiley Face Part I

This fork renders a static yellow smiley face on a black-outlined circle, with two smaller circles for eyes, using raw SVG elements. The drawing is embedded directly in an HTML page via inline SVG markup, with no external libraries or JavaScript. The face is centered on a 960 by 500 canvas, and the code demonstrates basic SVG shape construction with explicit `cx`, `cy`, and `r` coordinates and a fixed stroke style.

Ddipalishah23x

88% match

Loading thumbnail…

Fork_Yellow_PY

A static yellow smiley face rendered as SVG, with two dark eye circles and a mouth arc positioned half-way toward the final shape. The outer face uses a filled yellow circle with a black stroke, while the mouth is drawn using D3's `arc` generator with inner and outer radii, spanning from π/2 to π radians. The code selects the SVG element with `d3.select` and appends a group translated to the center, relying on D3 v7 to construct the arc path. Eye positions and sizes are hardcoded, and no data source is involved.

NNikhitha630

88% match

Loading thumbnail…

Fork of Learn to draw smile with d3

A yellow SVG smiley face is drawn with D3 v5, featuring two eyes, animated eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and SVG elements like `circle`, `rect`, and `path` within a centered group. Eyebrows transition vertically via `transition().duration()`, while the face is rendered on a 960×500 canvas with black strokes. All shapes are generated programmatically without external data, demonstrating basic SVG drawing and animation with D3's selection and transition APIs.

0007ebey

87% match