Animated SVG Hexagon
How do I make an animated svg hexagon?
Just goofing around. What is a animated svg hexagon? How do you make a animated svg hexagon? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.
Animated SVG Hexagon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated SVG Hexagon</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:100,300);
body, html { height: 100%; background-color: #ddd;
}
path { stroke-dasharray: 300; stroke-dashoffset: 300; stroke-width: .75; fill-opacity: 0; fill: #80bd01; animation: dash 2s ease-in-out forwards; animation-delay: 0.5s; transform-origin: center center;
}
svg { width: 600px; height: 300px; display: block; margin: 0 auto; margin-bottom: 40px;
}
@keyframes dash { 0% { stroke-dashoffset: 300; fill-opacity: 0; } 75% { fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; transform: rotate(-180deg); }
}
.callout { opacity: 0; width: 100%; text-align: center; font-size: 3em; font-family: 'Lato', sans-serif; font-weight: 200; letter-spacing: .2em; animation: fade .5s ease-in-out forwards; animation-delay: 2.5s; color: #555; -webkit-font-smoothing: antialiased;
}
@keyframes fade { 0% { opacity: 0; margin-top: -10px; } 100% { opacity: 1; margin-top: 0px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="87.59px" height="99.306px" viewBox="0 0 87.59 99.306" enable-background="new 0 0 87.59 99.306" xml:space="preserve">
<g> <path stroke="#777" stroke-miterlimit="10" d="M45.377,98.392c-0.953,0.55-2.513,0.552-3.467,0.005l-39.68-22.75 c-0.954-0.547-1.732-1.895-1.729-2.995l0.139-45.739c0.003-1.1,0.785-2.45,1.738-3l39.837-23c0.953-0.55,2.513-0.552,3.467-0.005 l39.68,22.75c0.954,0.547,1.732,1.895,1.729,2.995l-0.139,45.739c-0.003,1.1-0.785,2.45-1.738,3L45.377,98.392z"/>
</g>
</svg>
<div class="callout">HEXAGON</div>
</body>
</html>
Animated SVG Hexagon - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:100,300);
body, html { height: 100%; background-color: #ddd;
}
path { stroke-dasharray: 300; stroke-dashoffset: 300; stroke-width: .75; fill-opacity: 0; fill: #80bd01; animation: dash 2s ease-in-out forwards; animation-delay: 0.5s; transform-origin: center center;
}
svg { width: 600px; height: 300px; display: block; margin: 0 auto; margin-bottom: 40px;
}
@keyframes dash { 0% { stroke-dashoffset: 300; fill-opacity: 0; } 75% { fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; transform: rotate(-180deg); }
}
.callout { opacity: 0; width: 100%; text-align: center; font-size: 3em; font-family: 'Lato', sans-serif; font-weight: 200; letter-spacing: .2em; animation: fade .5s ease-in-out forwards; animation-delay: 2.5s; color: #555; -webkit-font-smoothing: antialiased;
}
@keyframes fade { 0% { opacity: 0; margin-top: -10px; } 100% { opacity: 1; margin-top: 0px; }
}
Developer | Eli Fitch |
Username | elifitch |
Uploaded | October 28, 2022 |
Rating | 4 |
Size | 3,470 Kb |
Views | 44,528 |
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 |
Cube of cubes | 6,112 Kb |
Batman Middle Finger | 3,152 Kb |
Vanilla JS sticky header | 1,944 Kb |
Goodbye 2016 | 5,786 Kb |
Neon slicey cube | 5,020 Kb |
Animated multi-line underline | 3,247 Kb |
Node DC Animated SVG Logo | 4,055 Kb |
Slanty Button Mixin | 4,109 Kb |
Canvas Hero Prototype | 3,070 Kb |
Gradient Borders Mixin | 3,394 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 |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Ghost | Mghayour | 11,738 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Atom | Bhlaird | 1,932 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Multiple jCarousel | Pafnuty | 2,461 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!