Yeti 404 Page Not Found

This project creates an engaging and animated "404 Page Not Found" error page. Its main purpose is to entertain users with a dynamic scene featuring a yeti character. The key features include a flashlight-wielding yeti whose movements are animated, a "404" text reveal that appears and disappears with the flashlight beam, and a dynamic light/dark mode that changes the scene's colors and visibility.

The project's structure is built around HTML, CSS, and JavaScript. The HTML file (index.html) sets up the page, including two main SVG containers: yetiSVG holds all the visual elements of the yeti and its environment, while lightSVG contains the flashlight beam and the "404" text. A simple div provides the textual "Page Not Found" message.

<svg id="yetiSVG" xmlns="http://www.w3.org/2000/svg" ... viewBox="0 0 600 470">
    <!-- SVG content for yeti, blanket, etc. -->
</svg>
<svg id="lightSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 470">
    <!-- SVG content for light beam and 404 text -->
</svg>
<div class="content">
    <h3>Hello?? Is somebody there?!?</h3>
    <p>We know it’s scary, but the page you’re trying to reach can’t be found.</p>
</div>

These SVG elements are positioned absolutely to overlap and fill the viewport, as defined by the style.css. The CSS also handles basic styling for the text content, ensuring readability and visual appeal.

#yetiSVG, #lightSVG {
  width: 600px;
  height: 470px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* lightSVG uses overflow: visible */
}

This CSS snippet demonstrates how the SVG containers are positioned on the page.

The core animation logic resides in script.js, which leverages the GreenSock Animation Platform (GSAP) and its MorphSVGPlugin. The JavaScript defines several timelines (yetiTL and chatterTL) to orchestrate complex animations. chatterTL handles the yeti's mouth movements, making it appear to chatter by morphing SVG paths, while yetiTL controls the main sequence, including arm movements, flashlight toggles, eye changes, and the mouth morphing.

gsap.registerPlugin(MorphSVGPlugin);

let yetiTL, chatterTL,
  furLightColor = "#FFF",
  furDarkColor = "#67b1e0",
  // ... other color and shape variables

This snippet shows the registration of the MorphSVGPlugin and the definition of variables used to store colors and SVG path data for animations.

The yetiTL timeline integrates calls to goDark() and goLight() functions, which are crucial for the dynamic light/dark effect. These functions toggle the visibility of the flashlight beam and dynamically change the fill and stroke colors of various SVG elements, including the yeti's fur, skin, and the "404" text, creating the illusion of the flashlight turning on and off.

function goDark() {
  gsap.set('#light', { visibility: "hidden" });
  gsap.set('.lettersSide', { fill: lettersSideDark, stroke: lettersStrokeDark });
  gsap.set('.lettersFront', { fill: lettersFrontDark, stroke: lettersStrokeDark });
  // ... more color changes for yeti parts
}

This goDark function illustrates how the scene's appearance is altered by hiding the light source and applying dark color themes to the "404" letters and other elements.