Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Jun 13, 2021

Created on Jun 13, 2021

A grid of eighteen cartoon faces, each rendered as a yellow circle with eyes and a mouth, fills the view. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, producing a playful, generative composition. Built with React and ReactDOM, the visualization uses JSX components like `FaceContainer` and `BackgroundCircle` to structure the SVG output. The `d3.arc` API generates the mouth path, while `d3.range` creates the array that maps over the face instances.

AI-generated description

sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbIkJhY2tncm91bmRDaXJjbGUuanMiLCJFeWVzLmpzIiwiTW91dGguanMiLCJGYWNlQ29udGFpbmVyLmpzIiwiRmFjZS5qcyIsImluZGV4LmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBCYWNrZ3JvdW5kQ2lyY2xlID0gKHsgcmFkaXVzLCBzdHJva2VXaWR0aCB9KSA9PiAoXG5cbjxjaXJjbGVcbiAgICAgICAgICBcbiAgICAgICAgICByPXtyYWRpdXN9XG4gICAgICAgICAgZmlsbD1cInllbGxvd1wiXG4gICAgICAgICAgc3Ryb2tlPVwiYmxhY2tcIlxuICAgICAgICAgIHN0cm9rZS13aWR0aD17c3Ryb2tlV2lkdGh9XG4gICAgICAvPlxuXG4pO1xuIiwiZXhwb3J0IGNvbnN0IEV5ZXMgPSAoe2V5ZU9GRnNldFgsIGV5ZU9GRnNldFksIGV5ZVJhZGl1c30pID0+IChcbiAgXG4gIDw+XG5cbjxjaXJjbGVcbiAgICAgICAgICBjeD17LWV5ZU9GRnNldFh9XG4gICAgICAgICAgY3k9ey1leWVPRkZzZXRZfVxuICAgICAgICAgIHI9e2V5ZVJhZGl1c31cbiAgICAgICAgICAvPlxuICAgICA8Y2lyY2xlXG4gICAgICAgICAgY3g9e2V5ZU9GRnNldFh9XG4gICAgICAgICAgY3k9ey1leWVPRkZzZXRZfVxuICAgICAgICAgIHI9e2V5ZVJhZGl1c31cbiAgICAgICAgICAvPlxuICBcbiAgICA8Lz5cbiAgICBcbik7IiwiaW1wb3J0IHsgYXJjIH0gZnJvbSBcImQzXCI7XG5cblxuZXhwb3J0IGNvbnN0IE1vdXRoID0gKHttb3V0aFJhZGl1cywgbW91dGhXaWR0aH0pID0+IHtcblxuICBjb25zdCBtb3V0aEFyYyA9IGFyYygpXG4gICAgLmlubmVyUmFkaXVzKG1vdXRoUmFkaXVzKVxuICAgIC5vdXRlclJhZGl1cyhtb3V0aFJhZGl1cyArIG1vdXRoV2lkdGgpXG4gICAgLnN0YXJ0QW5nbGUoTWF0aC5QSSAvIDIpXG4gICAgLmVuZEFuZ2xlKE1hdGguUEkgKiAzLzIpO1xuICBcbnJldHVybiA8cGF0aCBkPXttb3V0aEFyYygpfS8+O1xuXG59O1xuIiwiZXhwb3J0IGNvbnN0IEZhY2VDb250YWluZXIgPSAoe2NoaWxkcmVuLCB3aWR0aCwgaGVpZ2h0LCBjZW50ZXJYLCBjZW50ZXJZfSkgPT4gKFxuIDxzdmcgd2lkdGg9e3dpZHRofSBoZWlnaHQ9e2hlaWdodH0+XG4gICAgPGcgdHJhbnNmb3JtPXtgdHJhbnNsYXRlKCR7Y2VudGVyWH0sJHtjZW50ZXJZfSlgfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvZz5cbiAgICA8L3N2Zz5cbiAgICAgIFxuKTtcbiIsImltcG9ydCB7IEJhY2tncm91bmRDaXJjbGUgfSBmcm9tIFwiL0JhY2tncm91bmRDaXJjbGVcIjtcbmltcG9ydCB7IEV5ZXMgfSBmcm9tIFwiLi9FeWVzXCI7XG5pbXBvcnQgeyBNb3V0aCB9IGZyb20gXCIuL01vdXRoXCI7XG5pbXBvcnQgeyBGYWNlQ29udGFpbmVyIH0gZnJvbSBcIi4vRmFjZUNvbnRhaW5lclwiO1xuXG5cbmV4cG9ydCBjb25zdCBGYWNlID0gKHt3aWR0aCxcbiAgICAgICAgICAgICAgIFx0XHRcdFx0aGVpZ2h0LFxuICAgICAgICAgICAgICAgXHRcdFx0XHRjZW50ZXJYLFxuICAgICAgICAgICAgICAgXHRcdFx0XHRjZW50ZXJZLFxuICAgICAgICAgICAgICAgXHRcdFx0XHRzdHJva2VXaWR0aCxcbiAgICAgICAgICAgICAgIFx0XHRcdFx0ZXllT0ZGc2V0WCxcbiAgICAgICAgICAgICAgIFx0XHRcdFx0ZXllT0ZGc2V0WSxcbiAgICAgICAgICAgICAgIFx0XHRcdFx0ZXllUmFkaXVzLFxuICAgICAgICAgICAgICAgXHRcdFx0XHRtb3V0aFJhZGl1cyxcbiAgICAgICAgICAgICAgIFx0XHRcdFx0bW91dGhXaWR0aFxuICAgICAgICAgICAgICB9KSA9PiAoXG5cblxuIDxGYWNlQ29udGFpbmVyXG4gICAgd2lkdGg9e3dpZHRofVxuICAgIGhlaWdodD17aGVpZ2h0fVxuICAgIGNlbnRlclg9e2NlbnRlclh9XG4gICAgY2VudGVyWT17Y2VudGVyWX1cbiAgICA+XG4gICAgXG4gICAgICA8QmFja2dyb3VuZENpcmNsZSByYWRpdXM9e2NlbnRlclkgLSBzdHJva2VXaWR0aCAvIDJ9XG4gICAgICAgIHN0cm9rZVdpZHRoPXtzdHJva2VXaWR0aH1cbiAgICAgICAgLz5cbiAgICAgIFxuICAgICA8RXllcyBcbiAgICAgICBcbiAgICAgICBleWVPRkZzZXRYPXtleWVPRkZzZXRYfVxuICAgICAgIGV5ZU9GRnNldFk9e2V5ZU9GRnNldFl9XG4gICAgICAgZXllUmFkaXVzPXtleWVSYWRpdXN9XG4gICAgICAgXG4gICAgICAgLz5cbiAgICBcbiAgIDxNb3V0aCBcbiAgICAgXG4gICAgIG1vdXRoUmFkaXVzPXttb3V0aFJhZGl1c31cbiAgICAgbW91dGhXaWR0aD17bW91dGhXaWR0aH1cbiAgICAgXG4gICAgIC8+XG4gICAgICBcbiA8L0ZhY2VDb250YWluZXI+XG4gIFxuKTtcbiIsImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdERPTSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgeyByYW5nZSB9IGZyb20gXCJkM1wiO1xuaW1wb3J0IHsgRmFjZSB9IGZyb20gXCIuL0ZhY2VcIjtcblxuY29uc3Qgd2lkdGggPSAxNjA7XG5jb25zdCBoZWlnaHQgPSAxNjA7XG5cbmNvbnN0IGFycmF5ID0gcmFuZ2UoNiAqIDMpO1xuXG5jb25zdCBBcHAgPSAoKSA9PiBhcnJheS5tYXAoKCkgPT4gKFxuXG4gIDxGYWNlXG4gICBcbndpZHRoPXt3aWR0aH0gICBcbmhlaWdodD17aGVpZ2h0fSAgIFxuY2VudGVyWD17d2lkdGggLyAyfVxuY2VudGVyWT17aGVpZ2h0IC8gMn1cbnN0cm9rZVdpZHRoPXs1ICsgTWF0aC5yYW5kb20oKSAqIDV9XG5leWVPRkZzZXRYPXszMCArIE1hdGgucmFuZG9tKCkgKiA5fVxuZXllT0ZGc2V0WT17MzAgKyBNYXRoLnJhbmRvbSgpICogOH1cbmV5ZVJhZGl1cz17MTAgKyBNYXRoLnJhbmRvbSgpICogNX1cbm1vdXRoV2lkdGg9ezEwICsgTWF0aC5yYW5kb20oKSAqIDN9XG5tb3V0aFJhZGl1cz17NCArIE1hdGgucmFuZG9tKCkgKiA0MH1cbiAgIFxuIC8+XG4pKTtcbmNvbnN0IHJvb3RFbGVtZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpO1xuUmVhY3RET00ucmVuZGVyKDxBcHAgLz4sIHJvb3RFbGVtZW50KTsiXSwibmFtZXMiOlsiYXJjIiwicmFuZ2UiLCJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O01BQU8sTUFBTSxnQkFBZ0IsR0FBRyxDQUFDLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRTtBQUN4RDtNQUNBO01BQ0E7TUFDQSxVQUFVLEdBQUcsTUFBTyxFQUNWLE1BQUssUUFBUSxFQUNiLFFBQU8sT0FBTyxFQUNkLGdCQUFjLGFBQVksQ0FDNUI7QUFDUjtNQUNBLENBQUM7O01DVk0sTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDLFVBQVUsRUFBRSxVQUFVLEVBQUUsU0FBUyxDQUFDO01BQ3hEO01BQ0EsRUFBRTtBQUNGO01BQ0E7TUFDQSxVQUFVLElBQUksQ0FBQyxVQUFXLEVBQ2hCLElBQUksQ0FBQyxVQUFXLEVBQ2hCLEdBQUcsV0FBVTtNQUV2QixLQUFLO01BQ0wsVUFBVSxJQUFJLFVBQVcsRUFDZixJQUFJLENBQUMsVUFBVyxFQUNoQixHQUFHLFdBQVUsQ0FDWDtNQUNaO01BQ0EsS0FBTztNQUNQO01BQ0EsQ0FBQzs7TUNkTSxNQUFNLEtBQUssR0FBRyxDQUFDLENBQUMsV0FBVyxFQUFFLFVBQVUsQ0FBQyxLQUFLO0FBQ3BEO01BQ0EsRUFBRSxNQUFNLFFBQVEsR0FBR0EsTUFBRyxFQUFFO01BQ3hCLEtBQUssV0FBVyxDQUFDLFdBQVcsQ0FBQztNQUM3QixLQUFLLFdBQVcsQ0FBQyxXQUFXLEdBQUcsVUFBVSxDQUFDO01BQzFDLEtBQUssVUFBVSxDQUFDLElBQUksQ0FB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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization shows a grid of fifteen cartoon faces, each with a yellow circular background, two black eyes, and a mouth. The faces are generated by composing SVG elements through React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`. A key feature is that each face uses random values for eye offset, eye radius, and mouth width, creating noticeable variety across the grid. The implementation leverages React for component-based structure and D3's `arc` API to define the curved mouth shape, all rendered as SVG within a `FaceContainer`.

Jjchen6912

95% match

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of 18 cartoon faces, each with a yellow circular background, eyes, and a mouth, using React components for modular composition. The faces are generated with random eye and mouth dimensions, driven by D3’s `range` for iteration and `d3.arc` to shape the mouths as curved paths. All elements are drawn as SVG within a shared `FaceContainer`, which translates the coordinate system to center each face. The visualization demonstrates a declarative, component-based approach to data-driven SVG generation, with randomness providing variation across the grid.

Rreama623

95% match

Loading thumbnail…

Fork of HTML Starter

This interactive visualization displays a grid of 18 cartoon faces, each with randomly generated eye and mouth sizes. Built with React and D3.js v7, the code uses `d3.arc()` to create the mouth path and `d3.range()` to generate the grid. Each face is composed of SVG shapes—a yellow circle background, two eye circles, and an arc-based mouth—all rendered within a shared `<g>` element transformed to the face's center. The faces are drawn using `ReactDOM.render()` to populate the HTML root element.

Aanagman

95% match

Loading thumbnail…

Fork of HTML Starter

A grid of 18 cartoon faces renders in SVG via React, each with randomized eye sizes while sharing identical yellow circular heads, black outlined eyes, and a fixed arc-shaped mouth. The component-based architecture demonstrates composition through reusable Face subcomponents. It uses D3 v7's `arc` generator to construct mouth paths and `range` for the grid layout, rendered declaratively with ReactDOM.

MMiguel Salazar

95% match

Loading thumbnail…

Fork of HTML Starter

This example displays a grid of 18 randomly generated cartoon faces, each with a yellow circular background, two eyes, and a curved mouth. The face components are built using React JSX and rendered as SVG elements. The code leverages the D3.js library for generating the mouth path via the `d3.arc` API and for creating an array with `d3.range`. Each face’s dimensions and features vary randomly, showcasing a modular approach to composing visual elements within a React framework.

Llichengrao

94% match

Loading thumbnail…

Fork of HTML Starter

A grid of 20 randomly generated cartoon faces rendered in SVG using React and D3. Each face is composed of a yellow background circle, two eyes, and a smiling mouth, with all dimensions and positions randomized via `Math.random()` and the D3 `range` helper. The mouth path is drawn using the D3 `arc` generator, and the SVG is created through React components in a face container, demonstrating reusable component composition.

MManon ROMAIN

94% match

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of eighteen cartoon faces using React and D3 v7. Each face combines reusable SVG components for the background circle, eyes, and mouth, with randomized eye radius and mouth width values generated via `d3.range` and `Math.random`. The `Mouth` component uses D3’s `arc` generator to create a half-circle path, while `FaceContainer` wraps all elements in an SVG group translated to the center. Yellow faces with blue eyes and black outlines demonstrate a modular, component-based approach to SVG visualization.

CCetinBasoz

94% match

Loading thumbnail…

Fork of Hello HTML

A grid of 15 cartoon faces, each rendered as a yellow circle with black outlines, eyes, and a mouth, uses randomly generated parameters to vary stroke width, eye offset, eye radius, mouth width, and mouth radius. Built with React and D3 v7, the visualization composes SVG elements via custom components like `FaceContainer` and `Mouth`, which leverages `d3.arc` to generate the mouth path. The faces are positioned through a single `Face` component instantiated in a loop with D3’s `range`.

DDhiraj Gede

93% match