<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #333;
}
#logo{
padding: 20px;
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* #logo path:nth-child(1){
stroke-dasharray: 30px;
stroke-dashoffset: 120px;
} */
#logo path:nth-child(2){
stroke-dasharray: 187;
stroke-dashoffset: 187;
animation: line-anim 2s ease forwards;
}
#logo path:nth-child(3){
stroke-dasharray: 374;
stroke-dashoffset: 374;
animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-child(4){
stroke-dasharray: 457;
stroke-dashoffset: 457;
animation: line-anim 2s ease forwards 0.6s;
}
#logo path:nth-child(5){
stroke-dasharray: 338;
stroke-dashoffset: 338;
animation: line-anim 2s ease forwards 0.9s;
}
#logo path:nth-child(6){
stroke-dasharray: 499;
stroke-dashoffset: 499;
animation: line-anim 2s ease forwards 1.2s;
}
#logo path:nth-child(7){
stroke-dasharray: 350;
stroke-dashoffset: 350;
animation: line-anim 2s ease forwards 1.5s;
}
#logo path:nth-child(8){
stroke-dasharray: 270;
stroke-dashoffset: 270;
animation: line-anim 2s ease forwards 1.8s;
}
#logo path:nth-child(9){
stroke-dasharray: 465;
stroke-dashoffset: 465;
animation: line-anim 2s ease forwards 2.1s;
}
#logo path:nth-child(10){
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: line-anim 2s ease forwards 2.4s;
}
#logo path:nth-child(11){
stroke-dasharray: 268;
stroke-dashoffset: 268;
animation: line-anim 2s ease forwards 2.7s;
}
#logo path:nth-child(12){
stroke-dasharray: 310;
stroke-dashoffset: 310;
animation: line-anim 2s ease forwards 3s;
}
#logo path:nth-child(13){
stroke-dasharray: 189;
stroke-dashoffset: 30;
animation: line-anim 2s ease forwards 3.3s;
}
@keyframes line-anim{
to{
stroke-dashoffset: 0;
}
}
</style>
<svg id="logo" width="816" height="145" viewBox="0 0 816 145" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.0799866" y="0.959991" width="816" height="144" fill="black">
<rect fill="white" x="0.0799866" y="0.959991" width="816" height="144"/>
<path d="M37 102.68L8.07999 75.08L37 47.6H50.8L21.76 75.08L50.8 102.68H37Z"/>
<path d="M129.722 59.84C129.722 66.8 127.322 72.6 122.522 77.24C117.802 81.8 110.562 84.08 100.802 84.08H84.7225V119H73.8025V35.36H100.802C110.242 35.36 117.402 37.64 122.282 42.2C127.242 46.76 129.722 52.64 129.722 59.84ZM100.802 75.08C106.882 75.08 111.362 73.76 114.242 71.12C117.122 68.48 118.562 64.72 118.562 59.84C118.562 49.52 112.642 44.36 100.802 44.36H84.7225V75.08H100.802Z"/>
<path d="M181.215 119.84C173.455 119.84 166.375 118.04 159.975 114.44C153.575 110.76 148.495 105.68 144.735 99.2C141.055 92.64 139.215 85.28 139.215 77.12C139.215 68.96 141.055 61.64 144.735 55.16C148.495 48.6 153.575 43.52 159.975 39.92C166.375 36.24 173.455 34.4 181.215 34.4C189.055 34.4 196.175 36.24 202.575 39.92C208.975 43.52 214.015 48.56 217.695 55.04C221.375 61.52 223.215 68.88 223.215 77.12C223.215 85.36 221.375 92.72 217.695 99.2C214.015 105.68 208.975 110.76 202.575 114.44C196.175 118.04 189.055 119.84 181.215 119.84ZM181.215 110.36C187.055 110.36 192.295 109 196.935 106.28C201.655 103.56 205.335 99.68 207.975 94.64C210.695 89.6 212.055 83.76 212.055 77.12C212.055 70.4 210.695 64.56 207.975 59.6C205.335 54.56 201.695 50.68 197.055 47.96C192.415 45.24 187.135 43.88 181.215 43.88C175.295 43.88 170.015 45.24 165.375 47.96C160.735 50.68 157.055 54.56 154.335 59.6C151.695 64.56 150.375 70.4 150.375 77.12C150.375 83.76 151.695 89.6 154.335 94.64C157.055 99.68 160.735 103.56 165.375 106.28C170.095 109 175.375 110.36 181.215 110.36Z"/>
<path d="M281.671 119L261.751 84.8H248.551V119H237.631V35.36H264.631C270.951 35.36 276.271 36.44 280.591 38.6C284.991 40.76 288.271 43.68 290.431 47.36C292.591 51.04 293.671 55.24 293.671 59.96C293.671 65.72 291.991 70.8 288.631 75.2C285.351 79.6 280.391 82.52 273.751 83.96L294.751 119H281.671ZM248.551 76.04H264.631C270.551 76.04 274.991 74.6 277.951 71.72C280.911 68.76 282.391 64.84 282.391 59.96C282.391 55 280.911 51.16 277.951 48.44C275.071 45.72 270.631 44.36 264.631 44.36H248.551V76.04Z"/>
<path d="M362.118 35.36V44.24H339.318V119H328.398V44.24H305.478V35.36H362.118Z"/>
<path d="M422.84 35.36V44.24H386.48V72.44H416V81.32H386.48V119H375.56V35.36H422.84Z"/>
<path d="M473.949 119.84C466.189 119.84 459.109 118.04 452.709 114.44C446.309 110.76 441.229 105.68 437.469 99.2C433.789 92.64 431.949 85.28 431.949 77.12C431.949 68.96 433.789 61.64 437.469 55.16C441.229 48.6 446.309 43.52 452.709 39.92C459.109 36.24 466.189 34.4 473.949 34.4C481.789 34.4 488.909 36.24 495.309 39.92C501.709 43.52 506.749 48.56 510.429 55.04C514.109 61.52 515.949 68.88 515.949 77.12C515.949 85.36 514.109 92.72 510.429 99.2C506.749 105.68 501.709 110.76 495.309 114.44C488.909 118.04 481.789 119.84 473.949 119.84ZM473.949 110.36C479.789 110.36 485.029 109 489.669 106.28C494.389 103.56 498.069 99.68 500.709 94.64C503.429 89.6 504.789 83.76 504.789 77.12C504.789 70.4 503.429 64.56 500.709 59.6C498.069 54.56 494.429 50.68 489.789 47.96C485.149 45.24 479.869 43.88 473.949 43.88C468.029 43.88 462.749 45.24 458.109 47.96C453.469 50.68 449.789 54.56 447.069 59.6C444.429 64.56 443.109 70.4 443.109 77.12C443.109 83.76 444.429 89.6 447.069 94.64C449.789 99.68 453.469 103.56 458.109 106.28C462.829 109 468.109 110.36 473.949 110.36Z"/>
<path d="M541.285 110.12H570.565V119H530.365V35.36H541.285V110.12Z"/>
<path d="M593.082 35.36V119H582.162V35.36H593.082Z"/>
<path d="M649.613 119.84C641.853 119.84 634.773 118.04 628.373 114.44C621.973 110.76 616.893 105.68 613.133 99.2C609.453 92.64 607.613 85.28 607.613 77.12C607.613 68.96 609.453 61.64 613.133 55.16C616.893 48.6 621.973 43.52 628.373 39.92C634.773 36.24 641.853 34.4 649.613 34.4C657.453 34.4 664.573 36.24 670.973 39.92C677.373 43.52 682.413 48.56 686.093 55.04C689.773 61.52 691.613 68.88 691.613 77.12C691.613 85.36 689.773 92.72 686.093 99.2C682.413 105.68 677.373 110.76 670.973 114.44C664.573 118.04 657.453 119.84 649.613 119.84ZM649.613 110.36C655.453 110.36 660.693 109 665.333 106.28C670.053 103.56 673.733 99.68 676.373 94.64C679.093 89.6 680.453 83.76 680.453 77.12C680.453 70.4 679.093 64.56 676.373 59.6C673.733 54.56 670.093 50.68 665.453 47.96C660.813 45.24 655.533 43.88 649.613 43.88C643.693 43.88 638.413 45.24 633.773 47.96C629.133 50.68 625.453 54.56 622.733 59.6C620.093 64.56 618.773 70.4 618.773 77.12C618.773 83.76 620.093 89.6 622.733 94.64C625.453 99.68 629.133 103.56 633.773 106.28C638.493 109 643.773 110.36 649.613 110.36Z"/>
<path d="M746.829 5.95999L713.949 139.4H703.149L735.909 5.95999H746.829Z"/>
<path d="M765.139 47.6H778.939L807.979 75.08L778.939 102.68H765.139L794.179 75.08L765.139 47.6Z"/>
</mask>
<path d="M37 102.68L8.07999 75.08L37 47.6H50.8L21.76 75.08L50.8 102.68H37Z" stroke="gray" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M129.722 59.84C129.722 66.8 127.322 72.6 122.522 77.24C117.802 81.8 110.562 84.08 100.802 84.08H84.7225V119H73.8025V35.36H100.802C110.242 35.36 117.402 37.64 122.282 42.2C127.242 46.76 129.722 52.64 129.722 59.84ZM100.802 75.08C106.882 75.08 111.362 73.76 114.242 71.12C117.122 68.48 118.562 64.72 118.562 59.84C118.562 49.52 112.642 44.36 100.802 44.36H84.7225V75.08H100.802Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M181.215 119.84C173.455 119.84 166.375 118.04 159.975 114.44C153.575 110.76 148.495 105.68 144.735 99.2C141.055 92.64 139.215 85.28 139.215 77.12C139.215 68.96 141.055 61.64 144.735 55.16C148.495 48.6 153.575 43.52 159.975 39.92C166.375 36.24 173.455 34.4 181.215 34.4C189.055 34.4 196.175 36.24 202.575 39.92C208.975 43.52 214.015 48.56 217.695 55.04C221.375 61.52 223.215 68.88 223.215 77.12C223.215 85.36 221.375 92.72 217.695 99.2C214.015 105.68 208.975 110.76 202.575 114.44C196.175 118.04 189.055 119.84 181.215 119.84ZM181.215 110.36C187.055 110.36 192.295 109 196.935 106.28C201.655 103.56 205.335 99.68 207.975 94.64C210.695 89.6 212.055 83.76 212.055 77.12C212.055 70.4 210.695 64.56 207.975 59.6C205.335 54.56 201.695 50.68 197.055 47.96C192.415 45.24 187.135 43.88 181.215 43.88C175.295 43.88 170.015 45.24 165.375 47.96C160.735 50.68 157.055 54.56 154.335 59.6C151.695 64.56 150.375 70.4 150.375 77.12C150.375 83.76 151.695 89.6 154.335 94.64C157.055 99.68 160.735 103.56 165.375 106.28C170.095 109 175.375 110.36 181.215 110.36Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M281.671 119L261.751 84.8H248.551V119H237.631V35.36H264.631C270.951 35.36 276.271 36.44 280.591 38.6C284.991 40.76 288.271 43.68 290.431 47.36C292.591 51.04 293.671 55.24 293.671 59.96C293.671 65.72 291.991 70.8 288.631 75.2C285.351 79.6 280.391 82.52 273.751 83.96L294.751 119H281.671ZM248.551 76.04H264.631C270.551 76.04 274.991 74.6 277.951 71.72C280.911 68.76 282.391 64.84 282.391 59.96C282.391 55 280.911 51.16 277.951 48.44C275.071 45.72 270.631 44.36 264.631 44.36H248.551V76.04Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M362.118 35.36V44.24H339.318V119H328.398V44.24H305.478V35.36H362.118Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M422.84 35.36V44.24H386.48V72.44H416V81.32H386.48V119H375.56V35.36H422.84Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M473.949 119.84C466.189 119.84 459.109 118.04 452.709 114.44C446.309 110.76 441.229 105.68 437.469 99.2C433.789 92.64 431.949 85.28 431.949 77.12C431.949 68.96 433.789 61.64 437.469 55.16C441.229 48.6 446.309 43.52 452.709 39.92C459.109 36.24 466.189 34.4 473.949 34.4C481.789 34.4 488.909 36.24 495.309 39.92C501.709 43.52 506.749 48.56 510.429 55.04C514.109 61.52 515.949 68.88 515.949 77.12C515.949 85.36 514.109 92.72 510.429 99.2C506.749 105.68 501.709 110.76 495.309 114.44C488.909 118.04 481.789 119.84 473.949 119.84ZM473.949 110.36C479.789 110.36 485.029 109 489.669 106.28C494.389 103.56 498.069 99.68 500.709 94.64C503.429 89.6 504.789 83.76 504.789 77.12C504.789 70.4 503.429 64.56 500.709 59.6C498.069 54.56 494.429 50.68 489.789 47.96C485.149 45.24 479.869 43.88 473.949 43.88C468.029 43.88 462.749 45.24 458.109 47.96C453.469 50.68 449.789 54.56 447.069 59.6C444.429 64.56 443.109 70.4 443.109 77.12C443.109 83.76 444.429 89.6 447.069 94.64C449.789 99.68 453.469 103.56 458.109 106.28C462.829 109 468.109 110.36 473.949 110.36Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M541.285 110.12H570.565V119H530.365V35.36H541.285V110.12Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M593.082 35.36V119H582.162V35.36H593.082Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M649.613 119.84C641.853 119.84 634.773 118.04 628.373 114.44C621.973 110.76 616.893 105.68 613.133 99.2C609.453 92.64 607.613 85.28 607.613 77.12C607.613 68.96 609.453 61.64 613.133 55.16C616.893 48.6 621.973 43.52 628.373 39.92C634.773 36.24 641.853 34.4 649.613 34.4C657.453 34.4 664.573 36.24 670.973 39.92C677.373 43.52 682.413 48.56 686.093 55.04C689.773 61.52 691.613 68.88 691.613 77.12C691.613 85.36 689.773 92.72 686.093 99.2C682.413 105.68 677.373 110.76 670.973 114.44C664.573 118.04 657.453 119.84 649.613 119.84ZM649.613 110.36C655.453 110.36 660.693 109 665.333 106.28C670.053 103.56 673.733 99.68 676.373 94.64C679.093 89.6 680.453 83.76 680.453 77.12C680.453 70.4 679.093 64.56 676.373 59.6C673.733 54.56 670.093 50.68 665.453 47.96C660.813 45.24 655.533 43.88 649.613 43.88C643.693 43.88 638.413 45.24 633.773 47.96C629.133 50.68 625.453 54.56 622.733 59.6C620.093 64.56 618.773 70.4 618.773 77.12C618.773 83.76 620.093 89.6 622.733 94.64C625.453 99.68 629.133 103.56 633.773 106.28C638.493 109 643.773 110.36 649.613 110.36Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M746.829 5.95999L713.949 139.4H703.149L735.909 5.95999H746.829Z" stroke="gray" stroke-width="10" mask="url(#path-1-outside-1)"/>
<path d="M765.139 47.6H778.939L807.979 75.08L778.939 102.68H765.139L794.179 75.08L765.139 47.6Z" stroke="gray" stroke-width="10" mask="url(#path-1-outside-1)"/>
</svg>
</body>
</html>
Amazing work💯💯