fasynator

@fasynator·3 public vizzes

Let's make a face with D3.js!

An animated smiley face built with D3.js v5 demonstrates fundamental SVG DOM manipulation through `select`, `append`, and `attr` calls. The face comprises circles for eyes, rectangles for eyebrows, and an `arc`-generated path for the mouth, all positioned within an SVG group. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the eyebrow group’s `transform` translate value up and down. The code shows direct attribute styling for fill and stroke, with no external data source, relying entirely on hardcoded coordinates and D3’s animation API.

Mar 9, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS, using inline SVG elements in an HTML page. It shows how default black fills contrast with explicit red and green fills, while a group with `fill="#adf6ff"` and `stroke="black"` applies shared styling to multiple shapes. The `.lines` class in styles.css sets stroke color and width, with path-specific overrides for rounded joins and caps. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, and CSS rules handle body margins and overflow without external libraries.

Mar 9, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged with transforms and grouped elements. It illustrates how inline attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheet rules targeting classes such as `.lines` and `.lines path` for stroke color and line joins. The rendering uses raw SVG markup within an HTML page, with a CSS file controlling layout and visual properties.

Mar 9, 2020