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 |
Upcoming Event Stream | 5,355 Kb |
Activity Timeline | 5,624 Kb |
A Pen by Christian Naths | 2,563 Kb |
Checkbox Switch | 4,665 Kb |
MicroHero Logo Animation | 5,290 Kb |
Responsive Admin Panel | 4,254 Kb |
CSS-Only Inputs | 4,678 Kb |
Pure CSS Radial Graph | 2,363 Kb |
Responsive App Layout | 5,661 Kb |
Collection-bootstrap | 2,843 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 Bryan Rojas | Bryanrojas | 1,873 Kb |
Wikipedia viewer | Chpecson | 2,865 Kb |
Simple content swap | Snografx | 1,859 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
SVG Animation | Thepheer | 4,793 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 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!