Direction-icon
How do I make an direction-icon?
What is a direction-icon? How do you make a direction-icon? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.
Direction-icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>direction-icon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="animation"> <svg width="96px" height="96px" viewBox="0 0 96 96"> <g id="Group-32" transform="translate(10.000000, 5.000000)" stroke-width="1" fill="none" fill-rule="evenodd" stroke="#57EDD4"> <path class="wave3" d="M62.5935533,67.7119299 C70.7958445,60.6643968 76,50.1574026 76,38.4214325 C76,17.2018613 58.9868205,0 38,0 C17.0131795,0 0,17.2018613 0,38.4214325 C0,50.8954866 5.87932571,61.9811214 14.9890179,69 L14.9890179,69" stroke-width="4"></path> <path class="wave2" d="M58.6098071,52.5961387 C61.3790016,48.5263638 63,43.5955808 63,38.2819238 C63,24.3191028 51.8071187,13 38,13 C24.1928813,13 13,24.3191028 13,38.2819238 C13,43.7726018 14.7308025,48.8544706 17.6707601,53 L17.6707601,53" stroke-width="4.03999996"></path> <path class="wave1" d="M49.6101393,40.8520352 C49.864426,39.877186 50,38.8525638 50,37.7954631 C50,31.2810087 44.8512746,26 38.5,26 C32.1487254,26 27,31.2810087 27,37.7954631 C27,38.9061866 27.1496772,39.9810529 27.4294719,41 L27.4294719,41" stroke-width="4.21953979"></path> <path class="tower" d="M38,46 L38,38 L38,45.0029699 C38,45.5536144 37.8311384,46.4221541 37.6280519,46.9298702 L22,86 L54,86 L38,46 Z" stroke-width="4"></path> <path class="diagonal3" d="M32,62 L43,62" stroke-width="2.4582172"></path> <path class="diagonal2" d="M28.6563214,69.2118208 L54,86" stroke-width="2.4582172"></path> <path class="diagonal1" d="M22,86 L47.4937501,69.6161548" stroke-width="2.4582172"></path> </g> </svg>
</div>
</body>
</html>
Direction-icon - Script Codes CSS Codes
html, body { height: 100%;
}
.animation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; cursor: pointer;
}
.tower { stroke-dasharray: 1000; stroke-dashoffset: 1005; -webkit-animation: tower 2s ease-in; animation: tower 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes tower { 0% { stroke-dashoffset: 1000; } 0% { stroke-dashoffset: 1000; } 30% { stroke-dashoffset: 860; } 100% { stroke-dashoffset: 860; }
}
@keyframes tower { 0% { stroke-dashoffset: 1000; } 0% { stroke-dashoffset: 1000; } 30% { stroke-dashoffset: 860; } 100% { stroke-dashoffset: 860; }
}
.diagonal1 { stroke-dasharray: 1000; stroke-dashoffset: 1005; -webkit-animation: diagonal1 2s ease-in; animation: diagonal1 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes diagonal1 { 0% { stroke-dashoffset: 1000; } 30% { stroke-dashoffset: 1000; } 40% { stroke-dashoffset: 965; } 100% { stroke-dashoffset: 965; }
}
@keyframes diagonal1 { 0% { stroke-dashoffset: 1000; } 30% { stroke-dashoffset: 1000; } 40% { stroke-dashoffset: 965; } 100% { stroke-dashoffset: 965; }
}
.diagonal2 { stroke-dasharray: 1000; stroke-dashoffset: 1005; -webkit-animation: diagonal2 2s ease-in; animation: diagonal2 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes diagonal2 { 0% { stroke-dashoffset: 1000; } 40% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 965; } 100% { stroke-dashoffset: 965; }
}
@keyframes diagonal2 { 0% { stroke-dashoffset: 1000; } 40% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 965; } 100% { stroke-dashoffset: 965; }
}
.diagonal3 { stroke-dasharray: 1000; stroke-dashoffset: 1005; -webkit-animation: diagonal3 2s ease-in; animation: diagonal3 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes diagonal3 { 0% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 1000; } 60% { stroke-dashoffset: 990; } 100% { stroke-dashoffset: 990; }
}
@keyframes diagonal3 { 0% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 1000; } 60% { stroke-dashoffset: 990; } 100% { stroke-dashoffset: 990; }
}
.wave1 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: wave1 2s ease-in; animation: wave1 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0;
}
@-webkit-keyframes wave1 { 0% { opacity: 0; } 35% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes wave1 { 0% { opacity: 0; } 35% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-wave1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 35% { -webkit-transform: scale(1.5); transform: scale(1.5); } 45% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-wave1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 35% { -webkit-transform: scale(1.5); transform: scale(1.5); } 45% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.wave2 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: wave2 2s ease-in; animation: wave2 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0;
}
@-webkit-keyframes wave2 { 0% { opacity: 0; } 40% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 55% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes wave2 { 0% { opacity: 0; } 40% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 55% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-wave2 { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-wave2 { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.wave3 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: wave3 2s ease-in; animation: wave3 2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0;
}
@-webkit-keyframes wave3 { 0% { opacity: 0; } 45% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 60% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes wave3 { 0% { opacity: 0; } 45% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 60% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-wave3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 45% { -webkit-transform: scale(1.5); transform: scale(1.5); } 55% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-wave3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 45% { -webkit-transform: scale(1.5); transform: scale(1.5); } 55% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
Developer | Alexandre Masy |
Username | alexandremasy |
Uploaded | October 01, 2022 |
Rating | 3 |
Size | 3,323 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Bullet Loader | 3,028 Kb |
Alexandremasy-logo | 2,821 Kb |
Activate Button | 4,170 Kb |
AngularJS - UI Router - Example 1 | 4,753 Kb |
A Pen by Alexandre Masy | 2,161 Kb |
Yp-loader | 2,917 Kb |
SVG - Color Matrix applied to map | 2,264 Kb |
Tiles - Triangles | 2,696 Kb |
Pair Game | 5,662 Kb |
Conditional Library Loading | 4,568 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Website Concept | Sagoza | 3,104 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!