Attempting to recreate and reverse engineer Stripes new Atlas Hero Banner https://stripe.com/atlas
A Pen by Stefanie Kielbasa on CodePen.
Jet4200 Jet4200
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
| <div style="position: fixed; height: 100%; width: 100%;"> | |
| <div class="arc_reactor"> | |
| <div class="case_container"> | |
| <div class="e7"> | |
| <div class="semi_arc_3 e5_1"> | |
| <div class="semi_arc_3 e5_2"> | |
| <div class="semi_arc_3 e5_3"> | |
| <div class="semi_arc_3 e5_4"> | |
| </div> | |
| </div> |
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
| canvas#canvas |
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 id="mySvg" viewBox="0 0 1000 562"> | |
| <defs id="defs"> | |
| <image id="img" href="https://assets.codepen.io/2045658/streetatnight.gif" width="100%" /> | |
| <filter id="f1"> | |
| <!-- Brightness and Contrast Adjustment --> | |
| <feComponentTransfer> | |
| <feFuncR type="gamma" amplitude="1" exponent="0.5" offset="0" /> | |
| <feFuncG type="gamma" amplitude="1" exponent="0.5" offset="0" /> | |
| <feFuncB type="gamma" amplitude="1" exponent="0.5" offset="0" /> | |
| </feComponentTransfer> |
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 id="mySvg" viewBox="0 0 1000 562"> | |
| <defs id="defs"> | |
| <image id="img" href="https://assets.codepen.io/2045658/streetatnight.gif" width="100%" /> | |
| <filter id="f1"> | |
| <!-- Brightness and Contrast Adjustment --> | |
| <feComponentTransfer> | |
| <feFuncR type="gamma" amplitude="1" exponent="0.5" offset="0" /> | |
| <feFuncG type="gamma" amplitude="1" exponent="0.5" offset="0" /> | |
| <feFuncB type="gamma" amplitude="1" exponent="0.5" offset="0" /> | |
| </feComponentTransfer> |
Jet4200
/ animated-driving-gps-background.markdown
Created
September 18, 2025 22:04
Animated Driving GPS Background
Discover your weather forecast anywhere in the world. 🗺️ This interactive weather application is more than just a simple display; it's a dynamic tool that puts you in control.
Pin a location on the world map, use your device's GPS, or search for a specific place to get an instant, detailed weather report. The app pulls live data from the Open-Meteo API to give you a clear view of current conditions, a 24-hour hourly forecast, and a multi-day daily outlook.
With a clean, responsive design, you can easily toggle between metric and imperial units, and choose the number of days you want to see. This Pen is a full-featured example of how to build a powerful, data-driven utility with JavaScript, jQuery, and Leaflet.js for mapping
Jet4200
/ google-maps-example-nightly.markdown
Created
September 17, 2025 21:38
Google Maps Example: Nightly
A Pen by erfan Alikhani on CodePen.
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
| <div class="container"> | |
| <video class="input_video"></video> | |
| <div class="canvas-container"> | |
| <canvas class="output_canvas" width="1280px" height="720px"> | |
| </canvas> | |
| </div> | |
| <div class="loading"> | |
| <div class="spinner"></div> | |
| <div class="message"> | |
| Loading |
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
| <!-- More info: https://github.com/hchiam/language-user-interface --> | |
| <head> | |
| <title>LUI</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- material design --> | |
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
NewerOlder