MicroHero Logo Animation

Developer
Christian Naths
Size
5,290 Kb
Views
10,120
  1. MicroHero Logo Animation Previews
  2. MicroHero Logo Animation HTML Codes
  3. MicroHero Logo Animation CSS Codes
  4. MicroHero Logo Animation JS Codes

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

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
MicroHero Logo Animation - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 3
Size 5,290 Kb
Views 10,120
Do you need developer help for MicroHero Logo Animation?

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!

Christian Naths (christiannaths) Script Codes
Name
CSS-Only Inputs
Off-Canvas Responsive Layout
Responsive Admin Panel
Pure CSS Radial Graph
Upcoming Event Stream
Animated Chart
Checkbox Switch
Collection-bootstrap
Next Game Widget
Activity Timeline
Create amazing captions 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!