Skip to content

Instantly share code, notes, and snippets.

@rtzll

rtzll/index.html

Created December 11, 2020 17:23
Show Gist options
  • Save rtzll/cccd62c5c8c424cbbac0c26a868cdd28 to your computer and use it in GitHub Desktop.
Save rtzll/cccd62c5c8c424cbbac0c26a868cdd28 to your computer and use it in GitHub Desktop.
Download ZIP
simple css animation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>rtzll</title>
</head>
<body>
<svg id="logo" width="414" height="119" viewBox="0 0 414 119" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.8144 36.2792L68.9526 34.2172L66.9534 33.6936C62.7828 32.6013 59.0103 32.028 55.664 32.028C48.707 32.028 42.7225 33.7743 37.8849 37.4293L37.8741 37.4375L37.8634 37.4458C34.9293 39.713 32.3017 42.6569 29.9598 46.2325L28.6238 35.7946L28.3444 33.612H26.144H5.12H2.62V36.112V45.472V47.972H5.12H14.572V100.14H5.12H2.62V102.64V112V114.5H5.12H44.576H47.076V112V102.64V100.14H44.576H31.668V71.0337C34.0382 63.0824 37.1425 57.3623 40.8409 53.6426C44.097 50.3676 47.8851 48.5657 52.3 48.1902V61.888V64.388H54.8H64.592H66.93L67.0864 62.0552L68.8144 36.2792ZM152.467 110.192L154.419 108.89L153.243 106.859L148.491 98.6514L147.283 96.5642L145.154 97.6968C141.009 99.9017 136.564 101.004 131.784 101.004C126.951 101.004 124.013 99.9855 122.385 98.4931C120.771 97.014 119.74 94.5841 119.74 90.688V48.116H142.008H144.126L144.474 46.027L146.058 36.523L146.543 33.612H143.592H119.74V17.536V14.7207L116.944 15.0535L104.848 16.4935L102.644 16.756V18.976V33.612H87.7197H85.2197V36.112V45.616V48.116H87.7197H102.644V90.832C102.644 98.2607 105.131 104.469 110.203 109.217L110.214 109.227L110.224 109.236C115.323 113.901 122.234 116.084 130.632 116.084C134.499 116.084 138.358 115.575 142.204 114.564C146.154 113.55 149.593 112.108 152.467 110.192ZM236.876 101.976L237.271 99.132H234.4H197.19L235.972 47.1102L236.467 46.4453V45.616V36.112V33.612H233.967H180.688H178.188V36.112V46.768V49.268H180.688H214.421L175.376 101.283L174.876 101.95V102.784V112V114.5H177.376H232.96H235.136L235.436 112.344L236.876 101.976ZM320.647 100.064L319.782 97.6655L317.401 98.5773C313.112 100.22 309.193 101.004 305.623 101.004C301.723 101.004 299.262 100.198 297.808 99.0111C296.451 97.9035 295.595 96.1532 295.595 93.28V5.58398V3.08398H293.095H257.671H255.171V5.58398V15.232V17.732H257.671H278.499V92.704C278.499 99.7029 280.718 105.502 285.346 109.8L285.357 109.81L285.368 109.82C290.053 114.069 296.172 116.084 303.463 116.084C310.95 116.084 317.388 114.738 322.651 111.896L324.545 110.873L323.815 108.848L320.647 100.064ZM406.991 100.064L406.126 97.6655L403.745 98.5773C399.455 100.22 395.537 101.004 391.967 101.004C388.067 101.004 385.606 100.198 384.152 99.0111C382.794 97.9035 381.939 96.1532 381.939 93.28V5.58398V3.08398H379.439H344.015H341.515V5.58398V15.232V17.732H344.015H364.843V92.704C364.843 99.7029 367.061 105.502 371.69 109.8L371.701 109.81L371.711 109.82C376.397 114.069 382.515 116.084 389.807 116.084C397.294 116.084 403.732 114.738 408.995 111.896L410.889 110.873L410.159 108.848L406.991 100.064Z" stroke="white" stroke-width="5"/>
</svg>
</body>
</html>
Raw
style.css
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
background: black;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fill 1s ease forwards 4.5s;
}
#logo path {
stroke-dasharray: 1833px;
stroke-dashoffset: 1833px;
animation: line-animation 25s ease forwards;
}
@keyframes line-animation {
to {
stroke-dashoffset: 0;
}
}
@keyframes fill {
from {
fill: transparent;
}
to {
fill: white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment