Ndip Estaban

@NdipEstaban·3 public vizzes

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG, centered in the browser window, with two black eyes and a thick black circular outline. The face scales in size based on the viewport dimensions, using `window.innerWidth` and `window.innerHeight` to set the SVG canvas. Built with React and ReactDOM, the code defines circles for the head, eyes, and mouth area via JSX, transforming the center point to the middle of the screen. It relies on React’s declarative component structure rather than imperative charting libraries.

Feb 11, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles on a yellow background. The face is centered in a 960 by 500 pixel canvas, with two eye circles positioned symmetrically around the center. The code directly uses the SVG API for rendering, setting circle attributes like `cx`, `cy`, `r`, `fill`, and `stroke` inline within the HTML. No external JavaScript libraries are used; the visualization is purely static, with all geometry and styling defined in the markup. The face appears as a basic, fixed illustration without animation or interaction.

Feb 11, 2023

Loading thumbnail…

fork for svg tutorial

This example displays a simple, static SVG composition: a large yellow circle with a thick black outline, accompanied by two smaller black-outlined circles positioned inside it to suggest a face. The rendering relies on raw Scalable Vector Graphics (SVG) markup within an HTML page, using the `<svg>` element and circle primitives with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No external libraries or data sources are involved, and the code produces no animation or interaction.

Feb 11, 2023