AudioSutta

@AudioSutta·3 public vizzes

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is built using SVG circles for the eyes and mouth, with the mouth created via the d3.arc() path generator. Eyebrow rectangles transition vertically over two seconds using the .transition() method, then return to their original position. The code explicitly imports select and arc from the D3 v5 library, manipulates SVG attributes directly, and renders entirely in the browser without external data.

Oct 8, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face rendered as a pure SVG graphic using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles positioned symmetrically, and a mouth drawn as an arc path. The code uses React for component structure and the D3 `arc` generator to define the mouth's crescent shape, with explicit coordinates for eye offsets and radii. All shapes are created declaratively inside a single SVG element with a centered transform group.

Oct 8, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A static SVG drawing demonstrates how shapes and colors respond to CSS and inline attribute styling. The example uses raw SVG elements—circles, rectangles, lines, and paths—inside a `<g>` group with scaling and translation transforms. Inline `fill` and `stroke` attributes set initial colors, while a CSS class (`.lines`) overrides path stroke properties such as `stroke-linecap` and `stroke-linejoin`. The rendering relies solely on SVG presentation attributes and a linked stylesheet, with no JavaScript libraries.

Oct 8, 2021