Infotype SVG Animation

Developer

Size

5,309 Kb

Views

38,456

Infotype SVG Animation Previews
Infotype SVG Animation HTML Codes
Infotype SVG Animation CSS Codes
Infotype SVG Animation JS Codes

How do I make an infotype svg animation?

Playing around with SVG Animations. I love em.Best looking in Google Chrome (+Android), but FF works too.. What is a infotype svg animation? How do you make a infotype svg animation? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

Infotype SVG Animation Previews

Infotype SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Infotype SVG Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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 800 330" enable-background="new 0 0 800 330" xml:space="preserve">
<g id="stage">	<g id="liniensystem">	<line fill="none" stroke="#FF6B21" stroke-width="3" stroke-miterlimit="10" x1="0" y1="47.1" x2="800" y2="47.1"/>	<line fill="none" stroke="#FF6B21" stroke-width="3" stroke-miterlimit="10" x1="0" y1="112.1" x2="800" y2="112.1"/>	<line fill="none" stroke="#FF6B21" stroke-width="3" stroke-miterlimit="10" x1="0" y1="220" x2="800" y2="220"/>	<line fill="none" stroke="#FF6B21" stroke-width="3" stroke-miterlimit="10" x1="0" y1="284" x2="800" y2="284"/>	</g>	<g id="letters"> <g class="details-circles"> <circle fill="#A200CA" cx="370.9" cy="61.5" r="19"/> <circle fill="#FFED00" cx="567.6" cy="122.2" r="16.5"/> <circle fill="#4EE4FE" cx="770.2" cy="125.9" r="16.5"/> </g>	<g class="letter-wrapper"> <path class="o" fill="#484848" d="M20.2,132.6c0-26.7,8.9-48,26.7-64.2C64.8,52.3,87,44.2,113.6,44.2c26.9,0,49.4,8,67.4,23.9 c18,16,27.1,37.7,27.1,65.3c0,26.7-8.6,48.4-25.9,64.9c-17.3,16.6-40,24.8-68.2,24.8c-27.4,0-49.9-8.3-67.5-24.8 S20.2,159.9,20.2,132.6z M49.4,133.5c0,27.8,5.5,48.6,16.6,62.5c11.1,13.9,27.7,20.9,49.8,20.9c19.4,0,34.8-7,46.1-20.9 c11.3-13.9,16.9-34.7,16.9-62.3c0-26.8-5.6-47.4-16.7-61.7c-11.1-14.3-27.2-21.5-48.4-21.5C93,50.6,77,57.6,66,71.5 C54.9,85.5,49.4,106.2,49.4,133.5z"/> <path class="f" fill="#484848" d="M343.7,115.8v5.9h-21.8c0,17.1,0,34.2,0,51.3c0,7.9-0.1,15.8,0.1,23.7c0.1,5.6-0.7,13.4,5.5,16.1 c4.7,2.1,10.3,1.5,15.3,1.5v5.9h-56.4v-5.9c5.8,0,14.7,0,16.4-7.2c1.1-5,0.7-10.6,0.8-15.7c0.1-7.2,0-14.4,0-21.5 c0-16,0-32.1,0-48.1h-19.5v-5.9h19.5c0-24.9-0.9-55.2,26-67.3c12.7-5.7,31.1-5.5,42.8,2.6c5.1,3.5,12,10.3,7.9,17.1 c-3.4,5.7-10.5,4.9-14.7,0.8c-4.8-4.7-6.5-11.6-12.2-15.6c-5.5-3.9-13.1-3.6-18.8-0.3c-11.9,6.9-12,20.5-12.3,32.6 c-0.1,2.1-0.6,30.2,0,30.2C329.3,115.8,336.5,115.8,343.7,115.8z"/> <path class="g-first" fill="#484848" d="M543.1,125c6.6-7.5,18.3-16.2,28.8-10.8c7.4,3.8,8.7,17.5-1.7,17.5c-10,0-9.1-16.8-20.9-6.3 c-4.8,4.3,1.8,11.3,3,17.4c1.2,6.1,1,12.6-0.8,18.6c-7,23.8-29.2,27.5-50.6,29c-6.4,0.4-18.4,0.9-21.9,7.6 c-4.7,8.9,9.2,10.8,14.7,11.5c19.8,2.4,48.6-1.8,64,14c17.2,17.6,8.7,45.3-12.3,55c-18.8,8.6-45.7,8.4-64.4-0.3 c-9.4-4.4-18.1-12-19.5-22.8c-1.4-10.6,6.1-25.5,19.1-20.5c-22.3,24.5,6.1,43.1,29.5,44.1c12.5,0.5,26.5-0.8,36.2-9.6 c8.4-7.6,10.9-22.3,2.9-31.2c-14.2-15.8-46.9-7.9-65.6-13.2c-9.3-2.6-16.8-9.7-15.6-20.1c1.4-11.6,13-16.4,23.1-18.3 c-20.4-12-33.5-37.7-16.7-58.7C490.7,107.3,524.8,105.9,543.1,125L543.1,125z M485.8,152.7c0,13.8,4.7,29.4,20.6,31.5 c20.5,2.7,26.9-17.2,26.9-33.7c0-15.4-5.4-33.1-24.1-33.1C489.9,117.4,485.8,137.1,485.8,152.7z"/> <path class="g-second" fill="#484848" d="M691.3,188c-7-3.4-12.3-8.1-16-14.2c-3.7-6.1-5.6-12.8-5.6-20.2c0-11.3,4.2-21,12.8-29.1 c8.5-8.1,19.4-12.2,32.7-12.2c10.9,0,20.3,2.7,28.2,8h24.1c3.6,0,5.6,0.1,6.2,0.3c0.6,0.2,1,0.6,1.2,1.1c0.5,0.7,0.7,2.1,0.7,4 c0,2.2-0.2,3.7-0.6,4.5c-0.2,0.4-0.7,0.7-1.3,1s-2.7,0.4-6.3,0.4h-14.8c4.6,6,7,13.6,7,22.9c0,10.6-4.1,19.7-12.2,27.2 c-8.1,7.5-19,11.3-32.7,11.3c-5.6,0-11.4-0.8-17.3-2.5c-3.7,3.2-6.1,5.9-7.4,8.3c-1.3,2.4-1.9,4.4-1.9,6c0,1.4,0.7,2.8,2.1,4.1 c1.4,1.3,4,2.3,8,2.9c2.3,0.3,8.1,0.6,17.4,0.9c17.1,0.4,28.2,1,33.2,1.7c7.7,1.1,13.9,3.9,18.5,8.6c4.6,4.6,6.9,10.4,6.9,17.2 c0,9.4-4.4,18.2-13.2,26.4c-12.9,12.1-29.8,18.2-50.6,18.2c-16,0-29.5-3.6-40.6-10.8c-6.2-4.1-9.3-8.5-9.3-12.9c0-2,0.5-4,1.4-6 c1.4-3.1,4.3-7.3,8.7-12.8c0.6-0.7,4.8-5.2,12.7-13.4c-4.3-2.6-7.4-4.9-9.1-6.9c-1.8-2-2.7-4.3-2.7-6.9c0-2.9,1.2-6.3,3.5-10.2 C677.3,200.7,682.7,195.2,691.3,188z M690,229.6c-3.9,4.2-6.8,8.2-8.8,11.8c-2,3.6-3,7-3,10.1c0,4,2.4,7.5,7.2,10.4 c8.3,5.1,20.3,7.7,36,7.7c14.9,0,25.9-2.6,33-7.9c7.1-5.3,10.6-10.9,10.6-16.9c0-4.3-2.1-7.4-6.3-9.2c-4.3-1.8-12.9-2.9-25.6-3.2 C714.4,231.9,700.1,231,690,229.6z M712.9,118.2c-6.1,0-11.3,2.4-15.4,7.3c-4.1,4.9-6.2,12.4-6.2,22.5c0,13.1,2.8,23.3,8.5,30.5 c4.3,5.5,9.8,8.2,16.4,8.2c6.3,0,11.5-2.4,15.6-7.1c4.1-4.7,6.1-12.1,6.1-22.3c0-13.2-2.9-23.5-8.6-31 C725,121,719.6,118.2,712.9,118.2z"/>	</g> <g class="details-other"> <path fill="#2162A6" d="M544.5,234.5c9.2,5.2,11.6,17.9,7.4,27.1c-5.6,12.4-20.5,16.5-32.9,17.2c-13,0.7-28.4-1.4-38.7-10.4	c-11-9.6-9.1-23.6,0.2-33.7c-13-5-20.5,9.9-19.1,20.5c1.7,13.1,14,21.4,25.7,25.2c22.3,7.4,58.2,6.7,73.6-14.2	c7.7-10.5,8.2-26.1,1.4-37.2c-7.1-11.6-19.4-15-32.1-16.7c-6.8-0.9-13.6-1.4-20.4-1.7c-3.4-0.2-13.4-2.7-15.9-0.3	c-4.5,4.5-8.9,8.9-13.4,13.4C500.5,231.5,525.1,223.9,544.5,234.5C550.7,237.9,538.3,231.1,544.5,234.5z"/>	<path fill="#2162A6" d="M661.8,254.8c-0.9,2-1.4,4-1.4,6c0,4.5,3.1,8.8,9.3,12.9c11,7.2,24.5,10.8,40.6,10.8	c20.8,0,37.7-6.1,50.6-18.2c8.8-8.2,13.2-17,13.2-26.4c0-6.8-2.3-12.5-6.9-17.2c-4.6-4.6-10.8-7.5-18.5-8.6	c-5.1-0.7-16.1-1.3-33.2-1.7c-7.4-0.2-12.6-0.4-15.6-0.7l-16.8,16.8c-7.8,8.2-12,12.6-12.6,13.4	C666.1,247.5,663.2,251.8,661.8,254.8z M681.2,241.4c2-3.7,4.9-7.6,8.8-11.8c10,1.4,24.4,2.4,43,2.9c12.8,0.3,21.3,1.4,25.6,3.2	c4.2,1.8,6.3,4.9,6.3,9.2c0,6-3.5,11.6-10.6,16.9c-7.1,5.3-18.1,7.9-33,7.9c-15.7,0-27.7-2.6-36-7.7c-4.8-3-7.2-6.5-7.2-10.5	C678.2,248.4,679.2,245,681.2,241.4z"/> </g>	<g class="details-wrapper"> <line class="for-o" fill="none" stroke="#33AC78" stroke-width="10" stroke-miterlimit="10" x1="110.2" y1="3" x2="118.1" y2="259.8"/> <line class="for-g-first" fill="none" stroke="#33AC78" stroke-width="10" stroke-miterlimit="10" x1="509.9" y1="65.5" x2="509.9" y2="324.1"/> <line class="for-g-second" fill="none" stroke="#33AC78" stroke-width="10" stroke-miterlimit="10" x1="704.8" y1="66.3" x2="734.5" y2="321.6"/>	</g>	</g>
</g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Infotype SVG Animation - Script Codes CSS Codes

