Logo Animation

Developer
John Heiner
Size
4,438 Kb
Views
8,096
  1. Logo Animation Previews
  2. Logo Animation HTML Codes
  3. Logo Animation CSS Codes
  4. Logo Animation JS Codes

How do I make an logo animation?

What is a logo animation? How do you make a logo animation? This script and codes were developed by John Heiner on 14 November 2022, Monday.

Logo Animation Previews
IQ Test

Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 211.3 25.7" style="enable-background:new 0 0 211.3 25.7;" xml:space="preserve">	<defs>	<clipPath id="visible-V">	<path d="M8.6,19.9l-6-12.5h1.7l4.8,10l4.8-10h1.7l-6,12.5H8.6z"/>	</clipPath>	<clipPath id="visible-I">	<path d="M22,7.4h1.6v12.6H22V7.4z"/>	</clipPath>	<clipPath id="visible-S">	<path d="M31.7,16.7c1.8,1.4,3.7,2.1,5.6,2.1c2.4,0,3.9-1.1,3.9-2.6c0-1.1-1-2.1-2.9-2.2	c-2.1-0.2-3.8-0.2-5.1-0.8c-1.2-0.6-1.8-1.5-1.8-2.6c0-1.9,1.9-3.4,4.8-3.4c2.1,0,4.2,0.7,6,2l-0.9,1.3c-1.5-1.2-3.3-1.9-5-1.9	c-2,0-3.2,0.9-3.2,1.9c0,0.5,0.2,0.8,0.6,1.1c1.1,0.8,2.8,0.6,5.1,0.9c2.6,0.3,4.1,1.8,4.1,3.7c0,2.2-2,4-5.5,4	c-2.5,0-4.6-0.7-6.5-2.2L31.7,16.7z"/>	</clipPath>	<clipPath id="visible-I-2">	<path d="M50.4,7.4H52v12.6h-1.6V7.4z"/>	</clipPath>	<clipPath id="visible-B">	<path d="M60.4,7.4h7.4c2.5,0,3.7,1.1,3.7,3.1c0,1-0.4,1.8-1.1,2.3c1.3,0.8,2,1.9,2,3.3	c0,2.3-1.6,3.8-4.2,3.8h-7.8V7.4z M67.9,12.4c1.3,0,2-0.6,2-1.7c0-1.2-0.7-1.8-2-1.8h-6v3.5H67.9z M68.4,18.5	c1.5,0,2.3-0.9,2.3-2.3c0-1.4-0.8-2.3-2.3-2.3h-6.5v4.7H68.4z"/>	</clipPath>	<clipPath id="visible-L">	<path d="M80.1,7.4h1.5v11h8.1v1.4h-9.7V7.4z"/>	</clipPath>	<clipPath id="visible-E">	<path d="M96.3,7.4h9.8v1.4h-8.3v3.7h5V14h-5v4.5h8.8v1.4H96.3V7.4z"/>	</clipPath>	<clipPath id="proof-P">	<path d="M126,7.4h7.1c2.5,0,3.9,1.3,3.9,3.4c0,2.1-1.4,3.6-3.7,3.6h-5.8v5.5H126V7.4z M133.1,13c1.6,0,2.4-0.7,2.4-2	c0-1.3-0.8-2.1-2.3-2.1h-5.6V13H133.1z"/>	</clipPath>	<clipPath id="proof-R">	<path d="M144.2,7.4h7.1c2.5,0,3.9,1.3,3.9,3.5c0,1.8-1.1,3.2-3,3.5l3.1,5.5h-1.7l-3.1-5.5h-4.8v5.5h-1.6V7.4z M151.3,13c1.6,0,2.4-0.7,2.4-2c0-1.3-0.8-2.1-2.3-2.1h-5.6V13H151.3z"/>	</clipPath>	<clipPath id="proof-O">	<path d="M161.2,13.7c0-3.8,2.7-6.5,6.5-6.5s6.5,2.8,6.5,6.5c0,3.8-2.8,6.5-6.5,6.5S161.2,17.5,161.2,13.7z M172.5,13.7c0-3-2.1-5.1-4.9-5.1c-2.8,0-4.9,2.1-4.9,5.1c0,3,2.1,5.1,4.9,5.1C170.4,18.8,172.5,16.6,172.5,13.7z"/>	</clipPath>	<clipPath id="proof-O-2">	<path d="M179.9,13.7c0-3.8,2.7-6.5,6.5-6.5c3.7,0,6.5,2.8,6.5,6.5c0,3.8-2.8,6.5-6.5,6.5	C182.6,20.2,179.9,17.5,179.9,13.7z M191.2,13.7c0-3-2.1-5.1-4.9-5.1c-2.8,0-4.9,2.1-4.9,5.1c0,3,2.1,5.1,4.9,5.1	C189.1,18.8,191.2,16.6,191.2,13.7z"/>	<clipPath id="proof-F">	<path d="M199.6,7.4h9.8v1.4h-8.3v3.7h5V14h-5v5.9h-1.6V7.4z"/>	</clipPath>	<clipPath id="overstroke">	<polygon points="161.2,3 161.2,1.1 192.7,1.1 192.7,3 161.2,3	"/>	</clipPath>	</defs>	<g id="visible">	<line id="v--right" clip-path="url(#visible-V)" style="fill:none;stroke:#EE3124;stroke-width:2;" x2="15" y2="6.8" x1="8.6" y1="19.9"/>	<line id="v--left" clip-path="url(#visible-V)" style="fill:none;stroke:#EE3124;stroke-width:2;" x2="3.2" y2="7" x1="9.6" y1="20"/>	<line id="i" clip-path="url(#visible-I)" style="fill:none;stroke:#EE3124;stroke-width:2;" x1="22.8" y1="19.9" x2="22.8" y2="7.4"/>	<path id="s" clip-path="url(#visible-S)" style="fill:none;stroke:#EE3124;stroke-width:2;" d="M31,17.2c3.2,2.4,11,4,11-1c-0.5-5-10.4-0.8-9.9-6	c0.7-4.1,7.7-1.8,9.6-0.3"/>	<line id="i-2" clip-path="url(#visible-I-2)" style="fill:none;stroke:#EE3124;stroke-width:2;" x1="51.2" y1="19.9" x2="51.2" y2="7.4"/>	<line id="b--spine" clip-path="url(#visible-B)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="61.1" y1="19.9" x2="61.1" y2="7.4"/>	<path id="b--bottom" clip-path="url(#visible-B)" style="fill:none;stroke:#EE3124;stroke-width:2;" d="M60.4,19.1c0,0,6.2,0,8.4,0c2.2,0,5.2-4.1-0.3-6.1"/>	<path id="b--top" clip-path="url(#visible-B)" style="fill:none;stroke:#EE3124;stroke-width:2;" d="M60.4,13.1c0,0,6.2,0,8.4,0c1.8,0,3.5-4.3-0.2-5	c-1.3-0.2-6.7-0.1-8,0"/>	<line id="l--vert" clip-path="url(#visible-L)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="80.9" y1="19.9" x2="80.9" y2="7.4"/>	<line id="l--horiz" clip-path="url(#visible-L)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="80.1" y1="19.2" x2="89.8" y2="19.2"/>	<line id="e--vert" clip-path="url(#visible-E)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="97.1" y1="19.9" x2="97.1" y2="7.4"/>	<line id="e--horiz-top" clip-path="url(#visible-E)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="96.3" y1="8.1" x2="106.1" y2="8.1"/>	<line id="e--horiz-bottom" clip-path="url(#visible-E)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="96.3" y1="19.2" x2="106.6" y2="19.2"/>	<line id="e--horiz-middle" clip-path="url(#visible-E)" style="fill:none;stroke:#EE3124;stroke-width:1.6;" x1="96.3" y1="13.2" x2="102.9" y2="13.2"/>	</g>	<path id="colon--top" style="fill:#EE3124;" d="M114.2,10.2c0-0.9,0.7-1.6,1.5-1.6c0.9,0,1.5,0.7,1.5,1.6c0,0.9-0.6,1.6-1.5,1.6	C114.9,11.8,114.2,11.1,114.2,10.2z"/>	<path id="colon--bottom" style="fill:#EE3124;" d="M114.2,16.7c0-0.9,0.7-1.6,1.5-1.6c0.9,0,1.5,0.7,1.5,1.6c0,0.9-0.6,1.6-1.5,1.6	C114.9,18.3,114.2,17.6,114.2,16.7z"/>	<g id="proof">	<line id="p--spine" clip-path="url(#proof-P)" style="fill:none;stroke:#000000;stroke-width:1.6;" x1="126.8" y1="19.9" x2="126.8" y2="7.4"/>	<path id="p--curve" clip-path="url(#proof-P)" style="fill:none;stroke:#000000;stroke-width:2;" d="M126,13.7c0,0,5.1,0,7.9,0c2.9,0,3.7-5.5-0.5-5.5	c-1.5,0-7.4,0-7.4,0"/>	<line id="r--spine" clip-path="url(#proof-R)" style="fill:none;stroke:#000000;stroke-width:1.6;" x1="145" y1="19.9" x2="145" y2="7.4"/>	<path id="r--curve" clip-path="url(#proof-R)" style="fill:none;stroke:#000000;stroke-width:1.7;" d="M144.2,13.7c0,0,5.1,0,7.9,0c2.9,0,3.7-5.5-0.5-5.5	c-1.5,0-7.4,0-7.4,0"/>	<line id="r--leg" clip-path="url(#proof-R)" style="fill:none;stroke:#000000;stroke-width:1.6;" x1="151" y1="13.5" x2="154.9" y2="20.4"/>	<ellipse id="o-1" clip-path="url(#proof-O)" style="fill:none;stroke:#000000;stroke-width:2;" cx="167.6" cy="13.7" rx="5.7" ry="5.8"/>	<ellipse id="o-2" clip-path="url(#proof-O-2)" style="fill:none;stroke:#000000;stroke-width:2;" cx="186.3" cy="13.7" rx="5.7" ry="5.8"/>	<line id="f--vert" clip-path="url(#proof-F)" style="fill:none;stroke:#000000;stroke-width:1.6;" x1="200.4" y1="19.9" x2="200.4" y2="7.4"/>	<line id="f--top" clip-path="url(#proof-F)" style="fill:none;stroke:#000000;stroke-width:1.6;" x1="199.6" y1="8.1" x2="209.4" y2="8.1"/>	<line id="f--middle" clip-path="url(#proof-F)" style="fill:none;stroke:#000000;stroke-width:1.6;" x1="199.6" y1="13.2" x2="206.2" y2="13.2"/>	</g>	<line id="overline" clip-path="url(#overstroke)" style="fill:none;stroke:#000000;stroke-width:3;" x1="161.2" y1="2.1" x2="192.8" y2="2.1"/>
</svg> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=11'></script> <script src="js/index.js"></script>
</body>
</html>

Logo Animation - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.2rem; font-family: "Open Sans", sans-serif; color: #888; padding: 1rem; background-color: #fff;
}
*, *:before, *:after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
svg { width: 100%; max-width: 600px;
}

Logo Animation - Script Codes JS Codes

var shapes = $("rect, circle, ellipse, polyline, line, polygon, path"),	fills = $("#polygon, #mom, #kid, #doctor")	tl = new TimelineMax({repeat:-1,repeatDelay: 1.5});
// tl.timeScale( 2 );
tl.fromTo($("#v--left"), 0.75, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V")
.fromTo($("#v--right"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.1")
.fromTo($("#i"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V")
.fromTo($("#s"), 1.2, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.15")
.fromTo($("#i-2"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.2")
.fromTo($("#b--spine"), 0.75, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.25")
.fromTo($("#b--bottom"), 1, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.25")
.fromTo($("#b--top"), 1, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.35")
.fromTo($("#l--vert"), 0.75, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.3")
.fromTo($("#l--horiz"), 0.65, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.3")
.fromTo($("#e--vert"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.35")
.fromTo($("#e--horiz-bottom"), 0.65, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.35")
.fromTo($("#e--horiz-middle"), 0.55, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.65")
.fromTo($("#e--horiz-top"), 0.65, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.77")
.fromTo($("#colon--bottom"), 0.5, {scale:0, transformOrigin: '50% 50%'}, {scale:1, ease: Power2.easeInOut}, "V+=0.4")
.fromTo($("#colon--top"), 0.5, {scale:0, transformOrigin: '50% 50%'}, {scale:1, ease: Power2.easeInOut}, "V+=0.45")
.fromTo($("#p--spine"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.45")
.fromTo($("#p--curve"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.72")
.fromTo($("#r--spine"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.5")
.fromTo($("#r--curve"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.75")
.fromTo($("#r--leg"), 0.5, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.85")
.fromTo($("#o-1"), 1, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.55")
.fromTo($("#o-2"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.65")
.fromTo($("#f--vert"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.6")
.fromTo($("#f--middle"), 0.65, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.7")
.fromTo($("#f--top"), 0.65, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.95")
.fromTo($("#overline"), 0.85, {drawSVG:"0%"}, {drawSVG:"100%", ease: Power2.easeInOut}, "V+=0.75")
Logo Animation - Script Codes
Logo Animation - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 3
Size 4,438 Kb
Views 8,096
Do you need developer help for 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!

John Heiner (johnheiner) Script Codes
Name
Passport Flip Open with GSAP
Some Button Styles
SVG line hover
Tooltip
Canvas Mask Page Intro Animation
Loading Animation
Image Hover
Social Icon System
Floating Labels
Breaking Lists at specific points without floats.
Create amazing sales emails 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!