Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/donut-html.markdown

Created March 23, 2026 20:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/b4ec5e3cbbe4d246617b0a8c4524245a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/b4ec5e3cbbe4d246617b0a8c4524245a to your computer and use it in GitHub Desktop.
Download ZIP
donut.html
Raw
index.html
<body class="bg">
<div class="container">
<div class="text-layer bf-item">Welcome</div>
<div class="text-layer rf-item">Welcome</div>
<div class="text-layer lf-item">Welcome</div>
<div class="text-layer tf-item">Welcome</div>
<div class="text-layer si-item">Welcome</div>
</div>
<div class="car-wrapper">
<div id="div1">
<div id="div2" class="sl-logo">BecauseDonut</div>
<div id="div3"><img class="bdonut" src="https://ssurfer.servehttp.com/img/becausedonut.png"></img></div>
</div>
<div class="svg-container">
<img src="https://ssurfer.servehttp.com/racecar.svg" alt="Racecar SVG" class="svg">
</div>
</div>
</div>
</body>
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
*{
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: grid;
place-content: center;
grid-template-columns: 100%;
min-height: 100vh;
max-width: 100vw;
}
.bg {
background-image: url('https://ssurfer.servehttp.com/img/6.png');
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: color;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
z-index: -1;
filter: brightness(75%);
height: 50%;
}
/* Wrapper for the text animation */
.container {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
position: relative;
}
/* Base text layer */
.text-layer {
position: absolute;
left: 50%;
top: 25%;
transform: translate(-50%, -50%);
z-index:1;
font-weight: bold;
font-size: 8em;
font-family: 'Permanent Marker';
}
.text-layer:nth-child(2) {
top: calc (50% + 1px);
left: calc(50% + 1px);
transform: translate(-50%, -50%);
}
.text-layer:nth-child(3) {
top: calc (50% + 2px);
left: calc(50% + 2px);
transform: translate(-50%, -50%);
}
.text-layer:nth-child(4) {
top: calc (50% + 3px);
left: calc(50% + 3px);
transform: translate(-50%, -50%);
}
.text-layer:nth-child(5) {
top: calc (50% + 4px);
left: calc(50% + 4px);
transform: translate(-50%, -50%);
}
.text-layer:nth-child(6) {
top: calc (50% + 5px);
left: calc(50% + 5px);
transform: translate(-50%, -50%);
}
/* Initial slide-in animations */
.text-layer.si-item {
color: #fff;
animation: scale-in-center 4.2s linear 0.4s 1 normal backwards;
}
.text-layer.tf-item {
color: #e25836;
animation: slide-in-elliptic-top-fwd 4.2s linear 0s 1 normal none;}
.text-layer.bf-item {
color: #3079ed;
animation: slide-in-elliptic-bottom-fwd 4.2s linear 0s 1 normal none;
}
.text-layer.rf-item {
color: #e2c638;
animation: slide-in-elliptic-right-fwd 4.2s linear 0s 1 normal none;
}
.text-layer.lf-item {
color: #8dba25;
animation: slide-in-elliptic-left-fwd 4s linear 0s 1 normal none;}
@keyframes fade-in {
0% {
opacity:0;
transform:scale(0);
}
100% {
opacity:1;
transform:scale(2);
}
}
@keyframes fade-out {
0% {
opacity:1;
transform:scale(2);
}
100% {
opacity:0;
transform:scale(0);
}
}
/* Keyframes for slide-in animations */
@keyframes scale-in-center {
0% {
transform:scale(0);
opacity:0;
}
100% {
transform:scale(2);
opacity:1;
}
}
@keyframes slide-in-elliptic-left-fwd {
0% {
transform:translateX(-800px) rotateY(30deg) scale(0);
transform-origin:-100% 50%;
opacity:0;
}
100% {
transform:translateX(0) rotateY(0) scale(1);
transform-origin:1800px 50%;
opacity:1;
}
}
@keyframes slide-out-elliptic-left-bck {
0% {
transform:translateX(0) rotateY(0) scale(1);
transform-origin:2000px 50%;
opacity:1;
}
100% {
transform:translateX(-1000px) rotateY(-30deg) scale(0);
transform-origin:-100% 50%;
opacity:0.5;
}
}
@keyframes slide-in-elliptic-right-fwd {
0% {
transform:translateX(800px) rotateY(-30deg) scale(0);
transform-origin:-100% 50%;
opacity:0;
}
100% {
transform:translateX(0) rotateY(0) scale(1);
transform-origin:-1800px 50%;
opacity:1;
}
}
@keyframes slide-out-elliptic-right-bck {
0% {
transform:translateX(0) rotateY(0) scale(1);
transform-origin:-1800px 50%;
opacity:1;
}
100% {
transform:translateX(1000px) rotateY(-90deg) scale(0);
transform-origin:-100% 50%;
opacity:0.5;
}
}
@keyframes slide-in-elliptic-top-fwd {
0% {
transform:translateY(-600px) rotateX(-30deg) scale(0);
transform-origin:50% 100%;
opacity:0;
}
100% {
transform:translateY(0) rotateX(0) scale(1);
transform-origin:50% 1400px;
opacity:1;
}
}
@keyframes slide-out-elliptic-top-bck {
0% {
transform:translateY(0) rotateX(0) scale(1);
transform-origin:50% 1400px;
opacity:1;
}
100% {
transform:translateY(-600px) rotateX(-30deg) scale(0);
transform-origin:50% 100%;
opacity:0.5;
}
}
@keyframes slide-in-elliptic-bottom-fwd {
0% {
transform:translateY(600px) rotateX(30deg) scale(0);
transform-origin:50% 100%;
opacity:0;
}
100% {
transform:translateY(0) rotateX(0) scale(1);
transform-origin:50% -1400px;
opacity:1;
}
}
@keyframes slide-out-elliptic-bottom-bck {
0% {
transform:translateY(0) rotateX(0) scale(1);
transform-origin:50% -1400px;
opacity:1;
}
100% {
transform:translateY(600px) rotateX(90deg) scale(0);
transform-origin:50% 100%;
opacity:0.5;
}
}
/* Container for the car and logo animation */
.car-wrapper {
position: relative;
overflow: hidden;
align-items: left;
justify-content: flex-start; /* Start from the left */
width: 100%;
height: 100%;
}
.car-wrapper > .div {margin: auto;
padding: 0 10px;
width: 575;
font-size: 30px;
align-items: left;
}
/* Container for the text reveal */
#div1 {
top: 50%;
position: relative;
height: 250px;
width: 0;
margin-left: 1px;
perspective-origin: left;
overflow: hidden;
animation: txt 1s linear 10s forwards;
}
#div2 {
position: absolute;
height:250px;}
#div3 {transform: translateX(575px);}
/* Styling for the text being revealed */
.sl-logo {
left: 0;
font-size: 4em;
color: white;
-webkit-text-stroke: 1px black;
font-family: "Fontdiner Swanky", serif;
font-weight: bolder;
letter-spacing: 4px;
text-shadow: 2px 5px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000;
}
.bdonut {
left: 565px;
animation: spin 2s ease 13s normal;}
/* Adjust SVG Container */
.svg-container {
position: absolute;
left: 1; /* Start completely off-screen */
top: 55%;
width:100vw;
display:inline;
border: 1px solid green;
}
.svg {
animation: drivebck 5s linear backwards;
animation-delay: 10s;
height: auto;
margin-left: -35%;}
/* Animation for text reveal */
@keyframes txt {
0% {width: 0;}
50% {width: 300px;}
100% {width: 600px;}
}
@keyframes drivebck {
0% {
0;
}
20% {
transform: translateX(100%);
}
21% {
transform: translateX(100%) rotateY(.5turn);
}
50% {
transform: translateX(80%) rotateY(.5turn);
}
90% {
transform: translateX(10%) rotateY(.5turn);
}
98% {
transform: translateX(-10vw) rotateY(.5turn);
}
100% {
transform: translateX(-20%) rotateY(180deg);
}
}
@keyframes spin {
0% {0;}
25% {transform: rotateX(50%) rotateY(50%);}
50% {0;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment