MicroHero Logo Animation
How do I make an microhero logo animation?
A nice little animated svg logo for http://microhero.com. What is a microhero logo animation? How do you make a microhero logo animation? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.
MicroHero Logo Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html class="play">
<head> <meta charset="UTF-8"> <title>MicroHero Logo Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ html { height: 100%;
}
body { display: flex; align-items: center; justify-content: center; min-height: 100%; margin: 0;
}
.replay-button { position: absolute; top: 0; right: 0; margin: 3em; padding: 0.375em 1em; font-size: 0.875rem; text-transform: uppercase; background: #9b9fa8; border: none; color: #384051; border-radius: 4px; cursor: pointer;
}
#animated-logo { width: 100px; height: 100px;
}
.drawing { stroke-width: 10px; stroke: #bec0dd; fill: none; stroke-dasharray: 1567; stroke-dashoffset: 1567;
}
.play .fill { opacity: 0; animation: fade-in 1.5s ease-in forwards 4.5s;
}
.play .inner-drawing { animation: draw 6s ease forwards, fade-out 1s ease forwards 4.5s;
}
.play .circle-drawing { animation: rotate 6s ease normal, fade-out 1s ease forwards 4.5s; stroke-width: 10px; transform-origin: center center;
}
.play .circle-fill { stroke: #f1f1f1; animation: fade-in 2s ease-in forwards 3s;
}
@keyframes fade-in { to { opacity: 1; }
}
@keyframes fade-out { to { stroke: transparent; stroke-width: 0; }
}
@keyframes draw { from { stroke-dashoffset: 1567; } 40% { stroke-dashoffset: 0; } to { stroke-dashoffset: 1567; }
}
@keyframes rotate { from { stroke-dashoffset: 1567; } 50% { stroke-dashoffset: 0; transform: rotate(360deg); } to { transform: rotate(720deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button class="js-do-it-again replay-button">replay</button>
<svg version="1.1" id="animated-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <g class="outlines"> <circle class="drawing circle-drawing" cx="256" cy="256" r="240"/> <path class="drawing inner-drawing" d="M181.047,355.375 c-23.344,0-42.188,18.844-42.188,42.188c0,23.344,18.844,42.188,42.188,42.188c23.344,0,42.188-18.844,42.188-42.188 C223.234,374.219,204.391,355.375,181.047,355.375z"/> <path class="drawing inner-drawing" d="M138.859,243.179v48.164"/> <path class="drawing inner-drawing" d="M223.141,291.344v-25.969h30.281 c12.469,0,15-12.281,15-12.281c4.406-20.906,6.844-45,6.844-70.781c0-4.336-0.069-8.702-0.204-12.902"/> <path class="drawing inner-drawing" d="M275.922,106.656h-81.562 c-35.813,0-64.781,29.062-64.781,64.781v55.125c0,6.469-3.188,13.969-8.344,19.406h5.156c4.464,0,8.69-1.003,12.469-2.789 c9.871-4.667,16.688-14.706,16.688-26.367v-9.094c0-6.75,4.875-12.844,11.625-13.5c7.688-0.75,14.25,5.344,14.25,12.938v9.469 l13.969-15c5.625-6,8.719-13.875,8.719-22.125v-8.156h58.312c4.404,0,8.649-0.679,12.639-1.933 c17.073-5.367,29.454-21.315,29.454-40.161V92.125C298.141,100.937,287.828,106.656,275.922,106.656z"/> <path class="drawing inner-drawing" d="M454.68,390.676 c-17.061-17.81-38.512-34.646-64.29-48.988c-27.929-15.558-57.825-28.492-93.81-38.147c0.005,0.003,0.009,0.005,0.014,0.008 c26.888,9.191,51.621,25.496,71.671,47.514c15.281,16.688,27.281,36.469,37.031,57.375c3.935,8.525,7.776,17.05,11.897,25.388"/> <path class="drawing inner-drawing" d="M346.609,478.307v-89.744 c0-36.583-20.178-68.421-50.015-85.014c-0.016-0.005-0.032-0.012-0.048-0.017c0.011,0.003,0.022,0.006,0.034,0.009 c-13.973-7.768-30.06-12.197-47.19-12.197h-26.25c0,23.274-18.867,42.141-42.141,42.141s-42.141-18.867-42.141-42.141h-38.531 c-30.469,0-57.252,16.317-72.065,40.599"/> </g> <g class="fills"> <circle class="fill circle-fill" fill="#F1F1F1" cx="256" cy="256" r="240"/> <path class="fill" fill="#E09074" d="M181,333.484c23.274,0,42.141-18.867,42.141-42.141v-25.969h30.281 c12.469,0,15-12.281,15-12.281c4.406-20.906,6.844-45,6.844-70.781c0-4.336-0.069-8.702-0.204-12.902 c-3.99,1.254-8.235,1.933-12.639,1.933h-58.312v8.156c0,8.25-3.094,16.125-8.719,22.125l-13.969,15v-9.469 c0-7.594-6.562-13.687-14.25-12.937c-6.75,0.656-11.625,6.75-11.625,13.5v9.094c0,11.661-6.817,21.7-16.688,26.367v48.164 C138.859,314.617,157.726,333.484,181,333.484z"/> <path class="fill" fill="#C55135" d="M212,265.375c-6.627,0-12,4.998-12,11.625v49.5c0,0.8,0.082,1.58,0.231,2.336 c13.6-6.99,22.909-21.15,22.909-37.493v-25.969H212z"/> <path class="fill" fill="#1382DF" d="M368.266,351.062c-20.051-22.018-44.783-38.323-71.671-47.514 c29.837,16.593,50.015,48.431,50.015,85.014v89.725c26.145-10.669,49.994-25.801,70.579-44.474 c-4.119-8.334-7.959-16.855-11.892-25.376C395.547,387.531,383.547,367.75,368.266,351.062z"/> <path class="fill" fill="#29ABE2" d="M390.391,341.687c-27.929-15.558-57.825-28.492-93.81-38.147 c0.005,0.003,0.009,0.005,0.014,0.008c26.888,9.191,51.621,25.496,71.671,47.514c15.281,16.688,27.281,36.469,37.031,57.375 c3.933,8.521,7.772,17.042,11.892,25.376c14.135-12.821,26.731-27.306,37.487-43.143 C437.615,372.863,416.166,356.028,390.391,341.687z"/> <path class="fill" fill="#FFFFFF" d="M296.595,303.548c-0.016-0.005-0.032-0.012-0.048-0.017 c0.011,0.003,0.022,0.006,0.034,0.009c-13.973-7.768-30.06-12.197-47.19-12.197h-26.25c0,23.274-18.867,42.141-42.141,42.141 s-42.141-18.867-42.141-42.141h-38.531c-30.464,0-57.243,16.312-72.057,40.587C60.043,427.263,149.99,496,256,496 c32.063,0,62.649-6.303,90.609-17.713v-89.725C346.609,351.979,326.432,320.142,296.595,303.548z"/> <path class="fill" fill="#DFD9D9" d="M181.047,355.375c-23.344,0-42.188,18.844-42.188,42.188 c0,23.344,18.844,42.188,42.188,42.188c23.344,0,42.188-18.844,42.188-42.188C223.234,374.219,204.391,355.375,181.047,355.375z"/> <path class="fill" fill="#000" d="M155.547,216.812v-9.094c0-6.75,4.875-12.844,11.625-13.5c7.688-0.75,14.25,5.344,14.25,12.937v9.469 l13.969-15c5.625-6,8.719-13.875,8.719-22.125v-8.156h58.312c4.404,0,8.649-0.679,12.639-1.933 c17.073-5.367,29.454-21.315,29.454-40.161V92.125c-6.375,8.812-16.688,14.531-28.594,14.531h-81.562 c-35.812,0-64.781,29.062-64.781,64.781v55.125c0,6.469-3.188,13.969-8.344,19.406h5.156c4.464,0,8.69-1.003,12.469-2.789 C148.73,238.512,155.547,228.473,155.547,216.812z"/> </g> </svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
MicroHero Logo Animation - Script Codes CSS Codes
html { height: 100%;
}
body { display: flex; align-items: center; justify-content: center; min-height: 100%; margin: 0;
}
.replay-button { position: absolute; top: 0; right: 0; margin: 3em; padding: 0.375em 1em; font-size: 0.875rem; text-transform: uppercase; background: #9b9fa8; border: none; color: #384051; border-radius: 4px; cursor: pointer;
}
#animated-logo { width: 100px; height: 100px;
}
.drawing { stroke-width: 10px; stroke: #bec0dd; fill: none; stroke-dasharray: 1567; stroke-dashoffset: 1567;
}
.play .fill { opacity: 0; animation: fade-in 1.5s ease-in forwards 4.5s;
}
.play .inner-drawing { animation: draw 6s ease forwards, fade-out 1s ease forwards 4.5s;
}
.play .circle-drawing { animation: rotate 6s ease normal, fade-out 1s ease forwards 4.5s; stroke-width: 10px; transform-origin: center center;
}
.play .circle-fill { stroke: #f1f1f1; animation: fade-in 2s ease-in forwards 3s;
}
@keyframes fade-in { to { opacity: 1; }
}
@keyframes fade-out { to { stroke: transparent; stroke-width: 0; }
}
@keyframes draw { from { stroke-dashoffset: 1567; } 40% { stroke-dashoffset: 0; } to { stroke-dashoffset: 1567; }
}
@keyframes rotate { from { stroke-dashoffset: 1567; } 50% { stroke-dashoffset: 0; transform: rotate(360deg); } to { transform: rotate(720deg); }
}
MicroHero Logo Animation - Script Codes JS Codes
'use strict';
$(".js-do-it-again").on('click', function (event) { $('html').removeClass('play'); setTimeout(function () { $('html').addClass('play'); }, 1);
});
![MicroHero Logo Animation - Script Codes](http://shots.codepen.io/christiannaths/pen/XjLEZm-512.jpg)
Developer | Christian Naths |
Username | christiannaths |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 5,290 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 |
Responsive App Layout | 5,661 Kb |
Animated Open Mentorship Logo | 2,710 Kb |
Collection-bootstrap | 2,843 Kb |
CSS-Only Inputs | 4,678 Kb |
MicroHero Logo Animation | 5,290 Kb |
Next Game Widget | 7,025 Kb |
Activity Timeline | 5,624 Kb |
Responsive Admin Panel 2 | 7,677 Kb |
A Pen by Christian Naths | 2,563 Kb |
Responsive Admin Panel | 4,254 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 |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Sticky div | Kaslab | 2,225 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
About Mazano | Kiti | 2,585 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Matrix | Stathisnikolaidis | 1,922 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!