SVG Animated icons

Developer
Kittons
Size
3,819 Kb
Views
36,432
  1. SVG Animated icons Previews
  2. SVG Animated icons HTML Codes
  3. SVG Animated icons CSS Codes
  4. SVG Animated icons JS Codes

How do I make an svg animated icons?

A series of animated svg icons we did for a contest on Codecanyon. they have an optional hover effect and you can edit the colours of the palette with css by changing the 4 "bm_color_" selectors . What is a svg animated icons? How do you make a svg animated icons? This script and codes were developed by Kittons on 09 September 2022, Friday.

SVG Animated icons Previews
IQ Test

SVG Animated icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animated icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <div class="title">Medical SVG<br/>Animated Icons </div> <div class="bar"></div>
</div>
<div class="navigation"> <button class="navButton" id="prevButton">Prev</button> <div id="navText">1/4</div> <button class="navButton" id="nextButton">Next</button>
</div>
<div class="column"> <div class="bm_container" id="icon-container-cross"> <div class="bm_inner_container" id="icon-cross"></div> </div><!-- --><div class="bm_container" id="icon-container-bandaid"> <div class="bm_inner_container" id="icon-bandaid"></div> </div><!-- --><div class="bm_container" id="icon-container-bottle"> <div class="bm_inner_container" id="icon-bottle"></div> </div><!-- --><div class="bm_container" id="icon-container-eye"> <div class="bm_inner_container" id="icon-eye"></div> </div><!-- --><div class="bm_container" id="icon-container-mobile"> <div class="bm_inner_container" id="icon-mobile"></div> </div><!-- --><div class="bm_container" id="icon-container-pills"> <div class="bm_inner_container" id="icon-pills"></div> </div><!-- --><div class="bm_container" id="icon-container-stethoscope"> <div class="bm_inner_container" id="icon-stethoscope"></div> </div><!-- --><div class="bm_container" id="icon-container-syringe"> <div class="bm_inner_container" id="icon-syringe"></div> </div><!-- --><div class="bm_container" id="icon-container-ambulance"> <div class="bm_inner_container" id="icon-ambulance"></div> </div><!-- --><div class="bm_container" id="icon-container-apple"> <div class="bm_inner_container" id="icon-apple"></div> </div><!-- --><div class="bm_container" id="icon-container-atoms"> <div class="bm_inner_container" id="icon-atoms"></div> </div><!-- --><div class="bm_container" id="icon-container-heart"> <div class="bm_inner_container" id="icon-heart"></div> </div><!-- --><div class="bm_container" id="icon-container-bicycle"> <div class="bm_inner_container" id="icon-bicycle"></div> </div><!-- --><div class="bm_container" id="icon-container-dropper"> <div class="bm_inner_container" id="icon-dropper"></div> </div><!-- --><div class="bm_container" id="icon-container-female_doctor"> <div class="bm_inner_container" id="icon-female_doctor"></div> </div><!-- --><div class="bm_container" id="icon-container-female_nurse"> <div class="bm_inner_container" id="icon-female_nurse"></div> </div><!-- --><div class="bm_container" id="icon-container-male_doctor"> <div class="bm_inner_container" id="icon-male_doctor"></div> </div><!-- --><div class="bm_container" id="icon-container-male_nurse"> <div class="bm_inner_container" id="icon-male_nurse"></div> </div><!-- --><div class="bm_container" id="icon-container-thermometer"> <div class="bm_inner_container" id="icon-thermometer"></div> </div><!-- --><div class="bm_container" id="icon-container-tubes"> <div class="bm_inner_container" id="icon-tubes"></div> </div>
</div> <script src='https://labs.nearpod.com/bodymovin/demo/medical_icons/animations.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/medical_icons/bodymovin.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Animated icons - Script Codes CSS Codes

