Achorn

@Achorn·3 public vizzes

Lets Make a Face

This visualization uses D3.js v5 to construct a stylized cartoon face from basic SVG shapes. A yellow circle forms the head, with dark circles for eyes, rotated rectangles for eyebrows, and a half-arc path for the mouth. The animation runs through a chained sequence of D3 transitions, repeatedly moving the eyebrow group up and down to create a winking or raising motion. The code organizes elements into nested groups, with the expression defined entirely through static attributes and timed transform transitions on the eyebrow group.

Aug 2, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates foundational SVG shapes—circles, rectangles, lines, and paths—stylized directly with CSS classes and inline presentation attributes. The SVG markup, rendered at a fixed 960×500 canvas, applies a global scale transform and translates groups to position elements, with fill and stroke properties defined both per shape and as inherited group styles. The separate `styles.css` file sets the stroke color, width, line join, and cap for elements in the `.lines` class, while the body margin and overflow are also set externally. No JavaScript or external data is used; the visualization relies purely on declarative SVG and CSS.

Aug 1, 2023

Loading thumbnail…

Shapes With SVG and CSS

This example demonstrates basic SVG shape rendering with CSS-driven interactivity. It shows circles and rectangles positioned at various coordinates, grouped shapes with distinct stroke and fill styles, and a polyline path with rounded joins. The visualization uses raw SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>` within transform groups, paired with CSS selectors that change fill colors on hover for circles and path elements. The code relies on the SVG DOM API for shape creation and traditional CSS styling for visual effects.

Aug 1, 2023