mockup

100%

✓ Published0🌍 Public

Last edited Aug 17, 2023

Created on Aug 17, 2023

A hand-drawn-style icon of a face with three dots for eyes sits centered on an off-white background. The mockup is built as a static SVG scene using only React’s JSX markup, with no D3 or other visualization libraries present. The markup defines two overlapping rectangles—a light gray base and a white overlay—plus four circles, three purple dots and one larger lilac shape, all with fixed coordinates. The code demonstrates a bare SVG layout without animation or data binding.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Test

A smiling face built with React and D3.js renders inside an SVG, composed of independently defined components for the background circle, eyes, cheeks, and a mouth drawn with the d3.arc() API. The face uses a radial gradient for the cheeks, and fixed props define geometry like eye offset, radius, and stroke width. The React component hierarchy passes data-driven values down to each visual element, producing a static, scalable vector graphic.

WWhitney Hung

75% match

Loading thumbnail…

face-off

A yellow smiley face rendered as a set of SVG circles sits centered on a black-outlined head, with two dark eyes offset symmetrically. The React app uses hardcoded numeric constants for dimensions, stroke width, eye offset, and radius, drawing the face via three `<circle>` elements. Rendered with ReactDOM into a full-viewport SVG, the visualization demonstrates static geometric composition without interactivity or data binding, relying solely on declarative JSX props. The code leverages React 17’s production build and inline SVG, with no external data source or animation.

Ttobyviz

75% match

Loading thumbnail…

Untitled

A yellow circle with a black outline and two smaller black circles positioned symmetrically inside it forms a simple face-like composition. Rendered as an SVG, the larger circle is centered in a 960 by 500 viewport, while the smaller circles serve as eyes. The visualization is built with React, using inline SVG elements and ReactDOM.render to mount the component. The code defines layout constants for positioning and dimensions rather than relying on external data.

Sspringxc

75% match

Loading thumbnail…

Hello HTML

This example shows a simple static SVG face made of three circles—two small eyes and a large yellow head—rendered on a 960-by-500 canvas. The code uses React 18 via a UMD script, though the bundle is not loaded, and relies on inline SVG elements for drawing without any data or interaction. The page intentionally mixes plain HTML, CSS for margin reset and overflow hiding, and a placeholder JavaScript file that logs to the console. It demonstrates minimal SVG structure within a React setup, with no dynamic behavior or external libraries beyond React’s basic import.

Zzaaaza

75% match

Loading thumbnail…

Untitled

A smiling face rendered as an SVG data visualization, built with React and D3. The face consists of a red circle with a blue stroke as the background, two black eyes, and a D3 `arc`-generated mouth path. React components manage the SVG elements, while D3's `arc` function calculates the mouth's curved shape using specified inner and outer radii and start and end angles. The layout positions elements around a central coordinate, with fixed offsets for the eyes and mouth radius.

BbetoAR506

75% match

Loading thumbnail…

Tweaked Face (React & D3)

A stylized face built from SVG shapes in React, rendered through D3's `arc` generator for the mouth and nose, with circles for the eyes and face. The component defines fixed dimensions and hard-coded offsets for facial features, using React for the element tree and D3 v6 for path computation. The face displays a green-tinted circular head, white eyes with teal-outlined black irises, and curved mouth and nose paths, all centered within a 960×500 viewport.

SSonja Ek

75% match

Loading thumbnail…

Tweak Face

A simple SVG face built with React and D3 v7 displays a rounded red rectangle as a head, two black circles for eyes, a vertical line for a nose, and an arc-shaped mouth generated with `d3.arc()`. The face is centered within a 960x500 viewport using fixed pixel coordinates and transforms, with all shapes given 0.5 opacity and outlined in black. The code defines geometric constants for dimensions and positions, then renders each element as a JSX component inside a single `<g>` group. No interactive behavior or data binding is present; the visualization is purely static.

TTRANDONGXYZ

75% match

Loading thumbnail…

face VI

A smiling face built from basic SVG shapes, with a pink circular head, two black eyes, and a semi-circular mouth. The code splits the face into reusable React components (BackgroundCircle, Eyes, Mouth, and FaceContainer) and composes them with fixed, hard-coded size values passed as props. The mouth uses d3.arc to generate the path’s coordinate data. The final SVG renders at 960 by 500 pixels, centered with a 10-pixel stroke outline.

DDiego Isla López

75% match