100%

Creeper Head Project Test

✓ Published2🌍 Public

Last edited Oct 19, 2025

Created on Aug 4, 2025

A CSS art project renders a pixelated creeper head from Minecraft against a gradient sky, with interactive buttons cycling through twelve day and sunset lighting states. The drawing uses layered HTML `<div>` elements with CSS `linear-gradient` and `radial-gradient` backgrounds for the sky, sun, head, neck, and ocean. JavaScript updates CSS custom properties on the `:root` element to switch between color palettes, while masks and box shadows simulate lighting effects on the character's face.

AI-generated description

Creeper Head Project (Unfinished)

Progress

Currently focusing on the main shades. Sky gradient and sun gradients are done.

Now, for the creeper colors, then the ocean colors. Creeper head main color gradients done. Now for the lighting.

(10/18/25): Everything looks fairly finished.

I may include a box shadow to emulate light glare.

Features

How to Use

All that is interactive is the buttons.

Simply click on either button to change the state of the drawing.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Creeper Head Project Test

This interactive visualization uses pure CSS and JavaScript to draw a Minecraft Creeper head alongside a girl character, with a gradient sky that transitions through eight day and sunset states. Users cycle through states via "PREV" and "NEXT" buttons or arrow-key navigation, while JavaScript’s class-based state management updates CSS variables for sky, sun, and neck gradients. The code leverages CSS transitions, `clip-path` for the mouth, radial gradients for the sun, and `mask-image` for lighting effects, with animated blinks, jumps, and shimmering highlights applied through keyframes.

NNita

88% match

Loading thumbnail…

Cave Creeper Head

A CSS and JavaScript drawing depicts a Minecraft creeper head within a purple cave scene, featuring glowing lava and interactive buttons. The code uses plain HTML, CSS custom properties, and JavaScript to construct the scene via absolute positioning and layered gradients. Animated keyframes control the lava's glow, and the interface allows users to toggle cave views, though only one non-functional state is present in the script.

CCurran Kelleher

81% match

Loading thumbnail…

Fork of HTML Starter

This example presents a haunted web page with a flickering title, fading text, and floating ghost imagery against a black background. The page includes a horror-themed YouTube thumbnail, two movie posters, language and difficulty selectors, and an inline SVG ghost with animated floating motion. Styling uses CSS keyframe animations for flicker, fade-in, and float effects, with the Creepster font loaded from Google Fonts. The SVG ghost is drawn directly in the markup, while HTML select elements offer user choices, and an autoplay audio element is included. The code relies on plain HTML, CSS, and SVG, with no external JavaScript libraries.

224cs078@kpriet.ac.in

64% match

Loading thumbnail…

Fork of Sunset App

A forked sunset scene built with pure HTML and CSS renders a gradient sky, a glowing sun, a dark ground, and layered mountain silhouettes. Five animated bird shapes drift across the scene, each set moving on a linear infinite loop with staggered animation delays. A large "Hello World" text overlay with a shadow sits in the foreground, while CSS linear gradients, border-triangle shapes, box-shadow, and filter blur create the landscape’s depth and atmospheric glow.

NNita

63% match

Loading thumbnail…

Fork of Sunset

This visualization crafts a tranquil sunset scene using pure HTML and CSS, depicting a gradient sky, a glowing sun, layered mountains, and animated bird silhouettes. It showcases how CSS linear gradients create the sky’s depth, while border-based triangles form mountains with varied shades. The birds float via CSS animations with distinct timing, and the sun’s luminosity is achieved through blur and box-shadow filters. The scene emphasizes technique over data, relying on absolute positioning and geometric styling to build a layered, natural composition.

CCurran Kelleher

62% match

Loading thumbnail…

Cat app

This piece presents a peaceful sunset scene rendered with pure HTML and CSS, featuring a glowing sun, layered mountains, and stylized birds. It showcases how CSS linear gradients create the dramatic orange sky, while CSS triangle borders construct the mountains and absolute positioning arranges each element. The sun’s glow comes from a combination of box-shadow and a blur filter. The code uses simple geometric shapes and the `box-shadow` property to build depth, with a ground base using a solid color. The visualization relies on the `container.innerHTML` method to inject the complete scene.

NNita

62% match

Loading thumbnail…

Sunset and Sunrise Mountains

This example shows an animated day/night cycle over a mountain landscape, with a sun and moon that alternate positions and colors while the sky and terrain shift between daylight and nighttime palettes. The scene uses SVG gradients and paths to render the terrain, with JavaScript controlling state-based color transitions and toggling animated birds during the day and wolves at night. Static night mode introduces randomized lightning strikes and a flashing white overlay. The code uses DOM manipulation with `getElementById`, `querySelectorAll`, and the Web Animations API pattern of `setTimeout` for timed effects, while sound elements are triggered via HTML5 audio.

JJohn A. Dodge

62% match

Loading thumbnail…

Animations Practice

This example demonstrates an animated landscape scene with a spider-chart-like overlay, rendered in SVG. The visualization uses native SVG `<animate>` elements to cycle colors and positions over 15 seconds, shifting the sky gradient and sun’s vertical path. It uses Google Fonts’ Share Tech and applies CSS for typography, with a radial gradient sky and two linear-gradient terrain paths. The layout is built purely with SVG primitives, including circles, paths, and a complex line-and-text network reminiscent of a radar chart.

AAndre J Denais

61% match