Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
MMKlaasman
Last edited Jul 22, 2021
Created on Jul 22, 2021
Forked from HTML Starter

This example shows a static soccer pitch drawn on a Canvas element, with a white ball and a player marker that move toward a target point. The pitch includes all standard markings—midline, center circle, penalty areas, goal boxes, and corner arcs—rendered with Canvas 2D `rect`, `arc`, and `lineTo` calls. A `requestAnimationFrame`-driven loop animates the ball’s movement, which uses trigonometry to calculate direction and applies a speed decay factor, while the player moves linearly toward its destination. The code uses plain JavaScript and the Canvas API directly without any external libraries.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pitch

This example draws a soccer pitch using D3.js version 5, with SVG rendering. It constructs the field markings—including the halfway circle, corner arcs, penalty area, and six-yard box—by combining D3’s `arc()` generator for curved paths and appended `rect` and `line` elements for straight boundaries. The layout uses hardcoded dimensions scaled by a factor of six, and all shapes are filled with white strokes atop a green background, creating a static, schematic visualization.

MMihir Sawant
73% match
Loading thumbnail…

Pitch

An SVG rendering of a soccer pitch, drawn to scale with D3.js v5, displays the field’s markings including the halfway circle, corner arcs, goal areas, six-yard boxes, and penalty spots. The visualization uses D3’s `arc` generator to create the curved elements and `line` and `rect` primitives for straight lines and the field base. A green rectangle represents the playing surface, with white markings for official dimensions and black strokes for the goals. The code demonstrates a static, non-interactive layout built with SVG attributes and D3 selections.

MMihir Sawant
73% match
Loading thumbnail…

Untitled

This visualization demonstrates a first-person raycasting engine rendered on an HTML canvas using the p5.js library. It shows a top-down map view alongside a player-controlled camera that casts rays to detect wall collisions, simulating a 3D perspective effect. The code uses p5.js functions like `fill`, `rect`, `circle`, and `line` for drawing, while the WebGL-accelerated canvas handles the animation loop. The scene features a grid-based maze with red player indicators and directional lines.

Rrahulram70
70% match
Loading thumbnail…

Untitled

This example demonstrates a React-based interactive visualization that renders a dynamic particle system using HTML5 Canvas. The code leverages D3’s force simulation (`d3.forceSimulation`) to compute physics-based movement for multiple circular nodes, which are drawn each animation frame via the Canvas API. Each node’s position is updated continuously based on velocity and collision forces, creating a fluid, organic motion effect. The visualization is built with pure JavaScript and styled minimally through CSS, showcasing how React integrates with D3 and Canvas for real-time graphics without external charting libraries.

Bbusrabozkus
69% match
Loading thumbnail…

Untitled

This example shows a static SVG canvas containing a single blue rectangle with a thick black outline and a circle positioned near its upper-left corner. The HTML document defines the SVG element with explicit width and height attributes, then draws the shapes using basic SVG primitives. The rectangle uses incorrect attribute spellings ("heigth" and "stroke" instead of "height" and "stroke"), while the circle specifies its radius and center coordinates. The visualization demonstrates fundamental vector graphics rendering through raw SVG markup embedded directly in an HTML page without any external libraries or JavaScript.

CCK-Langat
68% match
Loading thumbnail…

D3 Soccer Starter

This example demonstrates a minimal integration of the d3-soccer library with React, rendering a static page that logs the imported `pitch` function to the console. The app uses `ReactDOM.render` to display a simple “Hello” message, while the d3-soccer library is loaded via a script tag and imported in the JavaScript module. The code imports `select` from d3 and the `pitch` API from d3-soccer, though no pitch visualization is actually drawn in the current implementation, serving as a starter template for future soccer field plots.

CCurran Kelleher
67% match
Loading thumbnail…

Untitled

This example demonstrates how D3 custom elements can drive a canvas-based drawing surface. As the mouse moves, the code appends `custom:circle` elements to a `custom:sketch` element, each with a red stroke that transitions to white over two seconds while expanding to a radius of 200. A `d3.timer` continuously clears the canvas and redraws all child elements, translating their attributes into Canvas 2D `arc` and `stroke` commands. The sketch uses a custom namespace prefix registered with `d3.ns.prefix` to create these elements.

YYashasvi Koul
67% match
Loading thumbnail…

Soccer Play-by-Play

This visualization animates soccer play-by-play data from a match between Belgium and Brazil, showing passes and dribbles as moving circles and trailing lines on a pitch. Each action is color-coded by team, with the current action labeled above the field and results like failures or offsides distinguished by color. The animation advances through time using d3.interval, updating the circle position every 800 milliseconds and drawing lines for the five most recent actions. It uses the d3-soccer pitch layout, d3.scaleLinear for coordinates, and d3.transition for smooth movement.

Nnatecoursey-mck
67% match