Fork of d3-svg-play-2

100%

Fork of d3-svg-play-2

✓ Published0🌍 Public

Last edited Aug 11, 2022

Created on Aug 11, 2022

This example uses React to render a static SVG scene composed of basic geometric shapes, including circles, a rectangle, lines, and a custom path. The SVG elements are defined directly in JSX-like markup within the `index.html` file, with CSS transitions applied to circles inside a `<g>` group, causing them to smoothly change fill color on hover. The visualization demonstrates the interplay between SVG primitives, CSS styling, and interactive hover effects, rendered at a fixed 960 by 700 pixel viewport.

AI-generated description

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

Similar vizzes

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

87% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple face composed of SVG circles: a large red circle with a black stroke for the head and two smaller black circles for eyes. It demonstrates integrating React with D3 v7, using React to render SVG elements and JSX curly braces to compute coordinates. The app loads React and D3 from unpkg CDN scripts and renders into a root div, with CSS resetting the body margin for a clean fullscreen display.

MMuhriddinMahmudjonovich

86% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple SVG face composed of a grey circle with a black outline and two inner circles for eyes, all positioned relative to computed center coordinates. The React application defines the visualization declaratively, using JavaScript expressions within JSX curly braces to set the width, height, and geometric properties of each shape. The code imports React and ReactDOM from unpkg.com and renders the SVG into an HTML div with the ID "root". The example demonstrates basic SVG rendering, React component structure, and the use of CSS to remove default page margins.

Ppravallikayaram12

86% match

Loading thumbnail…

Fork of Fork of HTML Starter with SVG

This example presents a basic SVG scene composed of circles, rectangles, lines, and a path, rendered within a 960x500 viewport. The graphic demonstrates primitive shapes and SVG grouping via the `<g>` element, with some elements transformed using the `translate` attribute. CSS styling applies a black stroke to the line group and a blue stroke with rounded joins to the path. The code uses plain HTML, SVG, and CSS, with no JavaScript libraries or data sources, serving as a minimal starter template for visualization work.

Vvmakker

86% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shape rendering on an HTML page, using a React framework setup. It shows circles, rectangles, lines, and a path that scale together inside a grouped `<g>` element with a 1.5x transform. The code uses raw SVG markup with attributes like `fill`, `stroke`, and `stroke-width`, along with CSS for styling. A JavaScript `console.log` call runs in the browser's developer tools, confirming script execution alongside the static vector graphics.

Mmjglsn

85% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene containing two circles, one large red circle with a black outline and two smaller unfilled circles positioned inside it. The page uses React and ReactDOM loaded from CDN, with the SVG elements defined directly in the HTML file. The accompanying JavaScript file imports React and ReactDOM but only logs the React object to the console, so no interactive behavior or data-driven rendering is present. The visualization is purely declarative markup inside an SVG viewport.

IIsaac Raskin

85% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple face rendered as an SVG using React, with a yellow circle for the head and two smaller circles for eyes centered on a 960×500 canvas. It combines React 17 and D3 v7, loaded via UMD builds from unpkg, with ReactDOM rendering the SVG elements directly. The code demonstrates basic JSX syntax, including curly braces to embed JavaScript expressions like `centerX` and `eyeOffsetY` for positioning. The stylesheet removes the body margin and hides overflow, allowing the visualization to fill the viewport cleanly.

Ssumitradevipolina

85% match

Loading thumbnail…

Fork of Hello HTML

A React-based fork of the original Hello HTML example renders a simple static SVG scene using plain SVG elements and ReactDOM. The visualization displays three circles—a large yellow circle with black stroke and two smaller circles positioned inside it—drawn on a 960x500 canvas. It loads the React 18 production UMD build from unpkg, imports the React and ReactDOM libraries, and logs the React object to the console. The code uses inline SVG coordinates and attributes directly in JSX, with no interactive behavior or data binding.

RRahul Varma

85% match