Animated SVG

Developer
UX Snippets
Size
4,028 Kb
Views
22,264
  1. Animated SVG Previews
  2. Animated SVG HTML Codes
  3. Animated SVG CSS Codes

How do I make an animated svg?

Testing some simple animation techniques with SVG images.. What is a animated svg? How do you make a animated svg? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.

Animated SVG Previews
IQ Test

Animated SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated SVG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul>	<li>	<svg version="1.1"	id="smartphone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"	x="0px" y="0px"	viewBox="0 0 70 110"	enable-background="new 0 0 70 110"	xml:space="preserve"	>	<rect	x="4" y="3"	fill-rule="evenodd"	clip-rule="evenodd"	fill="#fff"	width="63"	height="103"	/>	<path	fill="#555"	d="M63,10v80H7V10H63z M5,0C2.2,0,0,2.2,0,5v100c0,2.8,2.2,5,5,5h60c2.8,0,5-2.2,5-5V5c0-2.8-2.2-5-5-5H5z"	/>	<circle	fill="#333"	cx="35"	cy="100"	r="5"	/>	<rect	x="30" y="4"	fill="#FFFFFF"	width="10"	height="2"	/>	<g class="cloud-03">	<path	fill="#A7C2E0"	d="M43.7,59c3.5,0,6.3-2.9,6.3-6.4c0-3.5-2.8-6.3-6.3-6.4c-1.3-3.6-4.8-6.2-8.9-6.2c-4.7,0-8.7,3.5-9.3,8.1 c-0.1,0-0.1,0-0.2,0c-3,0-5.4,2.5-5.4,5.5c0,3,2.4,5.5,5.4,5.5H43.7z"	/>	</g>	</svg>	</li>	<li>	<svg version="1.1"	id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"	x="0px" y="0px"	viewBox="0 0 120 105.8"	enable-background="new 0 0 120 105.8"	xml:space="preserve"	>	<g class="cloud-02">	<path	fill-rule="evenodd"	clip-rule="evenodd"	fill="#A7C2E0"	d="M108.5,34.3C107.9,15.3,92.3,0,73.1,0C59.3,0,47.3,7.9,41.4,19.5 c-1.6-0.5-3.2-0.7 4.9-0.7c-7.4,0-13.7,4.8-15.9,11.5C8.8,33,0,43.6,0,56.2c0,14.7,11.9,26.6,26.6,26.6h66.8 c14.7,0,26.6-11.9,26.6-26.6C120,47.1,115.5,39.1,108.5,34.3z"	/>	</g>	<g class="cloud-01">	<path	fill="#44A5D7"	d="M27.9,104.8c-9.8,0-17.7-8.1-17.7-18c0-9.8,7.8-17.8,17.4-18c2.5-14.3,15.1-25,29.8-25 c12.4,0,23.7,7.7,28.2,19.3c11,0.5,19.8,9.6,19.8,20.8c0,11.5-9.3,20.9-20.7,20.9H27.9z"	/>	<path	fill="#FFFFFF"	d="M57.4,44.8c12.6,0,23.4,8.1,27.5,19.3c10.8,0.1,19.5,9,19.5,19.8c0,10.9-8.8,19.9-19.7,19.9H27.9 c-9.2,0-16.7-7.7-16.7-17c0-9.2,7.5-17,16.7-17c0.2,0,0.3,0,0.5,0C30.5,55.7,42.7,44.8,57.4,44.8 M57.4,42.8 c-14.9,0-27.8,10.7-30.7,25.1C17,68.5,9.2,76.8,9.2,86.8c0,10.5,8.4,19,18.7,19h56.8c11.9,0,21.7-9.8,21.7-21.9 c0-11.5-8.9-20.9-20.1-21.7C81.5,50.5,70,42.8,57.4,42.8L57.4,42.8z"	/>	</g>	</svg>	</li>	<li>	<svg version="1.1"	id="laptop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"	x="0px" y="0px"	viewBox="0 0 126 99"	enable-background="new 0 0 126 99"	xml:space="preserve"	>	<path	fill-rule="evenodd"	clip-rule="evenodd"	fill="#444953"	d="M11,87V10c0-3.6,3.3-6,6.9-6h90c3.6,0,6.1,2.4,6.1,6v77H11z"	/>	<path	fill="#A7C2E0"	d="M108,7h3v76H15V7H108 M107.9,0H13c-2.8,0-5,2.2-5,5v85h110V5c0-2.8-2.2-5-5-5H107.9z"	/>	<path	fill-rule="evenodd"	clip-rule="evenodd"	fill="#8CB2D7"	d="M126,92c0,4-3.1,7-7,7H7c-3.9,0-7-3-7-7H126z"	/>	<g class="appirio-logo">	<path	fill="#FFFFFF"	d="M80.2,44.8c2.5,3.6,4.9,7.9,7,12.9l-6.2,0c0,0-1.6-4.1-4.3-8.5L80.2,44.8"	/>	<path	fill="#FFFFFF"	d="M50.2,43.1c-3.4-5-5.4-10.1-5.4-10.1l-6.2,0c2.4,5.5,5,10.2,7.8,14L50.2,43.1z"	/>	<path	fill="#FFFFFF"	d="M49.9,51.1c4.2,4.3,8.7,6.7,13.4,6.7c9.4,0,18-9.2,24.7-24.7l-5.7,0c0,0-8.1,19.6-19,19.6 c-4,0-7.7-2.8-10.4-6C51,49,49.9,51.1,49.9,51.1z"	/>	<path	fill="#FFFFFF"	d="M76,39.6c-4.2-4.3-8.7-6.6-13.3-6.6c-9.4,0-18,9.2-24.7,24.7l5.7,0c0,0,8.1-19.6,19-19.6 c4,0,7.4,2.6,10.4,5.9C74.7,42,76,39.6,76,39.6z"	/>	</g>	</svg>	</li>
</ul>
</body>
</html>

