Manuka-prog

@Manuka-prog·6 public vizzes

Fork of Smiley Face Part II

This example shows a simple SVG smiley face drawn with React and rendered as a responsive graphic that scales to the full browser window. The face consists of a yellow circle with a black stroke, two black eye circles, and a placeholder mouth, all positioned relative to the window’s center. The code uses React 16.9 and ReactDOM to render the SVG elements directly, with constants like `eyeOffsetX` and `eyeRadius` controlling the layout. The rendering approach relies on JSX components and inline SVG, producing a static visualization without interaction or animation.

Oct 30, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example displays a yellow smiley face with black-outlined eyes and a curved mouth, centered on a blank SVG canvas. The visualization is built with React components, which import and render reusable shape elements. D3’s `arc` generator creates the mouth path, while the face, eyes, and mouth are separated into distinct component files using ES6 modules and React Fragments. The code uses fixed numeric constants for coordinates and dimensions, with no interactive or animated behavior.

Oct 25, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a simple smiley face rendered as a yellow circle with two black eyes and a curved mouth outline, all positioned around the center of an SVG canvas. It uses React components to structure the SVG elements, while D3’s `arc()` function generates the mouth path. The background circle, eyes, and mouth are each defined in separate React files, and the face is drawn statically without animation or interaction.

Oct 25, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face with blue pupils is drawn on a full-screen SVG, centered in the browser window. The face uses React components to render circles for the eyes and a D3 arc generator to create the mouth, while a yellow rectangle serves as the base. D3’s `arc` and React’s `ReactDOM.render` are the key APIs, with the figure’s geometry defined by fixed offsets and radii. The example demonstrates combining React’s declarative structure with D3’s shape utilities for SVG rendering.

Oct 21, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A React component renders a yellow smiley face as an SVG, with a circular head and two black eyes positioned symmetrically around the center. The geometry uses computed constants for width, height, and offsets, with the head’s radius derived from the canvas height minus half the stroke width. The example demonstrates SVG circle elements and React’s declarative JSX syntax, relying on ReactDOM to mount the visualization into the DOM.

Oct 20, 2021

Loading thumbnail…

Smileyface part 1

A minimalist SVG drawing of a yellow smiley face occupies the center of a 960-by-500 canvas, with two solid black circles serving as eyes and a large yellow circle forming the head outlined in black. The page uses raw SVG elements (`circle`) inside an inline `<svg>` tag, with no JavaScript libraries, and positions the shapes via explicit `cx`, `cy`, and `r` attributes. The body’s CSS hides scrolling, and the static composition relies solely on hardcoded coordinates for its balanced, symmetrical layout.

Oct 18, 2021