Ana Penedos

@anapenedos·2 public vizzes

Fork of Smiley Face Part III

This example renders a smiling face in an SVG canvas using React and D3 v5. The visualization displays a large yellow circle for the head, two smaller circles for the eyes, and a curved path for the mouth, all positioned relative to a central coordinate system. The mouth arc is generated with the `arc()` generator from D3, using specified inner/outer radii and start/end angles based on a smiliness variable. React manages the SVG elements declaratively, while D3 provides the geometric path calculations. The rendering approach relies on SVG primitives inside a root element, with all computations derived from width and height constants.

May 4, 2022

Loading thumbnail…

Let's make a face - Part I

This visualization builds a simple cartoon face from basic SVG shapes. It draws a large yellow circle for the head, two smaller black circles for eyes, and a curved path that forms a smiling mouth. The code uses raw SVG elements—`circle` and `path`—with hardcoded coordinates and styling attributes like `fill`, `stroke`, and `stroke-width`. The entire scene is rendered in a 500x960 viewBox without any JavaScript libraries, relying solely on React's rendering of the SVG markup within an HTML page.

Apr 24, 2022