Skip to main content
SimilarExport ZIP
100%

French Fries with Blinking Eyes using SVG Fundamentals

✓ Published0🌍 Public
SSiddhi Patil
Last edited Sep 27, 2021
Created on Aug 30, 2021
Forked from SVG Fundamentals

This SVG visualization shows a cartoon packet of French fries with a simple animated face. The fries and container are drawn with basic SVG shapes, including paths and polygons, using a palette of reds, oranges, and yellows. The face, featuring two blue elliptical eyes and a curved smile, sits on a rectangle representing the front of the packet. A blinking effect is created by animating the height of a small mask, with the eye ellipse controlled by SVG's native animation capabilities, using the `<animate>` element on the rectangle's height attribute, referencing a mask. The design is based on a vector from SVGRepo, with the winking effect inspired by a CodePen example.

AI-generated description

This visualization uses SVG and displays French Fries with a simple animation effect of blinking eyes.

References used for this visualization are listed below -

  1. French Fries SVG Vector
  2. SVG Animation (wink-robot)
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of BA401 EXERCISE$

This example shows an animated, SVG-based face that blinks with a two-second eyebrow bounce. The graphic is built with D3, using `select` to target the SVG and append functions to create grouped elements for the eyes, eyebrows, and mouth. The mouth is a D3 `arc()` path, and the animation is driven by chained `transition().duration()` calls that move the eyebrows up and down. The static HTML includes a pink circle with green stroke, while D3 adds the yellow face behind it.

Iikbb-kbj
72% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A smiling face drawn with SVG shapes animates its eyebrows in a loop. The example demonstrates basic SVG elements—circle, rect, and path—styled with CSS and manipulated through D3 v5 selections and transitions. The face is centered using SVG transforms, with the mouth generated via `d3.arc` as a half-circle path. Eyebrows alternate between two vertical positions using chained `transition().duration(2000)` calls, creating a playful wink-like effect. All rendering is static SVG with animation handled purely through D3’s transition system.

Mmorjyooo
71% match
Loading thumbnail…

Fork of Fork of Fork of BA401 EXERCISE$

This animated SVG face uses D3.js to construct a yellow circular head with eyes, eyebrows, and a mouth from basic shapes and paths. The eyebrows animate vertically using D3 transitions, moving down 50 pixels and back over two-second intervals. The static SVG markup provides a pink background circle with green stroke and two small circles, while the JavaScript code dynamically builds the facial features using D3's `select`, `append`, and `arc` API.

Iikbb-kbj
71% match
Loading thumbnail…

Lets make a face

A cheerful cartoon face is drawn in SVG, with a yellow circular head, black-outlined eyes and eyebrows, and a curved mouth made from an arc path. The eyes and eyebrows perform a repeating blink animation using chained `transition().duration(500)` calls, shrinking the eye radius and shifting the eyebrow group vertically before returning to their original states. The visualization uses React with D3 v5, specifically the `select` and `arc` utilities, to build and animate the face in a fixed 960×500 SVG canvas.

Llukastieber
70% match
Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Ssivakaman
70% match
Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Ssivakaman
70% match
Loading thumbnail…

Pink Face

A pink smiley face rendered in SVG animates its blinking eyes, shifting eyebrows, and a mouth that opens and closes. Built with D3.js v5, the example demonstrates core DOM manipulation through selections, shapes, and chained transitions. It uses `transition.attr` and `transition.attrTween` with the `arc` and `interpolate` helpers to animate the mouth’s angles and eyebrow position, while a recursive `blink` function cycles eye radii via timed transitions.

AAsrar Al Qassem
69% match
Loading thumbnail…

Face Time! D3.js

A smiling face rendered in SVG animates its pupils downward, creating the effect of blinking eyes. The illustration uses basic geometric shapes: circles for the head, eyes, and pupils, plus a D3 arc path for the smile. Built with D3.js v5, the animation is driven by chained transitions that move the pupil positions over set durations. The SVG canvas is 960 by 500 pixels, with shapes styled via attributes like fill and stroke.

AAli Shah
69% match