Personal Logo Animation

Developer
Lloydwheeler
Size
3,795 Kb
Views
4,046
  1. Personal Logo Animation Previews
  2. Personal Logo Animation HTML Codes
  3. Personal Logo Animation CSS Codes
  4. Personal Logo Animation JS Codes

How do I make an personal logo animation?

Exploring some animation of my personal branding. What is a personal logo animation? How do you make a personal logo animation? This script and codes were developed by Lloydwheeler on 26 January 2023, Thursday.

Personal Logo Animation Previews
IQ Test

Personal Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Logo Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" enable-background="new 0 0 595.3 841.9" xml:space="preserve">
<defs> <clipPath id="mask"> <circle cx="297.8" cy="421.1" r="53.3" fill="#000"/> </clipPath> </defs>
<g id="lines" clip-path="url(#mak)">
<path fill="none" stroke="#000000" stroke-width=".25" d="M310.3,396.8L247.8,42.3" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M285.3,396.8l62.5-354.5" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M296.5,393.8L65.1,118.1" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M274.8,406.3L151.7,68" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M283,398.2L-55.3,275" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M270.5,419.8L-5.3,188.4" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M273.5,408.6L-81,471.2" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M273.5,433.6L-81,371.1" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M270.5,422.5L-5.3,653.9" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M283,444.1L-55.3,567.3" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M274.8,435.9L151.7,774.2" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M296.5,448.4L65.1,724.2" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M285.3,445.5L347.8,800" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M310.3,445.5L247.8,800" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M299.1,448.4l231.4,275.8" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M320.8,435.9l123.1,338.3" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M312.6,444.1l338.3,123.1" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M325.1,422.5l275.8,231.4" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M322.1,433.6l354.5-62.5" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M322.1,408.6l354.5,62.5" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M325.1,419.8l275.8-231.4" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M312.6,398.2L650.9,275" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M320.8,406.3L443.9,68.1" opacity="0"/>
<path fill="none" stroke="#000000" stroke-width=".25" d="M299.1,393.8l231.4-275.8" opacity="0"/>
</g>
<g id="circles">
<path id="inner" fill="none" stroke="#000000" stroke-width="4" d="M325.6,421.1c0-15.3-12.4-27.8-27.8-27.8 c-15.3,0-27.8,12.4-27.8,27.8c0,15.3,12.4,27.8,27.8,27.8c2.7,0,5.3-0.4,7.8-1.1C317.1,444.4,325.6,433.8,325.6,421.1z" opacity="0"/>
<path id="outer" fill="none" stroke="#000000" stroke-width="4" d="M351.1,421.1c0-29.4-23.9-53.3-53.3-53.3 c-29.4,0-53.3,23.9-53.3,53.3c0,29.4,23.9,53.3,53.3,53.3c5.1,0,9.9-0.7,14.6-2C334.8,466.1,351.1,445.5,351.1,421.1z" opacity="0"/> </g>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal Logo Animation - Script Codes CSS Codes

svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
}
#lines { -webkit-animation: rotate 2s ease; animation: rotate 2s ease; -webkit-transform-origin: 50%; transform-origin: 50%;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

Personal Logo Animation - Script Codes JS Codes

(function() { var animate, i, innerCircle, len, line, lines, outerCircle, ref; lines = Snap.selectAll('#lines path'); innerCircle = Snap.select('#inner'); outerCircle = Snap.select('#outer'); innerCircle.attr({ 'stroke-width': 3, 'stroke-dashoffset': 0, 'stroke-dasharray': "0," + innerCircle.getTotalLength() + ",0", 'opacity': 1 }); outerCircle.attr({ 'stroke-width': 3, 'stroke-dashoffset': 0, 'stroke-dasharray': "0," + outerCircle.getTotalLength() + ",0", 'opacity': 1 }); ref = lines.items; for (i = 0, len = ref.length; i < len; i++) { line = ref[i]; line.attr({ 'stroke-width': .25, 'stroke': '#222', 'stroke-dashoffset': 0, 'stroke-dasharray': "0," + line.getTotalLength() + ",0", 'opacity': 1 }); } animate = function(index) { lines.items[index].animate({ 'stroke-dashoffset': line.getTotalLength() * 2 - 29 }, 1000, mina.easeinout); index++; return setTimeout(function() { if (index < lines.items.length) { return animate(index); } }, 20); }; animate(0); setTimeout(function() { innerCircle.animate({ 'stroke-dashoffset': innerCircle.getTotalLength() }, 750, mina.easeinout); return outerCircle.animate({ 'stroke-dashoffset': -outerCircle.getTotalLength() }, 750, mina.easeinout); }, 1000); setTimeout(function() { return lines.animate({ 'stroke': '#000', 'stroke-width': 3 }, 250, mina.linear); }, 1750);
}).call(this);
Personal Logo Animation - Script Codes
Personal Logo Animation - Script Codes
Home Page Home
Developer Lloydwheeler
Username lloydwheeler
Uploaded January 26, 2023
Rating 3.5
Size 3,795 Kb
Views 4,046
Do you need developer help for Personal 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!

Lloydwheeler (lloydwheeler) Script Codes
Name
Triangle Generator
Particle Emitter
Page Editor Animation
Spring Force
3D Button
Damping
A Pen by lloydwheeler
Mix Blend Mode
Device Switcher
Loading Icon 2
Create amazing love letters 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!