EsteLima

@EsteLima·4 public vizzes

Fork of Fork of Lets make a face

A yellow face with black outlines is drawn on an SVG canvas using D3 v6. The animated eyebrows move up and down via chained `transition().duration()` calls. The face is constructed from primitive shapes: circles for the head and eyes, and a path generated with the `arc()` API for the mouth. The code imports `select` and `arc` directly from D3.

Feb 23, 2021

Loading thumbnail…

Fork of Lets make a face

This example shows a simple yellow cartoon face with eyes, eyebrows, and a mouth, built entirely with D3.js v6 and rendered as SVG. The eyebrows animate by moving up and down repeatedly over two-second transitions. The face is centered using a group translation, and the mouth is drawn with the `d3.arc` path generator. The code uses `select` and `arc` from the D3 library, with hardcoded dimensions for spacing and radius, displaying a looping motion without any external data source.

Feb 23, 2021

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS classes can be combined to create static styled graphics. It shows circles, rectangles, a line, and a path, with fill and stroke colors applied directly on elements or inherited from a parent group. The code uses plain SVG elements within an `<svg>` tag, and a separate stylesheet (`styles.css`) defines visual properties for the `.lines` class. The `transform` attribute scales and translates the drawing, while inline attributes set explicit colors. No external JavaScript libraries are used; rendering relies solely on SVG and CSS.

Feb 23, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and organized using SVG group elements with transforms for scaling and translation. The code uses SVG’s native `circle`, `rect`, `line`, and `path` elements, with fill and stroke properties set both inline and via a separate stylesheet. A `<g>` element with a class applies stroke styling to the line and path, while another group uses a `fill` attribute and `stroke` attribute to inherit styling across its child shapes. The rendering is entirely static, with no JavaScript libraries or data sources involved.

Feb 23, 2021