Decepticon Logo

Developer
Jeremy Paris
Size
3,561 Kb
Views
32,384
  1. Decepticon Logo Previews
  2. Decepticon Logo HTML Codes
  3. Decepticon Logo CSS Codes
  4. Decepticon Logo JS Codes

How do I make an decepticon logo?

Took the SVG logo from my Transformers Palette Swap pen (http://codepen.io/digsite_/pen/mIJKa) and made a SVG animation out of the pieces. . What is a decepticon logo? How do you make a decepticon logo? This script and codes were developed by Jeremy Paris on 08 September 2022, Thursday.

Decepticon Logo Previews
IQ Test

Decepticon Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Decepticon Logo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ctnr"> <!-- SVG Logo found here: http://seeklogo.com/decepticon-g1-logo-229304.html --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="decepticon_logo" x="0px" y="0px" viewBox="0 0 309 309" enable-background="new 0 0 309 309" xml:space="preserve"> <g class="crest"> <polygon class="bg" points="155.2,192 193.5,143.5 215,14 172,63.5 138.5,63.5 91.5,14 116.5,143.5"/> <polygon class="chevron" points="154.5,143.5 172,99.5 138.5,99.5"/> </g> <polygon class="bg head" points="0,0 43.5,59.5 96.5,77.5 103.5,112.5 51.8,100.5 51.8,105 103.5,123 108,149.5 54,135 56.5,140.5 118.5,160.5 153.5,202 188.5,160.5 252,143.5 252,138.5 201,152 203.5,125 256,109 256,104 203.5,116 211.5,80 264,62 309,3 292.5,138.5 154.5,301 15,136"/> <polygon class="bg left cheek" points="39,277 25,168 143,309"/> <polygon class="bg right cheek" points="166,309 269,278.5 284,168"/> <polygon class="eyes left" points="129,243.5 138.5,211.5 86.5,188.5"/> <polygon class="eyes right" points="182.5,243.5 225,188.5 172,210.5"/> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Decepticon Logo - Script Codes CSS Codes

@-moz-keyframes left-cheek { from { -moz-transform: translate(9999px, 9999px); transform: translate(9999px, 9999px); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes left-cheek { from { -webkit-transform: translate(9999px, 9999px); transform: translate(9999px, 9999px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes left-cheek { from { -moz-transform: translate(9999px, 9999px); -ms-transform: translate(9999px, 9999px); -webkit-transform: translate(9999px, 9999px); transform: translate(9999px, 9999px); } to { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-moz-keyframes right-cheek { from { -moz-transform: translate(-9999px, 9999px); transform: translate(-9999px, 9999px); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes right-cheek { from { -webkit-transform: translate(-9999px, 9999px); transform: translate(-9999px, 9999px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes right-cheek { from { -moz-transform: translate(-9999px, 9999px); -ms-transform: translate(-9999px, 9999px); -webkit-transform: translate(-9999px, 9999px); transform: translate(-9999px, 9999px); } to { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-moz-keyframes drop-head { from { -moz-transform: translate(0, -9999px); transform: translate(0, -9999px); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes drop-head { from { -webkit-transform: translate(0, -9999px); transform: translate(0, -9999px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes drop-head { from { -moz-transform: translate(0, -9999px); -ms-transform: translate(0, -9999px); -webkit-transform: translate(0, -9999px); transform: translate(0, -9999px); } to { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-moz-keyframes drop-crest { from { -moz-transform: translate(-1px, -9999px); transform: translate(-1px, -9999px); } to { -moz-transform: translate(-1px, 0); transform: translate(-1px, 0); }
}
@-webkit-keyframes drop-crest { from { -webkit-transform: translate(-1px, -9999px); transform: translate(-1px, -9999px); } to { -webkit-transform: translate(-1px, 0); transform: translate(-1px, 0); }
}
@keyframes drop-crest { from { -moz-transform: translate(-1px, -9999px); -ms-transform: translate(-1px, -9999px); -webkit-transform: translate(-1px, -9999px); transform: translate(-1px, -9999px); } to { -moz-transform: translate(-1px, 0); -ms-transform: translate(-1px, 0); -webkit-transform: translate(-1px, 0); transform: translate(-1px, 0); }
}
@-moz-keyframes flicker-eyes { 0% { opacity: 0; } 25% { opacity: 1; } 30%,35%,40% { fill: #d6aee6; } 33%,38% { fill: black; } 100% { opacity: 0; fill: black; }
}
@-webkit-keyframes flicker-eyes { 0% { opacity: 0; } 25% { opacity: 1; } 30%,35%,40% { fill: #d6aee6; } 33%,38% { fill: black; } 100% { opacity: 0; fill: black; }
}
@keyframes flicker-eyes { 0% { opacity: 0; } 25% { opacity: 1; } 30%,35%,40% { fill: #d6aee6; } 33%,38% { fill: black; } 100% { opacity: 0; fill: black; }
}
@-moz-keyframes fade-in-eyes { 0% { opacity: 0; fill: black; } 100% { opacity: 1; }
}
@-webkit-keyframes fade-in-eyes { 0% { opacity: 0; fill: black; } 100% { opacity: 1; }
}
@keyframes fade-in-eyes { 0% { opacity: 0; fill: black; } 100% { opacity: 1; }
}
html, body, .ctnr { width: 100%; height: 100%;
}
body { background: black;
}
#decepticon_logo { display: block; width: 50%; height: 50%; margin: 3em auto; overflow: visible;
}
#decepticon_logo .chevron { fill: black;
}
#decepticon_logo .bg { fill: #8712B6;
}
#decepticon_logo .eyes { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-animation: flicker-eyes 1.5s ease-in-out forwards, fade-in-eyes 0.5s 3.25s ease-in-out forwards; -webkit-animation: flicker-eyes 1.5s ease-in-out forwards, fade-in-eyes 0.5s 3.25s ease-in-out forwards; animation: flicker-eyes 1.5s ease-in-out forwards, fade-in-eyes 0.5s 3.25s ease-in-out forwards;
}
#decepticon_logo .crest { -moz-animation: drop-crest 3.5s ease-in-out forwards; -webkit-animation: drop-crest 3.5s ease-in-out forwards; animation: drop-crest 3.5s ease-in-out forwards;
}
#decepticon_logo .head { -moz-animation: drop-head 3s ease-in-out forwards; -webkit-animation: drop-head 3s ease-in-out forwards; animation: drop-head 3s ease-in-out forwards;
}
#decepticon_logo .cheek.left { -moz-animation: left-cheek 2s ease-in-out forwards; -webkit-animation: left-cheek 2s ease-in-out forwards; animation: left-cheek 2s ease-in-out forwards;
}
#decepticon_logo .cheek.right { -moz-animation: right-cheek 2s ease-in-out forwards; -webkit-animation: right-cheek 2s ease-in-out forwards; animation: right-cheek 2s ease-in-out forwards;
}

Decepticon Logo - Script Codes JS Codes

/*
Transformers is owned and copyrighted by Hasbro, Inc.
Imagery used for fun and learning.
*/
Decepticon Logo - Script Codes
Decepticon Logo - Script Codes
Home Page Home
Developer Jeremy Paris
Username digsite_
Uploaded September 08, 2022
Rating 4
Size 3,561 Kb
Views 32,384
Do you need developer help for Decepticon Logo?

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!

Jeremy Paris (digsite_) Script Codes
Name
Beating Pixel Heart
Fun with Dropcap.JS
Sample Profile Page
Transformers Pallete Swap
Pinstripes
Infinite Punching Loader
Animated Redacted Text
Fieldset Style Sketching
Faux Particles
Push It
Create amazing blog posts 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!