Skip to main content
SimilarExport ZIP
100%

Etch-A-Sketch

✓ Published0🌍 Public
NNicholas Smith
Last edited Sep 25, 2019
Created on Sep 24, 2019
Forked from Untitled

An interactive drawing application that recreates the classic Etch-A-Sketch toy in the browser. Users navigate a drawing cursor with arrow keys or WASD controls, while additional keyboard shortcuts adjust line thickness, cycle through six draw colors, and toggle drawing on and off. The application renders an SVG line path using React state management, with the drawing path constructed incrementally as the cursor moves across a 960 by 500 pixel canvas.

AI-generated description

A program that reflects an Etch-A-Sketch.

<b>Instructions:</b> <br />Buttons have to be pressed. Held down buttons only does one action. <br /><b>w or up arrow</b> = moves up <br /><b>a or left arrow</b> = move left <br /><b>s or down arrow</b> = moves down <br /><b>d or right arrow</b> = moves right <br /><b>+</b> = increase line size <br /><b>-</b> = decrease line size <br /><b>c</b> = changes draw color <br /><b>spacebar</b> = toggles draw, hit the spacebar again to stop drawing.

Have fun creating your own visualizations

MIT Licensed

Similar vizzes

Loading thumbnail…

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

SShane Carey
70% match
Loading thumbnail…

Untitled

This example demonstrates an interactive coloring book application built with the React framework and rendered on HTML Canvas. Users select colors from a customizable palette and apply them to images using a brush tool, with an eraser option and adjustable brush size. The component is implemented as a custom HTML element using JavaScript's Custom Elements API and relies on jQuery for DOM manipulation. Images are stored as static assets, and the interface includes navigation thumbnails, undo, clear, save, and print functions. The styling is controlled through CSS overrides, allowing for theme customization.

Sslawson48
70% match
Loading thumbnail…

Untitled

This example displays a collection of basic geometric shapes—rectangles, circles, ellipses, a line, a polyline, a polygon, and a path—drawn on a static SVG canvas. Each shape uses distinct stroke colors and thicknesses, with variations such as rounded corners and dashed-free outlines. The rendering is implemented directly within an HTML file using inline SVG elements without any additional JavaScript libraries or frameworks. React is listed as the framework, but the code shown is purely declarative SVG markup, focusing on fundamental vector graphics primitives.

KKhatera Alizada
69% match
Loading thumbnail…

p5JS

In this interactive visualization, users draw freehand with the mouse, and their drawing is recreated as an animated series of rotating epicycles. The application uses the p5.js library to handle canvas rendering, mouse input, and animation. After the drawing is complete, the code computes its Discrete Fourier Transform to decompose the path into a set of frequency components, then sorts them by amplitude and reconstructs the shape using circular motion. The output shows both the tracing circles and the resulting magenta path being redrawn over time.

TTanmay Bishnoi
69% match
Loading thumbnail…

Untitled

A blank SVG canvas fills the browser window, capturing mouse movement through an `onMouseMove` handler that logs to the console. The only visible element is a fixed circle with a radius of 54 pixels, positioned near the top-left corner at coordinates (45, 20). Despite the README’s claim that the program follows the user with a circle, the circle does not move in response to mouse events. Built with React, the component renders the SVG directly, using `window.innerWidth` and `window.innerHeight` for the canvas dimensions.

SShasvathan Pathmanaban
68% match
Loading thumbnail…

interaction with react

A smiling face follows the cursor across a full-screen SVG canvas. Built with React, the app tracks mouse movement via an `onMouseMove` event handler and updates component state with `useState`, re-rendering a single yellow circle to track the pointer. The visualization demonstrates React’s declarative approach to DOM updates, using `ReactDOM.render` to mount the component and SVG elements for rendering. No external data source is used; interaction is driven entirely by user input.

Rrickyphula
68% match
Loading thumbnail…

SVG-1

This example displays a collection of basic SVG shapes on an 800-by-400 canvas, including two circles, a rectangle, and a line. The shapes use various colors and stroke styles, such as a yellow rectangle with a blue border and a red circle. The page is built with plain HTML, CSS, and JavaScript, rendering entirely through the SVG API without any external charting library. The React framework is referenced in the project metadata, but the visible code relies solely on native SVG elements like `<circle>`, `<rect>`, and `<line>`.

00128momo
68% match
Loading thumbnail…

The Coloring Book

An interactive coloring page displays a detailed SVG illustration split into outlined regions in a `Color` group, which users fill by clicking individual paths. The application lets visitors choose from a fixed palette of 24 colors, apply a random color to every region, clear all fills to white, or download the resulting SVG. Built with React for structure, it uses the Canvas library to load the SVG, GSAP TweenMax for smooth fill transitions and rollover scaling, and react-color's SketchPicker for color selection. The page loads a remote SVG coloring book asset and renders it within a stylized holder.

Sslawson48
68% match