Direction-icon

Developer
Alexandre Masy
Size
3,323 Kb
Views
10,120
  1. Direction-icon Previews
  2. Direction-icon HTML Codes
  3. Direction-icon CSS Codes

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 Previews
IQ Test

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); }
}
Direction-icon - Script Codes
Direction-icon - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 3,323 Kb
Views 10,120
Do you need developer help for Direction-icon?

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!

Alexandre Masy (alexandremasy) Script Codes
Name
Ideation-icon
Activate Button
AngularJS - UI Router - Example 1
Bullet Loader
Conditional Library Loading
Tiles - Triangles
Blink
SVG - Color Matrix applied to map
Pair Game
Alexandremasy-logo
Create amazing blog posts with AI!

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!