For websites in the field of children's activities, elements should be used according to the theme of the website. One of these elements is page 404. In this code, page 404 is designed with a childish theme and a teddy bear. This bear is crying in the initial state and the phrase 404 was not returned is written next to it. By placing the mouse cursor on the link below, the bear will smile. When you move the mouse around the phrase 404 is not found, the distance between the characters of this phrase changes.


HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.2.1/styled-components.min.js'></script>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

CSS
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
* {
  box-sizing: border-box;
}
:root {
  --light: 5;
}
body {
  background: hsl(0, 0%, calc(var(--light) * 1%));
  font-family: 'Roboto Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --light: 5;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --light: 95;
  }
}
h1 {
  margin: 0;
}
a {
  color: hsl(0, 0%, calc((100 - var(--light)) * 1%));
  font-weight: bold;
}
#app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.glitchy-text {
  color: hsl(0, 0%, calc((100 - var(--light, 95)) * 1%));
  display: inline-block;
  position: relative;
}
.glitchy-text__char--readable {
  opacity: 0;
  position: absolute;
}
.glitchy-text__char {
  color: transparent;
  position: relative;
}
.glitchy-text__char:after {
  --txt: attr(data-char);
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-timing-function: steps(1);
          animation-timing-function: steps(1);
  -webkit-animation-iteration-count: var(--count);
          animation-iteration-count: var(--count);
  -webkit-animation-name: glitch-switch;
          animation-name: glitch-switch;
  color: hsl(0, 0%, calc((100 - var(--light, 95)) * 1%));
  transition: color 0.2s ease 0s;
  position: absolute;
  content: var(--txt);
  left: 0;
  top: 0;
}
.bear__shades {
  opacity: var(--bear-shades);
}
.bear__tear-stream {
  fill: hsla(200, 100%, 75%, var(--bear-tears, 0));
}
.bear__brows {
  stroke: hsla(0, 0%, 0%, var(--bear-brows, 0));
}
.bear__eye {
  fill: hsla(0, 0%, 0%, var(--bear-eyes, 0));
}
.bear-logo {
  grid-row: span 2;
  position: relative;
  max-width: 400px;
  -o-object-fit: contain;
     object-fit: contain;
  height: 6rem;
  width: 6rem;
}
.bear__eye--teary {
  fill: hsla(200, 100%, 75%, calc(var(--bear-tears, 0) - 0.5));
}
@media (min-width: 768px) {
  .bear-logo {
    height: 12rem;
    width: 12rem;
  }
}
.return-link:hover ~ .bear-logo--tears {
  --bear-brows: 0;
  --bear-tears: 0;
}
.bear-logo--tears {
  --bear-shades: 0;
  --bear-brows: 1;
  --bear-tears: 0.75;
  --bear-eyes: 1;
}
.bear-logo--tears path,
.bear-logo--tears circle,
.bear-logo--tears ellipse {
  transition: fill 0.2s ease 0s, transform 0.2s ease 0s;
}
.return-link:hover ~ .bear-logo--tears .bear__eye {
  transform: scaleY(1);
  fill: hsla(0, 100%, 0%, var(--bear-eyes));
}
.bear-logo--tears .bear__eye {
  transform: scaleY(0.25);
  transform-origin: 97px 894px;
  fill: hsla(200, 100%, 75%, var(--bear-eyes));
}
.bear-logo--tears .bear__eye--right {
  transform-origin: 201px 894px;
}
/* Handle mousemove translation of characters */
/* Logo */
.bear-logo--tears {
  --scaleX: -50;
  --scaleY: -50;
}
/* 404 */
.four-oh-four__code span:nth-of-type(2) {
  --scaleX: 30;
  --scaleY: -20;
}
.four-oh-four__code span:nth-of-type(3) {
  --scaleX: -20;
  --scaleY: 50;
}
.four-oh-four__code span:nth-of-type(4) {
  --scaleX: -30;
  --scaleY: 40;
}
/* Not found */
.four-oh-four__code-message span:nth-of-type(2) {
  --scaleX: 20;
  --scaleY: 10;
}
.four-oh-four__code-message span:nth-of-type(3) {
  --scaleX: 5;
  --scaleY: -10;
}
.four-oh-four__code-message span:nth-of-type(4) {
  --scaleX: 40;
  --scaleY: -30;
}
.four-oh-four__code-message span:nth-of-type(6) {
  --scaleX: 50;
  --scaleY: 50;
}
.four-oh-four__code-message span:nth-of-type(7) {
  --scaleX: 0;
  --scaleY: -15;
}
.four-oh-four__code-message span:nth-of-type(8) {
  --scaleX: 35;
  --scaleY: 10;
}
.four-oh-four__code-message span:nth-of-type(9) {
  --scaleX: -40;
  --scaleY: 25;
}
.four-oh-four__code-message span:nth-of-type(10) {
  --scaleX: 50;
  --scaleY: -25;
}
.bear-logo,
.four-oh-four__code span:nth-of-type(2):after,
.four-oh-four__code span:nth-of-type(3):after,
.four-oh-four__code span:nth-of-type(4):after,
.four-oh-four__code-message span:nth-of-type(2):after,
.four-oh-four__code-message span:nth-of-type(3):after,
.four-oh-four__code-message span:nth-of-type(4):after,
.four-oh-four__code-message span:nth-of-type(6):after,
.four-oh-four__code-message span:nth-of-type(7):after,
.four-oh-four__code-message span:nth-of-type(8):after,
.four-oh-four__code-message span:nth-of-type(9):after,
.four-oh-four__code-message span:nth-of-type(10):after {
  --translateX: calc((var(--X)) * var(--scaleX) * 1px);
  --translateY: calc((var(--Y)) * var(--scaleY) * 1px);
  transform: translate(var(--translateX), var(--translateY));
}
@-webkit-keyframes glitch-switch {
  0% {
    content: var(--char-0);
  }
  10% {
    content: var(--char-1);
  }
  20% {
    content: var(--char-2);
  }
  30% {
    content: var(--char-3);
  }
  40% {
    content: var(--char-4);
  }
  50% {
    content: var(--char-5);
  }
  60% {
    content: var(--char-6);
  }
  70% {
    content: var(--char-7);
  }
  80% {
    content: var(--char-8);
  }
  90% {
    content: var(--char-9);
  }
  100% {
    content: var(--char-0);
  }
}
@keyframes glitch-switch {
  0% {
    content: var(--char-0);
  }
  10% {
    content: var(--char-1);
  }
  20% {
    content: var(--char-2);
  }
  30% {
    content: var(--char-3);
  }
  40% {
    content: var(--char-4);
  }
  50% {
    content: var(--char-5);
  }
  60% {
    content: var(--char-6);
  }
  70% {
    content: var(--char-7);
  }
  80% {
    content: var(--char-8);
  }
  90% {
    content: var(--char-9);
  }
  100% {
    content: var(--char-0);
  }
}
Javascript
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}const {
  React: { useEffect },
  ReactDOM: { render },
  styled: { default: styled } } =
