403 Forbidden Page with SVG illustration, CSS animation and a bit of JS.
Created
March 17, 2019 11:01
-
-
Save patricklind/8b05fd67b70d988f304146ea25f28963 to your computer and use it in GitHub Desktop.
CodePenChallenge: 403 Forbidden Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg xmlns="http://www.w3.org/2000/svg" id="robot-error" viewBox="0 0 260 118.9"> | |
| <defs> | |
| <clipPath id="white-clip"><circle id="white-eye" fill="#cacaca" cx="130" cy="65" r="20" /> </clipPath> | |
| <text id="text-s" class="error-text" y="106"> 403 </text> | |
| </defs> | |
| <path class="alarm" fill="#e62326" d="M120.9 19.6V9.1c0-5 4.1-9.1 9.1-9.1h0c5 0 9.1 4.1 9.1 9.1v10.6" /> | |
| <use xlink:href="#text-s" x="-0.5px" y="-1px" fill="black"></use> | |
| <use xlink:href="#text-s" fill="#2b2b2b"></use> | |
| <g id="robot"> | |
| <g id="eye-wrap"> | |
| <use xlink:href="#white-eye"></use> | |
| <circle id="eyef" class="eye" clip-path="url(#white-clip)" fill="#000" stroke="#2aa7cc" stroke-width="2" stroke-miterlimit="10" cx="130" cy="65" r="11" /> | |
| <ellipse id="white-eye" fill="#2b2b2b" cx="130" cy="40" rx="18" ry="12" /> | |
| </g> | |
| <circle class="lightblue" cx="105" cy="32" r="2.5" id="tornillo" /> | |
| <use xlink:href="#tornillo" x="50"></use> | |
| <use xlink:href="#tornillo" x="50" y="60"></use> | |
| <use xlink:href="#tornillo" y="60"></use> | |
| </g> | |
| </svg> | |
| <h1>You are not allowed to enter here</h1> | |
| <h2>Go <a target="_blank" href="https://www.youtube.com/watch?v=JccW-mLdNe0">Home!</a></h2> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var root = document.documentElement; | |
| var eyef = document.getElementById('eyef'); | |
| var cx = document.getElementById("eyef").getAttribute("cx"); | |
| var cy = document.getElementById("eyef").getAttribute("cy"); | |
| document.addEventListener("mousemove", evt => { | |
| let x = evt.clientX / innerWidth; | |
| let y = evt.clientY / innerHeight; | |
| root.style.setProperty("--mouse-x", x); | |
| root.style.setProperty("--mouse-y", y); | |
| cx = 115 + 30 * x; | |
| cy = 50 + 30 * y; | |
| eyef.setAttribute("cx", cx); | |
| eyef.setAttribute("cy", cy); | |
| }); | |
| document.addEventListener("touchmove", touchHandler => { | |
| let x = touchHandler.touches[0].clientX / innerWidth; | |
| let y = touchHandler.touches[0].clientY / innerHeight; | |
| root.style.setProperty("--mouse-x", x); | |
| root.style.setProperty("--mouse-y", y); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css?family=Bungee"); | |
| body { | |
| background: #1b1b1b; | |
| color: white; | |
| font-family: "Bungee", cursive; | |
| margin-top: 50px; | |
| text-align: center; | |
| } | |
| a { | |
| color: #2aa7cc; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: white; | |
| } | |
| svg { | |
| width: 50vw; | |
| } | |
| .lightblue { | |
| fill: #444; | |
| } | |
| .eye { | |
| cx: calc(115px + 30px * var(--mouse-x)); | |
| cy: calc(50px + 30px * var(--mouse-y)); | |
| } | |
| #eye-wrap { | |
| overflow: hidden; | |
| } | |
| .error-text { | |
| font-size: 120px; | |
| } | |
| .alarm { | |
| animation: alarmOn 0.5s infinite; | |
| } | |
| @keyframes alarmOn { | |
| to { | |
| fill: darkred; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment