reedy

@ridwansalawu·3 public vizzes

Let's make a face with D3.js!

A smiling face is drawn as an SVG, with animated eyebrows that move independently. The visualization demonstrates fundamental DOM manipulation with D3.js, using the `select` and `arc` functions from D3 v5 to construct the facial features. The page loads a 960 by 500 pixel SVG element and renders the face directly within it, with styles applied from an external stylesheet. The example serves as a simple, interactive introduction to building and updating SVG graphics with D3's data-driven approach.

Dec 27, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and SVG attributes. It shows shape positioning and scaling with the `transform` attribute, color fills via `fill` properties, and stroke styling through CSS classes. The code uses native SVG elements like `<circle>`, `<rect>`, and `<line>`, alongside CSS selectors (`.lines`) to define stroke width and linecap. The rendering relies directly on SVG markup in an HTML document, with a YouTube video embedded for reference.

Dec 27, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

An SVG drawing demonstrates fundamental shape primitives and CSS styling within an HTML document. Circles and rectangles appear first with default black fills, then with explicit red and green fill attributes, and finally within a group that applies a shared light blue fill and black stroke. Line and path elements use CSS class selectors to define stroke color, width, and rounded line joins and caps. The embedded YouTube video explains how these SVG features combine with CSS.

Dec 27, 2019