Skip to main content
100%

Monsters!

✓ Published0🌍 Public
Aangusgrant
Last edited Nov 7, 2022
Created on Nov 7, 2022

Monsters! displays a shuffled grid of monster-themed SVG icons in a simple three-column layout. The page uses a JavaScript function to randomize the order of an array of monster images, then renders them as an HTML grid. Each monster is a distinct SVG icon, including one-eyed, multi-limbed, tentacled, and bug-like creatures, plus a single pair of socks as an odd one out. The project credits the individual icon designers in the footer. The rendering is done in SVG, and the layout is a responsive grid that scales images on smaller screens.

AI-generated description

Similar vizzes

Loading thumbnail…

Monsters! Game

Monsters! Game is an interactive memory game rendered as an SVG. Players click tiles to reveal hidden monster icons. The game uses a grid of clickable images, with each tile concealing a monster or a sock. The underlying code encodes the tile image data in base64 and decodes it on click to reveal the monster. Clicking on a sock triggers a "Game Over" message, while revealing all eleven monsters displays a congratulatory message. The visualization is built with a simple grid layout and SVG icons, with game logic handled by JavaScript event listeners.

Aangusgrant
82% match
Loading thumbnail…

Monsters! Game

Monsters! Game is a single-page interactive memory game built with JavaScript and SVG icons. Players click on covered tiles to reveal hidden monsters, trying to find all 11 monsters without uncovering the sock that ends the game. The interface uses a simple three-column grid layout, and each tile toggles from a door image to a monster or sock icon. The game tracks clicks, reveals images by decoding base64-encoded data attributes, and displays a "Game Over" message when the sock is found, with an option to reload and play again.

Aangusgrant
81% match
Loading thumbnail…

Monsters! Game

Monsters! Game is a single-page interactive memory game built with JavaScript and SVG icons. Players click on covered tiles to reveal hidden monsters, trying to find all 11 monsters without uncovering the sock that ends the game. The interface uses a simple three-column grid layout, and each tile toggles from a door image to a monster or sock icon. The game tracks clicks, reveals images by decoding base64-encoded data attributes, and displays a "Game Over" message when the sock is found, with an option to reload and play again.

Aangusgrant
81% match
Loading thumbnail…

Demos

This interactive scatterplot lets users explore horror movie monsters by swapping the X and Y axes between four attributes—physical strength, fear factor, killing power, and horror rating—via dropdown menus. The visualization, built with D3.js v3 and SVG, uses linear scales to map the chosen attributes to circle positions, with each monster represented as a white-bordered circle. A tooltip using the d3-tip library appears on hover, while the green header and sidebar follow a cohesive Raleway-styled design. The underlying data is hardcoded as an array of monster objects.

DDarienLiang
66% match
Loading thumbnail…

SVG Fun!

This example demonstrates a playful grid of twelve pink rectangles rendered as SVG elements. The visualization shows how CSS transitions and hover states can animate the shapes, changing their fill color and stroke width on mouse interaction. The code uses plain SVG and CSS, with rectangles defined in the HTML and styled via a `rect` selector. The transition property applies a 1000-millisecond easing effect, while the `:hover` pseudo-class modifies the visual style. The page is structured with a fixed 960x500 SVG viewport and a margin around the body.

Vverrasc
62% match
Loading thumbnail…

Fork of Hello HTML

This gallery example displays a grid of 72 randomly generated cartoon faces, each with a yellow circular head, white eyes with black pupils, and a curved mouth. The faces are rendered as React components using SVG primitives, with each face’s features varying in position, size, and offset based on random values. The code leverages the `d3.arc` API to construct the mouth path, while React maps over an array from `d3.range` to instantiate each face. The visualization demonstrates how randomized parameters can create diverse, expressive compositions within a fixed layout.

JJackson Gordon
61% 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
61% match
Loading thumbnail…

Monotreme Face Using React Compontents

A grid of 18 SVG faces, each with a wheat-colored circular background, black eyes, and an arc-shaped mouth, all rendered using React components. The faces vary randomly in eye placement, eye radius, mouth radius, and mouth width, giving each a distinct expression. The code uses D3's `arc` API to generate the mouth path and the `range` function to create the grid. React's component-based structure, with `Face`, `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` components, builds each face. This example demonstrates how React and D3 can be combined to create modular, data-driven SVG visualizations.

SStoo Sepp
61% match