#liniensystem line { stroke-dasharray: 0 100%; stroke-width: 0; -webkit-animation: strokes 1s ease-in-out forwards; animation: strokes 1s ease-in-out forwards;
}
#liniensystem line:nth-child(1) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s;
}
#liniensystem line:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
#liniensystem line:nth-child(3) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s;
}
#liniensystem line:nth-child(4) { -webkit-animation-delay: 1s; animation-delay: 1s;
}
@-webkit-keyframes strokes { 0% { stroke-dasharray: 0% 100%; stroke-width: 0; } 100% { stroke-dasharray: 150% 100%; stroke-width: 3; }
}
@keyframes strokes { 0% { stroke-dasharray: 0% 100%; stroke-width: 0; } 100% { stroke-dasharray: 150% 100%; stroke-width: 3; }
}
.letter-wrapper path { opacity: 0; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: letters 1s ease-in-out forwards; animation: letters 1s ease-in-out forwards;
}
.letter-wrapper path:nth-child(1) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s;
}
.letter-wrapper path:nth-child(2) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.letter-wrapper path:nth-child(3) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s;
}
.letter-wrapper path:nth-child(4) { -webkit-animation-delay: 2s; animation-delay: 2s;
}
@-webkit-keyframes letters { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 85% { -webkit-transform: scale(0.84); transform: scale(0.84); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes letters { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 85% { -webkit-transform: scale(0.84); transform: scale(0.84); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
.details-wrapper line { stroke-width: 0; -webkit-animation: stroke-width 1s ease-in-out forwards; animation: stroke-width 1s ease-in-out forwards; -webkit-transform-origin: 50%; transform-origin: 50%;
}
.details-wrapper line:nth-child(1) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}
.details-wrapper line:nth-child(2) { -webkit-animation-delay: 2.75s; animation-delay: 2.75s;
}
.details-wrapper line:nth-child(3) { -webkit-animation-delay: 3s; animation-delay: 3s;
}
.details-wrapper line:nth-child(4) { -webkit-animation-delay: 3.25s; animation-delay: 3.25s;
}
.details-wrapper line.for-o { -webkit-transform: rotate(1.87deg); transform: rotate(1.87deg);
}
.details-wrapper line.for-g-first { -webkit-transform: rotate(-0.81deg); transform: rotate(-0.81deg);
}
.details-wrapper line.for-g-second { -webkit-transform: rotate(6.7deg); transform: rotate(6.7deg);
}
@-webkit-keyframes stroke-width { 0% { stroke-width: 0; } 30% { stroke-width: 10; } 100% { stroke-width: 10; -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes stroke-width { 0% { stroke-width: 0; } 30% { stroke-width: 10; } 100% { stroke-width: 10; -webkit-transform: rotate(0); transform: rotate(0); }
}
.details-circles circle { -webkit-transform: scale(0); transform: scale(0); -webkit-animation: circles 1s ease-in-out forwards; animation: circles 1s ease-in-out forwards; -webkit-transform-origin: 50%; transform-origin: 50%;
}
.details-circles circle:nth-child(1) { -webkit-animation-delay: 3.25s; animation-delay: 3.25s;
}
.details-circles circle:nth-child(2) { -webkit-animation-delay: 3.5s; animation-delay: 3.5s;
}
.details-circles circle:nth-child(3) { -webkit-animation-delay: 3.75s; animation-delay: 3.75s;
}
.details-circles circle:nth-child(4) { -webkit-animation-delay: 4s; animation-delay: 4s;
}
@-webkit-keyframes circles { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes circles { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.details-other path { opacity: 0; -webkit-animation: others 1s ease-in-out forwards; animation: others 1s ease-in-out forwards;
}
.details-other path:nth-child(1) { -webkit-animation-delay: 3.75s; animation-delay: 3.75s;
}
.details-other path:nth-child(2) { -webkit-animation-delay: 4s; animation-delay: 4s;
}
.details-other path:nth-child(3) { -webkit-animation-delay: 4.25s; animation-delay: 4.25s;
}
.details-other path:nth-child(4) { -webkit-animation-delay: 4.5s; animation-delay: 4.5s;
}
@-webkit-keyframes others { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes others { 0% { opacity: 0; } 100% { opacity: 1; }
}

Infotype SVG Animation - Script Codes JS Codes

// nojs

Home Page	Home
Developer	Eduard Mayer
Username	codewunder
Uploaded	July 13, 2022
Rating	3.5
Size	5,309 Kb
Views	38,456

Do you need developer help for Infotype SVG Animation?

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!

Eduard Mayer (codewunder) Script Codes

Name	Size
Twitter Widget Rebound	4,890 Kb
CSSOff 2013 Submission	14,766 Kb
Social Slides	2,985 Kb
Scrollable see-through headline	3,171 Kb
Whatsapp PTT Animation	9,106 Kb
A Pen by Eduard Mayer	2,130 Kb
A Pen by Eduard Mayer	2,381 Kb
Responsive GTA V Slider	2,854 Kb
VelocityJS, fade on scroll	2,296 Kb
Animated Ubuntu Touch-styled checkboxes	3,420 Kb

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!

Similar Scripts & Codes

Name	Username	Size
A Pen by Shidhin	Shidhincr	5,015 Kb
Login-ng-modal	Heedoo	3,566 Kb
CSS Link Icons with jQuery Titles	Nicwinn	2,312 Kb
Project MMetro beta	Atomicsong	5,157 Kb
Material design buttons	Fischaela	4,381 Kb
12 DAYS OF XMAS	Proto78	2,313 Kb
Scifi-style Interative Form	Aaronchuo	4,566 Kb
TestTube CSS	EZPK	2,710 Kb
Portfolio Landing Page	FDfranklin	3,585 Kb
A Pen by Final Boss tommyb9	FBtommyb9	55,354 Kb

Do you want hide your ip address?

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!