MykoaZ

@MykoaZ·4 public vizzes

Fork of Smiley Face Part II

This example displays a classic smiley face, built with scalable vector graphics. A yellow circle serves as the face, with two black circles for eyes and a thick, black arc for the mouth, all rendered on a responsive canvas that fills the browser window. The visualization uses the React framework to manage the SVG elements and the D3.js library's `arc` function to precisely define the mouth’s curved path. The code computes the center, eye offsets, and radius values dynamically from the window dimensions, ensuring the face scales proportionally.

Feb 27, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a smiling face built from geometric primitives within an SVG canvas. It shows a yellow circle for the head, two black-outlined eyes, using fixed numeric coordinates to position each element. The code uses React and ReactDOM to render the graphic, with the SVG elements defined directly in the React component. The drawing is created using hardcoded properties for the circle positions and dimensions, without any data sources or dynamic calculation.

Feb 27, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline and two smaller black circles is drawn on a blank SVG canvas, resembling a simple smiley face or target. The visualization is a minimal HTML page that imports React 16.9.0 via a CDN and logs the React object to the console. Rendering is done entirely with static SVG elements—a large `circle` and two smaller ones—positioned using fixed coordinates. No interaction, animation, or data binding occurs; the example demonstrates basic SVG markup within a React-loaded page.

Feb 27, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG renders a smiley face in a browser with a yellow circle, two black eyes, and an open mouth implied by the face outline. The example uses React 16.9.0 from a CDN to mount the component, though the visible markup is plain SVG elements with attributes like `cx`, `cy`, `r`, and `stroke-width` hardcoded for a 960-by-500 viewport. It demonstrates a simple, declarative approach to drawing with vector graphics, likely as an early step in an interactive face-building tutorial, but no state, interactions, or event handlers are present in the provided code.

Feb 27, 2021