ryankinsey1

@ryankinsey1·2 public vizzes

Happy Halloween!

A jack-o'-lantern face appears on a dark background, constructed from SVG shapes including ellipses, polygons, and a path-drawn stem. Geometric features—eyes, nose, and a curved mouth—initially glow yellow, then repeatedly transition to black and back, simulating a flickering candle. The piece uses D3.js v5 for SVG rendering and chained `transition().duration(1000)` calls to animate the color shifts. The pumpkin body, teeth, and stem are statically colored with fills, while the `arc()` function generates the mouth's curved path.

Jul 18, 2019

Loading thumbnail…

Shapes with SVG AND CSS

This example shows how to combine inline SVG shape elements with CSS styling to create a static composition of circles, rectangles, lines, and paths. The graphic renders a simple geometric scene with default black shapes, a colored group with red and green fills, a blue group with black strokes, and a separate line and path group. The code uses raw SVG markup with attributes like `transform`, `fill`, and `stroke`, while the CSS file styles the `.lines` class and its child path. All rendering is done through standard browser SVG support.

Jul 16, 2019