Skip to main content
Log in
P

pkrupp

@pkrupp·4 public vizzes

Loading thumbnail…

Smiley Face Part IV

A yellow smiley face is drawn centered in an SVG canvas, with two circular eyes and an arc-based mouth created using the d3.arc generator. The face uses a yellow circle with a black stroke for the head, and fixed offsets position the eyes and mouth. React components render the SVG elements, while d3.v5 computes the mouth path via inner and outer radii with angular extents.

Aug 25, 2021
Loading thumbnail…

Fork of Smiley Face Part I

A stylized smiley face rendered as SVG, where a yellow circle serves as the head with two black eyes and an arc-shaped mouth. The mouth uses `d3.arc()` with inner and outer radii to create a thick, rounded stroke, positioned via the `path` element. The head and eyes are drawn with `circle` elements, all centered using a React transform group. The code imports React, ReactDOM, and the `arc` function from d3 v5, and renders the composition as a reusable React component.

Aug 25, 2021
Loading thumbnail…

Smiley Face Part I

A yellow smiley face is rendered as a static SVG graphic, centered on a 960-by-500 canvas with a black-outlined face, two eyes, and an arc-shaped mouth. Built with React and d3.v5, it uses the `arc()` generator from the `d3` module to compute the mouth’s path, while JSX circles define the head and eyes. Dimension values like center coordinates, eye offsets, and radii are stored as constants, and the entire group is translated to the canvas center. No interaction or animation is present.

Aug 25, 2021
Loading thumbnail…

Fork of Hello HTML

This fork of “Hello HTML” renders a single SVG circle with a radius of 100 units directly in an HTML body, using no external JavaScript libraries. The circle has no fill or stroke attributes, so it appears as an empty outline. The markup is minimal, containing only a DOCTYPE, head, and body with the inline `<svg>` element. It demonstrates the basic structure of embedding vector graphics in a web page through raw SVG markup, rather than using a charting or force-directed layout API.

Aug 25, 2021