DevWorksSimone

@DevWorksSimone·2 public vizzes

Let's make a face with D3.js!

An animated SVG face draws attention with a yellow circular head, dark outline, and two eyes. Using D3.js v5, the code constructs the face from basic shapes—circles for the head and eyes, rectangles for eyebrows, and an arc path for the mouth—all contained within a group. The animation sequences alternate eyebrow raises and eye blinks over a few seconds. The example demonstrates D3's selection and arc APIs, along with chained transition methods to create a playful, looping facial expression.

Mar 1, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS properties can define basic graphics, using circles, rectangles, lines, and a path. The shapes are organized within groups that apply transformations like scaling and translation. Styling is managed through SVG presentation attributes, such as `fill` and `stroke`, as well as an external stylesheet that sets stroke colors and line caps for the path.

Feb 25, 2020