Animated SVG - Script Codes CSS Codes

@-webkit-keyframes heart-beat { 0% { -webkit-transform: scale(0.5); } 50% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes heart-beat { 0% { -moz-transform: scale(0.5); } 50% { -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); }
}
@keyframes heart-beat { 0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes scale { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.95); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes scale { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(0.95); } 100% { -moz-transform: scale(1); }
}
@keyframes scale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes shake { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-2px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(-2deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-3deg); } 60% { -webkit-transform: translate(-2px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(-1deg); }
}
@-moz-keyframes shake { 0% { -moz-transform: translate(0px, 0px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-2px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(-2deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-3deg); } 60% { -moz-transform: translate(-2px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(0px, 0px) rotate(-1deg); }
}
@keyframes shake { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); -moz-transform: translate(-1px, -2px) rotate(-1deg); -ms-transform: translate(-1px, -2px) rotate(-1deg); -o-transform: translate(-1px, -2px) rotate(-1deg); transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-2px, 0px) rotate(1deg); -moz-transform: translate(-2px, 0px) rotate(1deg); -ms-transform: translate(-2px, 0px) rotate(1deg); -o-transform: translate(-2px, 0px) rotate(1deg); transform: translate(-2px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); -moz-transform: translate(0px, 2px) rotate(0deg); -ms-transform: translate(0px, 2px) rotate(0deg); -o-transform: translate(0px, 2px) rotate(0deg); transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(-2deg); -moz-transform: translate(1px, -1px) rotate(-2deg); -ms-transform: translate(1px, -1px) rotate(-2deg); -o-transform: translate(1px, -1px) rotate(-2deg); transform: translate(1px, -1px) rotate(-2deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-3deg); -moz-transform: translate(-1px, 2px) rotate(-3deg); -ms-transform: translate(-1px, 2px) rotate(-3deg); -o-transform: translate(-1px, 2px) rotate(-3deg); transform: translate(-1px, 2px) rotate(-3deg); } 60% { -webkit-transform: translate(-2px, 1px) rotate(0deg); -moz-transform: translate(-2px, 1px) rotate(0deg); -ms-transform: translate(-2px, 1px) rotate(0deg); -o-transform: translate(-2px, 1px) rotate(0deg); transform: translate(-2px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); -moz-transform: translate(2px, 1px) rotate(-1deg); -ms-transform: translate(2px, 1px) rotate(-1deg); -o-transform: translate(2px, 1px) rotate(-1deg); transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); -moz-transform: translate(-1px, -1px) rotate(1deg); -ms-transform: translate(-1px, -1px) rotate(1deg); -o-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); -moz-transform: translate(2px, 2px) rotate(0deg); -ms-transform: translate(2px, 2px) rotate(0deg); -o-transform: translate(2px, 2px) rotate(0deg); transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(-1deg); -moz-transform: translate(0px, 0px) rotate(-1deg); -ms-transform: translate(0px, 0px) rotate(-1deg); -o-transform: translate(0px, 0px) rotate(-1deg); transform: translate(0px, 0px) rotate(-1deg); }
}
ul { list-style: none;
}
ul li { float: left; width: 33%;
}
svg { max-width: 100%; height: auto; float: left; margin: 1rem; -webkit-animation: heart-beat 0.5s 1; -moz-animation: heart-beat 0.5s 1; animation: heart-beat 0.5s 1;
}
.cloud-01 { -webkit-animation-name: shake; -moz-animation-name: shake; animation-name: shake; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; animation-duration: 4s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
}
.cloud-02 { -webkit-animation-name: scale; -moz-animation-name: scale; animation-name: scale; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; animation-duration: 3s; -webkit-transform-origin: 30% 30%; -moz-transform-origin: 30% 30%; -ms-transform-origin: 30% 30%; -o-transform-origin: 30% 30%; transform-origin: 30% 30%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
}
.cloud-03 { -webkit-animation-name: shake; -moz-animation-name: shake; animation-name: shake; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; animation-duration: 8s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
}
Animated SVG - Script Codes
Animated SVG - Script Codes
Home Page Home
Developer UX Snippets
Username appirio-ux
Uploaded October 27, 2022
Rating 3
Size 4,028 Kb
Views 22,264
Do you need developer help for Animated SVG?

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!

UX Snippets (appirio-ux) Script Codes
Name
Country and State
Button examples
Material Icon toggling
Appirio Demos
Responsive table with data-labels
Sample SVG Icon Font
Bootstrap Table
Scroll Progress
Fancyselect Sample
CSS Tooltip Test
Create amazing captions 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!