Skip to main content
SimilarExport ZIP
100%

Face with Rolling eyes

✓ Published0🌍 Public
CChaitanya Galla
Last edited Feb 18, 2022
Created on Feb 18, 2022
Forked from HTML Starter

A yellow circle face with rolling eyes and a neutral, rectangular smile. The eyes are drawn as white circles containing black corneas positioned upward and inward, creating the rolling-eye effect. The visualization uses D3.js version 7 to append SVG elements, including circles for the face and eyes and a rectangle for the mouth, with hardcoded dimensions based on the SVG's height and width.

AI-generated description

ICE 4 CSCE 5320

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face with D3.js

A yellow circle forms a smiling face on a green background, with two black eyes positioned symmetrically. The visualization uses D3.js v5 to select the SVG element and append circles with specific attributes for radius, center coordinates, fill, and stroke. The code defines eye spacing and offset constants, then draws the face using three separate circle elements: one large yellow head and two smaller black eyes, all rendered statically without animation.

RRandika87
86% match
Loading thumbnail…

Face With D3

A yellow smiley face is rendered in SVG, with two eyes, animated eyebrows, and a mouth formed by a semicircular arc. The face is centered within a 960 by 500 SVG canvas, with all facial features positioned and styled using D3 selections. The eyebrows use chained D3 transitions to move up and down over two-second intervals, creating a blinking or winking effect. The code imports `select` and `arc` from D3 v5, demonstrating the use of D3's shape generator for the mouth path.

Ssagarknt97
85% match
Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha
84% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
84% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
84% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe
84% match
Loading thumbnail…

D3 Face

A yellow circle with black strokes forms a face, featuring two eyes and eyebrows that animate in a blinking motion, while a mouth is drawn as an arc. The eyes scale vertically to simulate blinking, and the eyebrows shift upward twice before returning. Built with D3 v3, the visualization uses SVG elements and transitions, leveraging `select`, `arc`, and chained `transition` calls to orchestrate the timed animations.

JJonah Meijers
83% match
Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Mmyoung1032
83% match