srosegger

@srosegger·2 public vizzes

Fork of Smiley Face Part III

This example shows a stylized smiley face built as a React component, rendered as vector graphics in an SVG canvas. The face uses a yellow circle with a black stroke for the head, two dark circles for asymmetrical eyes, and a curved arc as the mouth. The code leverages React’s declarative JSX for structure, while the `d3.arc` API generates the mouth path with defined inner and outer radii and angular range. All positions and dimensions are computed from fixed constants, and the entire scene is centered via an SVG group transform.

Aug 18, 2023

Loading thumbnail…

Smiley Face Part I

This example is a static SVG drawing of a smiley face in progress, featuring a large gold circle with a black outline and two smaller dark circles for eyes. The visualization is rendered through a raw SVG element embedded directly in an HTML file, without using React’s component API. Instead, the code relies on standard SVG shape elements (`<circle>`) with properties for the fill color, stroke, and dimensions. The page includes a minimal `<script>` that logs a message to the console, while the actual graphic is defined declaratively in the markup.

Aug 18, 2023