SMITE Ward Icon
How do I make an smite ward icon?
What is a smite ward icon? How do you make a smite ward icon? This script and codes were developed by Coran Spicer on 15 October 2022, Saturday.
SMITE Ward Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SMITE Ward Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="icon-ward-container">
<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 117.5 97.1" style="enable-background:new 0 0 117.5 97.1;" xml:space="preserve" name="icon-ward"> <path id="triangle" d="M117.5,97.1L72.4,22.6l-0.7-1.2h0L58.7,0L45.8,21.4h0l-0.7,1.2L0,97.1H117.5z M83.8,52.1c1.7,3.5,2.7,7.5,2.7,11.7 c0,14.9-12.1,27.1-27.1,27.1c-14.9,0-27.1-12.1-27.1-27.1c0-14.9,12.1-27.1,27.1-27.1c9.3,0,17.5,4.7,22.3,11.8L83.8,52.1z M32.2,80.8c-0.7-1.1-1.3-2.2-1.8-3.4c0.7,1.4,1.4,2.7,2.2,4C32.4,81.2,32.3,81.1,32.2,80.8z M26.3,92.1H8.9l7.6-12.6L26.3,92.1z M92.4,92.1l9.4-11.3l6.9,11.3H92.4z M58.7,9.7l7.1,11.7H51.7L58.7,9.7z"/> <path id="top-lid-open" d="M25.5,60.7c0,0,2-2,5.6-4.6c1.9-1.3,4.2-2.8,6.9-4.2c2.2-1.1,4.6-2.2,7.2-3.1c2.4-0.8,5-1.5,7.7-2c2.1-0.3,4.3-0.5,6.5-0.5 c2,0,4.1,0.2,6.2,0.5c2.6,0.4,5.3,1.1,8,2.2c1.8,0.7,3.6,1.6,5.5,2.6c1.7,1,3.5,2.1,5.2,3.4c2.2,1.6,4.4,3.5,6.7,5.7v3H80.4 c0,0-2.1-2.2-5.9-4.4c-1.4-0.8-3-1.6-4.9-2.3c-2.5-0.9-5.4-1.6-8.6-1.8c-0.7,0-1.5-0.1-2.3,0c-0.7,0-1.4,0-2.1,0.1 c-2.6,0.2-5.3,0.7-8.1,1.7c-1.5,0.5-3,1.1-4.6,1.9c-2.6,1.2-5.2,2.8-8,4.8H25.5V60.7z" /> <path id="bottom-lid-open" d="M25.5,66.7c0,0,2,2,5.6,4.6c1.9,1.3,4.2,2.8,6.9,4.2c2.2,1.1,4.6,2.2,7.2,3.1c2.4,0.8,5,1.5,7.7,2c2.1,0.3,4.3,0.5,6.5,0.5 c2,0,4.1-0.2,6.2-0.5c2.6-0.4,5.3-1.1,8-2.2c1.8-0.7,3.6-1.6,5.5-2.6c1.7-1,3.5-2.1,5.2-3.4c2.2-1.6,4.4-3.5,6.7-5.7v-3H80.4 c0,0-2.1,2.2-5.9,4.4c-1.4,0.8-3,1.6-4.9,2.3c-2.5,0.9-5.4,1.6-8.6,1.8c-0.7,0-1.5,0.1-2.3,0c-0.7,0-1.4,0-2.1-0.1 c-2.6-0.2-5.3-0.7-8.1-1.7c-1.5-0.5-3-1.1-4.6-1.9c-2.6-1.2-5.2-2.8-8-4.8H25.5V66.7z" /> <circle id="pupil" cx="58.5" cy="63.7" r="6.6" /> <path id="top-lid-closed" d="M25.5,59.3h5.9h5h8.4h7.7h6.8h6.7h6.6h5.1h5.3H91v9.2h-7.2h-8.1h-7.4h-7.5c0,0-1.2,0-2,0c-0.7,0-2.5,0-2.5,0h-9.6h-8.1 H25.5v-4.8V59.3z"/> <path id="bottom-lid-closed" d="M25.5,68.4h5.9h5h8.4h7.7h6.8h6.7h6.6h5.1h5.3H91v-9.2h-7.2h-8.1h-7.4h-7.5c0,0-1.2,0-2,0c-0.7,0-2.5,0-2.5,0h-9.6h-8.1 H25.5V64V68.4z" />
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/23594/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/23594/MorphSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SMITE Ward Icon - Script Codes CSS Codes
.icon-ward-container { display: inline-block; position: relative; height: 100vh; overflow: hidden;
}
.icon-ward-container svg { display: block; position: relative; width: 100%; height: 80%;
}
.icon-ward-container svg #top-lid-open,
.icon-ward-container svg #bottom-lid-open { display: none;
}
.icon-ward-container svg #pupil { opacity: 0;
}
SMITE Ward Icon - Script Codes JS Codes
MorphSVGPlugin.convertToPath('[name="icon-ward"] #triangle, [name="icon-ward"] #pupil, [name="icon-ward"] #top-lid-closed, [name="icon-ward"] #top-lid-open, [name="icon-ward"] #bottom-lid-closed, [name="icon-ward"] #bottom-lid-open');
// duration of opening and closing
var duration = 0.5;
// define the eye opening and closing timeline
var eyeTL = new TimelineMax({'paused':true});
eyeTL.addLabel('initial');
eyeTL.to('[name="icon-ward"] #top-lid-closed', duration, {'morphSVG':'[name="icon-ward"] #top-lid-open', 'ease' : Power2.easeOut });
eyeTL.to('[name="icon-ward"] #bottom-lid-closed', duration, {'morphSVG':'[name="icon-ward"] #bottom-lid-open', 'ease' : Power2.easeOut}, '-='+duration);
eyeTL.to('[name="icon-ward"] #pupil', duration/4, {'opacity':1 }, '-='+duration);
eyeTL.addLabel('open');
$('[name="icon-ward"]').on( 'mouseenter', function(e){ eyeTL.tweenFromTo('intial','open'); $('[name="icon-ward"]').one( 'mouseleave', function(e){ eyeTL.tweenFromTo('open','initial'); });
});
Developer | Coran Spicer |
Username | cgspicer |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 3,236 Kb |
Views | 12,144 |
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 |
SMITE spinner | 2,508 Kb |
Tile with special tiles experiment | 1,952 Kb |
Shattering boxes | 3,390 Kb |
Hi-rez logo | 5,938 Kb |
Promise example | 2,343 Kb |
Drag and Drop Quiz | 3,837 Kb |
Header logo that changes | 2,031 Kb |
Aaronmarino.com v2 styles | 2,863 Kb |
Album 88 Tuner | 9,852 Kb |
Fully Furnished | 3,613 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 |
Masonry | Uriuriuriu | 5,005 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Blog | Rottingroom | 1,430 Kb |
Project MMetro beta | Atomicsong | 5,157 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!