window;
const GLITCH_CHARS = '`¡™£¢∞§¶•ªº–≠åß∂ƒ©˙∆˚¬…æ≈ç√∫˜µ≤≥÷/?░▒▓<>/'.split('');
const ReadableChar = styled.span``;
const GlitchyChar = styled.span``;
/**
 * A glitchy text reveal title
 */
const GlitchyText = ({ children, ...props }) => {
  return /*#__PURE__*/(
    React.createElement("h1", _extends({}, props, { className: `glitchy-text ${props.className}` }), /*#__PURE__*/
    React.createElement(ReadableChar, { className: "glitchy-text__char--readable" },
    children),
    children.split('').map((char, idx) => {
      const charStyle = {
        '--count': Math.random() * 5 + 1 };
      for (let i = 0; i < 10; i++) {
        charStyle[`--char-${i}`] = `"${
        GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]
        }"`;
      }
      return /*#__PURE__*/(
        React.createElement(GlitchyChar, {
          className: "glitchy-text__char",
          "aria-hidden": true,
          "data-char": char,
          key: `glitch-char--${idx}`,
          style: charStyle },
        char));
    })));
};
const Logo = ({ className }) => {
  return /*#__PURE__*/(
    React.createElement("svg", {
      className: `bear-logo ${className}`,
      viewBox: "0 0 300 300",
      xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
    React.createElement("g", { transform: "matrix(1.34105 0 0 1.34105 -51.157 -1049.694)" }, /*#__PURE__*/
    React.createElement("path", {
      d: "M242.822 893.869c0 61.251-41.365 106.284-94.67 106.284-53.306 0-90.974-45.033-90.974-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z",
      fill: "#803300" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M211.925 958.105c0 19.907-28.138 38.819-62.85 38.819-34.71 0-61-18.912-61-38.82 0-19.907 26.29-33.273 61-33.273 34.712 0 62.85 13.366 62.85 33.274z",
      fill: "#e9c6af" }), /*#__PURE__*/
    React.createElement("path", { d: "M179.114 931.763c0 7.657-19.04 24.493-30.27 24.493s-32.117-16.836-32.117-24.493 20.888-12.477 32.118-12.477 30.27 4.82 30.27 12.477z" }), /*#__PURE__*/
    React.createElement("ellipse", {
      ry: "23.111",
      rx: "23.762",
      cy: "827.682",
      cx: "68.304",
      fill: "#803300" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M84.784 826.317a16.549 16.095 0 00-16.48-14.731 16.549 16.095 0 00-16.548 16.095 16.549 16.095 0 0016.548 16.096 16.549 16.095 0 001.132-.039c.815-1.337 1.582-2.727 2.471-3.983a65.703 65.703 0 015.055-6.283 65.597 65.597 0 015.713-5.548c.668-.576 1.417-1.058 2.109-1.607z",
      fill: "#e9c6af" }), /*#__PURE__*/
    React.createElement("ellipse", {
      transform: "scale(-1 1)",
      cx: "-231.243",
      cy: "827.682",
      rx: "23.762",
      ry: "23.111",
      fill: "#803300" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M214.764 826.317a16.549 16.095 0 0116.48-14.731 16.549 16.095 0 0116.548 16.095 16.549 16.095 0 01-16.549 16.096 16.549 16.095 0 01-1.131-.039c-.816-1.337-1.582-2.727-2.472-3.983a65.703 65.703 0 00-5.055-6.283 65.597 65.597 0 00-5.712-5.548c-.67-.576-1.418-1.058-2.11-1.607z",
      fill: "#e9c6af" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M147.731 815.358c-13.396 0-26.022 1.079-37.671 3.334v11.353c11.649-2.255 24.275-3.334 37.671-3.334 15.104 0 29.459 1.373 42.667 4.256v-11.355c-13.208-2.883-27.564-4.254-42.667-4.254z",
      fill: "red" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M165.195 816.013a15.875 7.813 0 014.43 5.412 15.875 7.813 0 01-5.414 5.863c9.116.653 17.878 1.866 26.186 3.68v-11.356c-8.007-1.748-16.44-2.931-25.202-3.6z",
      fill: "#e50000" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M148.387 789.038c-43.49 0-75.817 18.34-83.229 62.715 12.322-10.516 27.524-17.553 44.903-21.51 0 0-2.734-13.778 10.25-16.029 12.983-2.25 14.025-4 27.421-4 15.103 0 16.422.44 30.666 4 14.245 3.561 12 17.113 12 17.113 17.218 4.421 32.483 11.864 44.9 22.71-7.275-46.03-42.684-64.999-86.911-64.999z",
      fill: "#1a1a1a" }), /*#__PURE__*/
    React.createElement("path", {
      className: "bear__tear-stream",
      d: "M190.665 893.336v96.221c8.24-4.43 15.761-10.15 22.37-16.971v-79.25h-22.37zM86.056 893.336v80.399c6.546 6.885 14.056 12.592 22.37 16.92v-97.32h-22.37z" }), /*#__PURE__*/
    React.createElement("path", {
      className: "bear__brows",
      d: "M96.601 864.041a21.271 21.271 0 01-6.78 15.572 21.271 21.271 0 01-16.02 5.644M203.53 864.041a21.271 21.271 0 006.78 15.572 21.271 21.271 0 0016.02 5.644",
      fill: "none",
      strokeWidth: "2.983",
      strokeLinecap: "round",
      strokeLinejoin: "round" }), /*#__PURE__*/
    React.createElement("circle", {
      className: "bear__eye bear__eye--left",
      r: "11.185",
      cy: "894.081",
      cx: "97.242" }), /*#__PURE__*/
    React.createElement("circle", {
      className: "bear__eye bear__eye--right",
      r: "11.185",
      cx: "201.851",
      cy: "894.081" }), /*#__PURE__*/
    React.createElement("g", { className: "bear__shades" }, /*#__PURE__*/
    React.createElement("path", { d: "M77.29 854.608c-6.508-.07-13.363.182-22.8 2.131l-14.318 2.769 2.308 15.038c2.094.293 4.984 1.016 6.352 2.848 3.528 4.722 1.202 9.286 2.003 17.625 2.67 27.781 11.92 33.596 26.247 35.267 7.502.875 22.816 2.282 33.28-1.433 9.456-3.357 18.223-9.868 24.158-17.96 6.274-8.553 6.948-18.43 10.843-25.92 2.76-5.31 7.7-3.786 9.258.39 2.951 7.91 4.379 16.977 10.653 25.53 5.935 8.092 14.702 14.603 24.159 17.96 10.463 3.715 25.777 2.308 33.279 1.433 14.326-1.671 23.578-7.486 26.249-35.267.801-8.339-1.525-12.903 2.003-17.625 1.414-1.893 4.463-2.611 6.567-2.885l2.297-14.962-14.522-2.808c-15.1-3.12-23.591-1.89-34.623-1.957-4.093-.025-8.777.115-13.136.573-8.125.855-16.176 2.382-24.174 4.05-7.988 1.665-15.589 6.1-23.747 5.942-7.868-.153-14.966-4.977-22.664-6.616-8.132-1.732-14.824-3.106-24.713-3.376-4.794-.13-9.043-.598-13.136-.573-4.137.026-7.918-.132-11.823-.174z" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M85.28 860.471c-10.088.168-24.807.706-28.48 12.251-3.277 15.249-3.122 32.76 5.735 45.627 7.396 10.745 23.365 8.637 35.258 8.22 18.899-.663 35.138-15.383 40.158-33.389 1.93-7.753 3.906-11.697.696-19.382-7.653-8.953-20.099-11.778-30.58-12.967a443.553 443.553 0 00-22.787-.36z",
      fill: "#333" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M56.04 864.299a4.079 1.692 0 01-4.058 1.692 4.079 1.692 0 01-4.1-1.675 4.079 1.692 0 014.017-1.71 4.079 1.692 0 014.14 1.658",
      fill: "#b3b3b3" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M214.515 860.471c10.088.168 24.807.706 28.481 12.251 3.276 15.249 3.12 32.76-5.736 45.627-7.396 10.745-23.365 8.637-35.257 8.22-18.9-.663-35.139-15.383-40.16-33.389-1.928-7.753-3.905-11.697-.695-19.382 7.653-8.953 20.1-11.778 30.58-12.967a443.553 443.553 0 0122.787-.36z",
      fill: "#333" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M243.755 864.299a4.079 1.692 0 004.058 1.692 4.079 1.692 0 004.1-1.675 4.079 1.692 0 00-4.017-1.71 4.079 1.692 0 00-4.14 1.658",
      fill: "#b3b3b3" }), /*#__PURE__*/
    React.createElement("path", {
      d: "M100.812 860.598l-19.186 66.305c5.485.302 11.181-.16 16.165-.335.244-.008.486-.03.73-.043l18.585-64.222c-3.068-.678-6.13-1.14-9.039-1.47a473.891 473.891 0 00-7.255-.235zM89.154 860.456c-1.292.002-2.586 0-3.875.014-1.081.018-2.235.05-3.403.09l-17.662 59.853c1.729 1.827 3.77 3.172 6.025 4.148l18.915-64.105z",
      fill: "#fff" })))));
};
const Container = styled.div`
  display: inline-grid;
  grid-gap: 0 1rem;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
`;
const Code = styled(GlitchyText)`
  align-self: end;
  font-size: 3rem;
  @media (min-width: 768px) {
    font-size: 6rem;
  }
`;
const AppShell = styled.main`
  display: flex;
  align-items: center;
  justify-content: center;
`;
const CodeMessage = styled(GlitchyText)`
  font-size: 1.5rem;

  @media (min-width: 768px) {
    font-size: 3rem;
  }
`;
const Message = styled.a`
  grid-column: span 2;
  grid-row: -1;
  text-align: center;
  margin: 2rem auto;
  &:hover {
    & ~ img {
      background: red;
    }
  }
`;
const FourOhFour = () => {
  useEffect(() => {
    const root = document.documentElement;
    const update = e => {
      if (e.acceleration && e.acceleration.x !== null) {
        root.style.setProperty('--X', e.acceleration.x);
        root.style.setProperty('--Y', e.acceleration.y);
      } else {
        root.style.setProperty('--X', e.pageX / window.innerWidth - 0.5);
        root.style.setProperty('--Y', e.pageY / window.innerHeight - 0.5);
      }
    };
    document.body.addEventListener('mousemove', update);
    window.ondevicemotion = update;
    return () => {
      document.body.removeEventListener('mousemove', update);
    };
  }, []);
  return /*#__PURE__*/(
    React.createElement(AppShell, null, /*#__PURE__*/
    React.createElement(Container, null, /*#__PURE__*/
    React.createElement(Message, { className: "return-link", href: "/#", rel: "noreferrer noopener" }, "Return to happiness"), /*#__PURE__*/
    React.createElement(Logo, { className: "bear-logo--tears" }), /*#__PURE__*/
    React.createElement(Code, { className: "four-oh-four__code" }, "404"), /*#__PURE__*/
    React.createElement(CodeMessage, { className: "four-oh-four__code-message" }, "Not found"))));
};
const ROOT = document.getElementById('app');
render( /*#__PURE__*/React.createElement(FourOhFour, null), ROOT);

 Previous

Fancy 404 Not Found Web Page with Magnifier . . .

This page 404 has a pale pink background. The phrase 404 is written in the middle of the page, but instead of the zero character, a magnifying glass is . . .

Fancy 404 Not Found Web Page with Magnifier . . .
404 Not Found Page with a Moving Bottle . . .

404 Not Found Page with a Moving Bottle . . .

In this page not found, a bottle is placed on the water and its contents are poured into the water. The expression 404 is also in the water. The bottle . . .

  Next