Skip to main content
Log in
E

ericbleibtnet

@ericbleibtnet·4 public vizzes

Loading thumbnail…

Fork of Fork of Smiley - Part 2

A yellow circle with two black eyes forms a simple smiley face, rendered as an SVG using React. The face is centered within a 960 by 500 viewport, with a thick black stroke defining the outer circle and fixed offsets positioning the eyes symmetrically. The code leverages React's `createElement` through JSX, ReactDOM's `render`, and inline SVG elements like `circle` to construct the static visualization, with all geometry computed from constant variables. No interactivity or animation is present; the example demonstrates basic declarative SVG composition within a React component.

Nov 27, 2023
Loading thumbnail…

Fork of Smiley - Part 1

A smiling face rendered with React and SVG uses hard-coded numeric values to position a yellow circle, two black eye circles, and a black stroke outline on a 960×500 canvas. The component structure relies on ReactDOM to mount an `<svg>` element containing three `<circle>` shapes, with dimensions and offsets defined as constants. No interactivity or animation is present; the visualization simply demonstrates static SVG drawing through React's declarative JSX syntax.

Nov 27, 2023
Loading thumbnail…

Smiley - Part 1

This example renders a static smiley face using SVG primitives within a React 18 application. It displays a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the SVG markup. The code loads React from a UMD bundle and logs a JavaScript message to the console, while the visualization itself relies solely on SVG circle elements with explicit coordinates and styling, without any interactive or animated behavior.

Nov 1, 2023
Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle centered on a blank SVG canvas, paired with a simple “Hello world!” heading. It uses raw HTML with inline CSS to hide page margins and uses the SVG `<circle>` element directly, specifying `cx`, `cy`, and `r` attributes for positioning and sizing. The block renders at 960 by 500 pixels and demonstrates a minimal page structure without any JavaScript libraries or data sources.

Nov 1, 2023