kripton-it

@kripton-it·7 public vizzes

Face Part VII

A grid of eighteen SVG faces, each a yellow circle with black outlines, displays randomized facial features. The faces are generated using React components, with each attribute—stroke width, eye radius and offset, and mouth dimensions—derived from `Math.random()`. The code splits components into separate files and uses ES6 modules, React Fragments, and a `d3.arc` path for the mouth shape. The faces are rendered within a single SVG per face, positioned via a `transform` translate group.

Mar 10, 2021

Loading thumbnail…

Face Part VI

A cartoon face is rendered as a composition of reusable React components, including a yellow background circle, two eyes, and a mouth. The SVG is centered using a group transformation, with the mouth drawn using the `arc()` generator from d3. The example demonstrates splitting React components into separate ES6 module files, and uses React Fragments to group the eye circles without adding extra DOM nodes.

Mar 10, 2021

Loading thumbnail…

Face Part IV

A React component renders a smiley face as SVG, composed of a yellow circular background, two black eyes, and a curved mouth path. The code imports the `arc` function from D3 v5 to generate the mouth’s arc shape with specified inner and outer radii and angles. Static dimensions and positions are defined as constants, and the component structure uses JSX within ReactDOM’s render call. The example demonstrates integrating D3 geometry utilities with React’s declarative component model, with no interactive behavior or data binding present.

Mar 10, 2021

Loading thumbnail…

Face Part V

A cheerful cartoon face renders as SVG from React components. The example splits the visualization into separate files for the background circle, eyes, and mouth, using ES6 modules and React fragments to organize the code. The mouth's arc shape is generated with the `d3.arc` API, while the background and eyes are simple SVG circles. The face is centered on a yellow circle with a black stroke, and the eyes and mouth are positioned relative to the center using SVG transforms.

Mar 10, 2021

Loading thumbnail…

Face Part III

A face rendered with vector shapes appears centered on a yellow circular background with a black outline. Two solid black circles serve as eyes, while a mouth is drawn as a stroked arc. Built with React and D3.js v5, the visualization uses D3's `arc` API to generate the mouth path and SVG `circle` and `path` elements for all shapes, with positions computed from fixed coordinates and constants.

Mar 10, 2021

Loading thumbnail…

Face Part II

A simple SVG face graphic displays a yellow circle with black outline for the head and two smaller circles for eyes. The React component in index.js uses JSX to render the SVG elements, calculating dimensions and positions from constants like `centerX`, `centerY`, `radius`, and `eyeOffsetX`/`eyeOffsetY`. ReactDOM renders this component into the page, with dependencies loaded via unpkg for React 17. The code demonstrates basic composition of SVG shapes within a React application, producing a static visual without interactivity or data.

Mar 10, 2021

Loading thumbnail…

Face Part I

A single yellow circle with a thick black outline forms the head of a simple face, centered within an SVG canvas. Two smaller black circles, positioned symmetrically to the left and right, serve as eyes. The page uses a bare HTML document with inline SVG elements to draw the shapes, relying on basic attributes like `cx`, `cy`, and `r` rather than any external JavaScript libraries. The rendering is static and entirely contained in the markup.

Mar 1, 2021