@font-face { font-family: Roboto; src: url(Roboto-Regular.ttf);
}
@font-face { font-family: Roboto-Bold; src: url(Roboto-Bold.ttf);
}
body,
html { margin: 0; font-family: Roboto, sans-serif; background-color: #ffffff;
}
* { box-sizing: border-box;
}
button { border: none;
}
.column { max-width: 1000px; width: 100%; margin: auto;
}
.bm_container { width: 23%; margin: 1%; height: 200px; display: inline-block; position: relative; vertical-align: top; margin-bottom: 100px; border: 1px solid #cccccc; background-color: #F9F6EB;
}
.bm_container .title { font-family: Roboto-Bold, sans-serif; color: #666666; font-size: 27px; text-align: center;
}
.bm_inner_container { width: 80%; height: 200px; margin: auto;
}
.header { background-color: #ffffff; color: #ffffff; text-align: center; font-size: 40px; margin-bottom: 30px;
}
.header .title { padding-top: 50px; background-color: #F26B53; height: 193px;
}
.header .bar { background-color: #ffffff; height: 10px; background: url('data:image/svg+xml;utf8,');
}
.navigation { text-align: center;
}
.navigation .navButton { width: 80px; height: 50px; background-color: #F26B53; color: #DDDDDD; cursor: pointer;
}
#navText { display: inline-block; padding: 0 10px;
}
.navigation .navButton:hover { color: white;
}
@media only screen and (max-width: 680px) { .header { margin-bottom: 20px; font-size: 20px; } .bm_container { margin-bottom: 50px; height: 120px; } .bm_inner_container { height: 100px; } .bm_container .title { font-size: 14px; } .header .title { padding-top: 10px; height: 70px; } .header .bar { height: 2px; } .navigation { margin-bottom: 20px; } .navigation .navButton { height: 40px; }
}
.bm_icon_hoverable { cursor: pointer; transition: transform 0.5s cubic-bezier(.18, .78, .37, .84); transform-origin: 50% 50%; transform: scale(1, 1);
}
.bm_shadow_hoverable { cursor: pointer; transition: transform 0.5s cubic-bezier(.18, .78, .37, .84); transform-origin: 50% 50%; transform: translate(0, 0);
}
.bm_icon_hoverable:hover { transform: scale(1.05, 1.05);
}
.bm_icon_hoverable:hover .bm_shadow_hoverable { transform: translate(10px, 10px);
}
.bm_color_1{ fill: #F26B53; stroke: #F26B53;
}
.bm_color_2{ fill: #F3B573; stroke: #F3B573;
}
.bm_color_3{ fill: #5BC2A8; stroke: #5BC2A8;
}
.bm_color_4{ fill: #603256; stroke: #603256;
}

SVG Animated icons - Script Codes JS Codes

var elementsArr = ['ambulance','apple','atoms','bandaid','bicycle','bottle','cross','eye','female_doctor','female_nurse','male_doctor','male_nurse','dropper','heart','mobile','pills','stethoscope','syringe','thermometer','tubes']; var currentPage = 0; var itemsPerPage = 4; var icons = []; var navText; function buildIcons(){ var element, anim; for(var i=0;i<elementsArr.length;i+=1){ element = document.getElementById('icon-container-'+elementsArr[i]); element.style.display = 'none'; var params = { container: document.getElementById('icon-'+elementsArr[i]), autoplay:false, loop:false, animationData:animations[elementsArr[i]], renderer:'svg' }; anim = bodymovin.loadAnimation(params); icons.push({ anim:anim, element: element }) } } function buildNavigation(){ navText = document.getElementById('navText'); var nextButton = document.getElementById('nextButton'); nextButton.addEventListener('click', function(){ movePage(1); }) var prevButton = document.getElementById('prevButton'); prevButton.addEventListener('click', function(){ movePage(-1); }) } function renderPage(){ var i, len = icons.length; for(i=0;i<len;i+=1){ if(i<currentPage*itemsPerPage || i>=(currentPage+1)*itemsPerPage){ icons[i].element.style.display = 'none'; icons[i].anim.goToAndStop(0); } else { icons[i].element.style.display = 'inline-block'; icons[i].anim.play(); } } navText.innerHTML = (currentPage+1)+'/'+Math.ceil(icons.length/itemsPerPage); } function movePage(dir){ if(currentPage === 0 && dir < 0){ return; } else if((currentPage+1)*itemsPerPage > icons.length - 1 && dir > 0){ return; } currentPage += dir; renderPage(); } buildIcons(); buildNavigation(); renderPage();
SVG Animated icons - Script Codes
SVG Animated icons - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded September 09, 2022
Rating 4.5
Size 3,819 Kb
Views 36,432
Do you need developer help for SVG Animated icons?

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!

Kittons (airnan) Script Codes
Name
Mc A from Beastie boys
Bug Industries - The Lady
Curved warp
Svg jou jou monster
Interactive IK from After Effects to svg
An animated year
Perricorn. a dog that was a unicorn
A christmas loop in svg
Don dalek
Tribute to white stripes
Create amazing art & images 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!