Skip to main content
SimilarExport ZIP
100%

The Coloring Book

✓ Published0🌍 Public
Sslawson48
Last edited Mar 27, 2022
Created on Mar 26, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

1 Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling within a React starter template. It renders circles, rectangles, lines, and a path inside an SVG element with a scale transform, showcasing fill colors, stroke properties, and stroke-width attributes. The code applies CSS classes to style grouped elements, such as the `.lines` class adding black strokes to lines and paths, while inline attributes like `fill="red"` and `#83cc2a` set explicit colors. The visualization relies on plain SVG markup and external CSS rules to control appearance.

RRolftest
70% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS influence visual styling, showing circles, rectangles, lines, and paths arranged in groups with varied fills, strokes, and transforms. The React-based code renders a single SVG canvas at 960 by 500 pixels, using inline attributes like `fill` and `stroke` alongside a CSS stylesheet to define colors, line widths, and join styles. It highlights how SVG presentation attributes and CSS rules layer together, with groups applying shared styling and coordinate translations to position elements across the scene.

Ddanhuijia
70% 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
70% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a colorful static composition. It shows circles, rectangles, lines, and paths arranged in a scaled group, with some shapes using inline fill attributes and others inheriting styles from a parent `<g>` element or a `.lines` CSS class. The rendering uses plain SVG within a React app, though the visible chart is entirely hand-coded markup rather than generated data. CSS controls stroke color, width, and path-specific styling, while SVG attributes handle positioning and transforms.

Wwusushi
70% match
Loading thumbnail…

Loop Colori

Loop Colori generates a full-screen SVG composition of 200 vertical rectangles, each stroked with a thick border, cycling through a fixed palette of orange, red, purple, and blue. The code uses plain JavaScript with the DOM API to create SVG elements via `document.createElementNS`, setting attributes for position, width, height, fill, and stroke. A nested loop condition alternates the fill and stroke colors among the four array values, producing a striped, repeating pattern across the viewport. The example relies on no external libraries, only native browser APIs for rendering.

KKarreb94
70% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within an HTML page, showcasing interactive hover effects that animate color changes over time. It includes a blue rectangle, a red circle, and a white vertical line, all defined directly in the markup. CSS transitions handle the smooth color shifts, such as the rectangle turning purple and the circle turning white on hover. The SVG canvas scales to full width with a fixed height, and the page uses embedded JavaScript and CSS within a minimal HTML structure, highlighting a straightforward approach to creating responsive, animated vector graphics.

Hhelloelectro
69% match
Loading thumbnail…

Blank Canvas

A slider controls the background hue of an SVG canvas. Dragging the handle updates the color in real time, with tick labels showing the degree value. The visualization uses d3.drag for interaction, d3.interpolate for a smooth intro animation, and d3.hsl to convert the slider value to a color. The code imports d3 via `import {} from 'd3'` and renders with SVG elements.

RRostyslav
69% match