Skip to content

Instantly share code, notes, and snippets.

@kobitoDevelopment

kobitoDevelopment/css

Created February 17, 2025 12:31
Show Gist options
  • Save kobitoDevelopment/d6a7acae11be70ec6b2aadee99a55acb to your computer and use it in GitHub Desktop.
Save kobitoDevelopment/d6a7acae11be70ec6b2aadee99a55acb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css
.path {
fill: #ff5ab3;
}
Raw
html
<svg width="80" height="39" viewBox="0 0 80 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Path1 -->
<path d="M51.2894 16H6.71056C3.00396 16 0 13.0489 0 9.40748V6.59252C0 2.95112 3.00396 0 6.71056 0H51.2894C54.996 0 58 2.95112 58 6.59252V9.40748C58 13.0473 54.996 16 51.2894 16Z" fill="#FF5AB3">
<animate
id="path1-1"
attributeName="d"
from="M51.2894 16H6.71056C3.00396 16 0 13.0489 0 9.40748V6.59252C0 2.95112 3.00396 0 6.71056 0H51.2894C54.996 0 58 2.95112 58 6.59252V9.40748C58 13.0473 54.996 16 51.2894 16Z"
to="M9.33572 16H6.66428C2.98324 16 0 13.0489 0 9.40748V6.59252C0 2.95112 2.98324 0 6.66428 0H9.33572C13.0168 0 16 2.95112 16 6.59252V9.40748C16 13.0473 13.0168 16 9.33572 16Z"
dur="2s"
begin="path1-2.end"
fill="freeze"
/>
<animate
id="path1-2"
attributeName="d"
from="M9.33572 16H6.66428C2.98324 16 0 13.0489 0 9.40748V6.59252C0 2.95112 2.98324 0 6.66428 0H9.33572C13.0168 0 16 2.95112 16 6.59252V9.40748C16 13.0473 13.0168 16 9.33572 16Z"
to="M51.2894 16H6.71056C3.00396 16 0 13.0489 0 9.40748V6.59252C0 2.95112 3.00396 0 6.71056 0H51.2894C54.996 0 58 2.95112 58 6.59252V9.40748C58 13.0473 54.996 16 51.2894 16Z"
dur="2s"
begin="path1-1.end"
fill="freeze"
/>
</path>
<!-- Path2 -->
<path d="M73.4075 16H70.5925C66.9511 16 64 13.0489 64 9.40748V6.59252C64 2.95112 66.9511 0 70.5925 0H73.4075C77.0489 0 80 2.95112 80 6.59252V9.40748C80 13.0473 77.0489 16 73.4075 16Z" fill="#FF5AB3">
<animate
id="path2-1"
attributeName="d"
from="M73.4075 16H70.5925C66.9511 16 64 13.0489 64 9.40748V6.59252C64 2.95112 66.9511 0 70.5925 0H73.4075C77.0489 0 80 2.95112 80 6.59252V9.40748C80 13.0473 77.0489 16 73.4075 16Z"
to="M73.3617 16H28.6383C24.9716 16 22 13.0489 22 9.40748V6.59252C22 2.95112 24.9716 0 28.6383 0H73.3617C77.0284 0 80 2.95112 80 6.59252V9.40748C80 13.0473 77.0284 16 73.3617 16Z"
dur="2s"
begin="path2-2.end"
fill="freeze"
/>
<animate
id="path2-2"
attributeName="d"
from="M73.3617 16H28.6383C24.9716 16 22 13.0489 22 9.40748V6.59252C22 2.95112 24.9716 0 28.6383 0H73.3617C77.0284 0 80 2.95112 80 6.59252V9.40748C80 13.0473 77.0284 16 73.3617 16Z"
to="M73.4075 16H70.5925C66.9511 16 64 13.0489 64 9.40748V6.59252C64 2.95112 66.9511 0 70.5925 0H73.4075C77.0489 0 80 2.95112 80 6.59252V9.40748C80 13.0473 77.0489 16 73.4075 16Z"
dur="2s"
begin="path2-1.end"
fill="freeze"
/>
</path>
<!-- Path3 -->
<path d="M28.7106 22H73.2895C76.9961 22 80 24.9511 80 28.5925V31.4075C80 35.0489 76.9961 38 73.2895 38H28.7106C25.004 38 22 35.0489 22 31.4075V28.5925C22 24.9527 25.004 22 28.7106 22Z" fill="#FF5AB3">
<animate
id="path3-1"
attributeName="d"
from="M28.7106 22H73.2895C76.9961 22 80 24.9511 80 28.5925V31.4075C80 35.0489 76.9961 38 73.2895 38H28.7106C25.004 38 22 35.0489 22 31.4075V28.5925C22 24.9527 25.004 22 28.7106 22Z"
to="M70.6643 22H73.3357C77.0168 22 80 24.9511 80 28.5925V31.4075C80 35.0489 77.0168 38 73.3357 38H70.6643C66.9832 38 64 35.0489 64 31.4075V28.5925C64 24.9527 66.9832 22 70.6643 22Z"
dur="2s"
begin="path3-2.end"
fill="freeze"
/>
<animate
id="path3-2"
attributeName="d"
from="M70.6643 22H73.3357C77.0168 22 80 24.9511 80 28.5925V31.4075C80 35.0489 77.0168 38 73.3357 38H70.6643C66.9832 38 64 35.0489 64 31.4075V28.5925C64 24.9527 66.9832 22 70.6643 22Z"
to="M28.7106 22H73.2895C76.9961 22 80 24.9511 80 28.5925V31.4075C80 35.0489 76.9961 38 73.2895 38H28.7106C25.004 38 22 35.0489 22 31.4075V28.5925C22 24.9527 25.004 22 28.7106 22Z"
dur="2s"
begin="path3-1.end"
fill="freeze"
/>
</path>
<path d="M6.59252 22H9.40748C13.0489 22 16 24.9511 16 28.5925V31.4075C16 35.0489 13.0489 38 9.40748 38H6.59252C2.95112 38 6.36385e-07 35.0489 6.36385e-07 31.4075V28.5925C-0.00158258 24.9527 2.95112 22 6.59252 22Z" fill="#FF5AB3">
<animate
id="path4-1"
attributeName="d"
from="M6.59252 22H9.40748C13.0489 22 16 24.9511 16 28.5925V31.4075C16 35.0489 13.0489 38 9.40748 38H6.59252C2.95112 38 6.36385e-07 35.0489 6.36385e-07 31.4075V28.5925C-0.00158258 24.9527 2.95112 22 6.59252 22Z"
to="M6.6383 22H51.3617C55.0284 22 58 24.9511 58 28.5925V31.4075C58 35.0489 55.0284 38 51.3617 38H6.6383C2.97161 38 6.40805e-07 35.0489 6.40805e-07 31.4075V28.5925C-0.00159357 24.9527 2.97161 22 6.6383 22Z"
dur="2s"
begin="path4-2.end"
fill="freeze"
/>
<animate
id="path4-2"
attributeName="d"
from="M6.6383 22H51.3617C55.0284 22 58 24.9511 58 28.5925V31.4075C58 35.0489 55.0284 38 51.3617 38H6.6383C2.97161 38 6.40805e-07 35.0489 6.40805e-07 31.4075V28.5925C-0.00159357 24.9527 2.97161 22 6.6383 22Z"
to="M6.59252 22H9.40748C13.0489 22 16 24.9511 16 28.5925V31.4075C16 35.0489 13.0489 38 9.40748 38H6.59252C2.95112 38 6.36385e-07 35.0489 6.36385e-07 31.4075V28.5925C-0.00158258 24.9527 2.95112 22 6.59252 22Z"
dur="2s"
begin="path4-2.end"
fill="freeze"
/>
</path>
</svg>
Raw
js
const path1_1 = document.querySelector("#path1-1");
const path1_2 = document.querySelector("#path1-2");
const path2_1 = document.querySelector("#path2-1");
const path2_2 = document.querySelector("#path2-2");
const path3_1 = document.querySelector("#path3-1");
const path3_2 = document.querySelector("#path3-2");
const path4_1 = document.querySelector("#path4-1");
const path4_2 = document.querySelector("#path4-2");
// Path1
path1_1.beginElement();
path1_1.addEventListener("endEvent", () => {
setTimeout(() => {
path1_2.beginElement();
}, 1000);
});
path1_2.addEventListener("endEvent", () => {
setTimeout(() => {
path1_1.beginElement();
}, 1000);
});
// Path2
path2_1.beginElement();
path2_1.addEventListener("endEvent", () => {
setTimeout(() => {
path2_2.beginElement();
}, 1000);
});
path2_2.addEventListener("endEvent", () => {
setTimeout(() => {
path2_1.beginElement();
}, 1000);
});
// Path3
path3_1.beginElement();
path3_1.addEventListener("endEvent", () => {
setTimeout(() => {
path3_2.beginElement();
}, 1000);
});
path3_2.addEventListener("endEvent", () => {
setTimeout(() => {
path3_1.beginElement();
}, 1000);
});
// Path4
path4_1.beginElement();
path4_1.addEventListener("endEvent", () => {
setTimeout(() => {
path4_2.beginElement();
}, 1000);
});
path4_2.addEventListener("endEvent", () => {
setTimeout(() => {
path4_1.beginElement();
}, 1000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment