Animated Logo
How do I make an animated logo?
What is a animated logo? How do you make a animated logo? This script and codes were developed by Kasper on 30 January 2023, Monday.
Animated Logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg version="1.1" id="logo" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 141.466 162.333" enable-background="new 0 0 141.466 162.333" xml:space="preserve">
<polygon id="BG" fill="#C9BC37" points="121.466,162.333 0,162.333 0,20 20,0 141.466,0 141.466,142.333 "/>
<g id=letters> <polygon id="L" fill="#494519" points="38.131,134.638 31.858,134.638 31.858,124.518 33.116,124.518 33.116,133.569 38.131,133.569 "/> <path id="B" fill="#494519" d="M52.148,126.831c0,0.241-0.041,0.487-0.121,0.737c-0.082,0.251-0.202,0.485-0.364,0.702 c-0.162,0.216-0.369,0.407-0.622,0.57c-0.253,0.165-0.55,0.29-0.894,0.376v0.058c0.303,0.048,0.593,0.13,0.871,0.246 s0.523,0.275,0.735,0.477c0.212,0.202,0.385,0.448,0.516,0.738c0.131,0.289,0.197,0.631,0.197,1.026 c0,0.521-0.113,0.971-0.341,1.352c-0.227,0.381-0.526,0.692-0.895,0.932c-0.368,0.241-0.79,0.42-1.264,0.535 c-0.476,0.116-0.961,0.174-1.455,0.174h-0.607c-0.233,0-0.475-0.008-0.727-0.022c-0.253-0.014-0.505-0.034-0.758-0.058 c-0.253-0.024-0.475-0.06-0.667-0.108v-9.961c0.373-0.058,0.808-0.107,1.303-0.145c0.495-0.039,1.037-0.058,1.621-0.058 c0.394,0,0.797,0.032,1.205,0.094c0.409,0.063,0.78,0.183,1.114,0.362c0.332,0.178,0.608,0.426,0.825,0.744 C52.04,125.92,52.148,126.33,52.148,126.831 M47.799,128.971c0.172,0,0.378-0.005,0.622-0.015c0.242-0.009,0.444-0.024,0.606-0.043 c0.242-0.077,0.47-0.171,0.681-0.282c0.213-0.111,0.402-0.241,0.569-0.391c0.167-0.149,0.298-0.322,0.394-0.52 c0.095-0.197,0.144-0.412,0.144-0.643c0-0.318-0.064-0.581-0.19-0.788c-0.127-0.207-0.296-0.374-0.507-0.499 c-0.213-0.125-0.455-0.214-0.727-0.268c-0.273-0.052-0.55-0.079-0.833-0.079c-0.333,0-0.639,0.007-0.917,0.022 c-0.278,0.014-0.487,0.036-0.629,0.065v3.441H47.799z M48.632,133.713c0.323,0,0.636-0.036,0.94-0.109 c0.302-0.072,0.57-0.188,0.803-0.347c0.232-0.159,0.416-0.354,0.553-0.585c0.136-0.232,0.203-0.506,0.203-0.824 c0-0.395-0.083-0.713-0.249-0.954c-0.167-0.241-0.385-0.429-0.652-0.564c-0.267-0.135-0.568-0.226-0.901-0.275 c-0.333-0.048-0.667-0.072-1-0.072h-1.319v3.628c0.07,0.02,0.172,0.035,0.304,0.044c0.131,0.01,0.273,0.019,0.423,0.029 c0.152,0.01,0.308,0.017,0.47,0.021C48.369,133.711,48.512,133.713,48.632,133.713"/> <rect id="_x2D_" x="60.269" y="129.94" fill="#494519" width="3.667" height="1.07"/> <path id="A" fill="#494519" d="M77.217,131.834h-3.891l-1.055,2.805h-1.258l4.015-10.28h0.576l4.031,10.28h-1.334L77.217,131.834z M73.733,130.793h3.107l-1.176-3.08l-0.377-1.532h-0.016l-0.376,1.561L73.733,130.793z"/> <path id="R" fill="#494519" d="M87.106,124.62c0.384-0.067,0.826-0.121,1.326-0.159c0.5-0.039,0.957-0.058,1.371-0.058 c0.465,0,0.907,0.048,1.326,0.144c0.419,0.097,0.788,0.256,1.107,0.477c0.318,0.223,0.573,0.512,0.765,0.868 c0.192,0.357,0.287,0.791,0.287,1.301c0,0.791-0.226,1.431-0.681,1.923c-0.455,0.492-1.03,0.819-1.727,0.983l0.727,0.535 l2.636,4.005h-1.469l-2.925-4.366l-1.484-0.217v4.583h-1.258V124.62z M89.833,125.444h-0.409c-0.142,0-0.278,0.005-0.41,0.014 c-0.131,0.01-0.255,0.02-0.371,0.029c-0.115,0.01-0.21,0.024-0.28,0.044v3.73h1.182c0.696,0,1.272-0.164,1.726-0.492 c0.456-0.328,0.683-0.838,0.683-1.532c0-0.521-0.188-0.95-0.562-1.287S90.501,125.444,89.833,125.444"/> <polygon id="T" fill="#494519" points="108.108,125.588 104.804,125.588 104.804,134.638 103.548,134.638 103.548,125.588 100.244,125.588 100.244,124.518 108.108,124.518 "/>
</g>
<polyline id="Outer" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="108.108,110.796 33.235,110.796 71.003,27.167 "/>
<polyline id="Inner" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="70.733,78.748 94.203,78.748 104.994,99.25 51.04,99.25 76.938,44.217 94.142,78.624 "/>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Logo - Script Codes CSS Codes
html { height:100%
}
body { text-align:center; margin:auto;
}
#logo { width:300px; height:300px;
}
svg { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%)
}
Animated Logo - Script Codes JS Codes
var bg = $("#BG"), outer = $('#Outer'), inner = $('#Inner'), letter = $('#letters path, #letters polygon, #letters rect')
var masterTL = new TimelineMax({repeat:-1,SVG2GIF:true,repeatDelay:1}), TL = new TimelineMax() TL
.fromTo(inner,0.3,{drawSVG:'0%',stroke:'#C9BC37'},{drawSVG:'11%',ease:Linear.easeNone})
.fromTo(inner,0.3,{drawSVG:'11%'},{drawSVG:'23%',ease:Linear.easeNone})
.fromTo(inner,2,{drawSVG:'23%'},{drawSVG:'100%',ease:Power1.easeOut},'draw')
.fromTo(outer,0.4,{drawSVG:'0%',stroke:'#C9BC37'},{drawSVG:'45%',ease:Linear.easeNone},'draw')
.fromTo(outer,1.6,{drawSVG:'45%'},{drawSVG:'100%',ease:Power1.easeOut},'draw+=0.4')
.to(inner,1,{stroke:'#FFF',ease:Power0.easeOut},'colorchange')
.to(outer,1,{stroke:'#FFF',ease:Power0.easeOut},'colorchange')
.fromTo(bg,1,{autoAlpha:1,fill:'#555557'},{autoAlpha:1,drawSVG:'100%',fill:'#c9bc37',ease:Power1.easeInOut},'colorchange')
.staggerFromTo(letter,0.6,{cycle:{y:[-15,15]},autoAlpha:0},{autoAlpha:1,y:0,ease: Elastic.easeOut.config(1, 0.75)},0.3)
masterTL.add(TL)
masterTL.play()
masterTL.timeScale(1.5)
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 3,779 Kb |
Views | 8,096 |
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 |
Social Icon Fun | 2,037 Kb |
Test | 2,323 Kb |
Slack Loader Animation | 2,991 Kb |
Share Page Animation | 2,363 Kb |
Love 2 rainbow | 3,360 Kb |
A Pen by kasper | 5,021 Kb |
Growing Heart Animation | 2,109 Kb |
Slack Logo test | 3,217 Kb |
Login Form | 2,321 Kb |
LinkedIn Loader Animation | 2,691 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 |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Resume | Rottingroom | 5,483 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
3d css cube | Semenchenko | 4,578 Kb |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Save for later... | Victorfreire | 1,359 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!