SVG Animation

Developer
Pollardld
Size
3,133 Kb
Views
16,192
  1. SVG Animation Previews
  2. SVG Animation HTML Codes
  3. SVG Animation CSS Codes

How do I make an svg animation?

Svg animation of pteradon.. What is a svg animation? How do you make a svg animation? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

SVG Animation Previews
IQ Test

SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animation</title>	<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Pteradon Animation</h1>
<p>Proof of concept, add more frames for smoother transition. For additional frames, use values="...", where ellipses are the transition points in between from and to, to the animate tags.</p>
<svg version="1.1" id="pteradon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g>	<path id="wing" display="inline" fill="#5a9a1a" stroke="#228811" stroke-miterlimit="10" d="M90.9,96.9c-5.6-3.2-15.3-4.1-32.1,4.2	c-1.5,0.7-2.3,2.4-3.1,3.7c-1.2,1.9-2.3,3.9-3.5,5.8l-3.6,3.1l-1.7,1.7c1.6-0.2,2.2-0.9,2.9-0.8c0.1,1.2-0.4,2.3-0.6,3.4	c-0.4,2-0.7,3.9-0.9,5.9c-0.3,3.7-0.3,7.4-0.3,11.1c0,2-0.2,4.2,0.2,6.2c0.2,0.8,1.1,7.7,2.1,7.7c-0.1-4.3,1.2-9,2.6-13.1	c1.6-4.5,3.1-8.9,4.7-13.4c1.8-5.1,4.1-9.3,7.9-13.3c1.3-1.4,2.6-2.7,4-3.9c0.6-0.6,9.7-5.1,10.5-5.1">	<animate attributeName="d" from="M90.9,96.9c-5.6-3.2-15.3-4.1-32.1,4.2	c-1.5,0.7-2.3,2.4-3.1,3.7c-1.2,1.9-2.3,3.9-3.5,5.8l-3.6,3.1l-1.7,1.7c1.6-0.2,2.2-0.9,2.9-0.8c0.1,1.2-0.4,2.3-0.6,3.4	c-0.4,2-0.7,3.9-0.9,5.9c-0.3,3.7-0.3,7.4-0.3,11.1c0,2-0.2,4.2,0.2,6.2c0.2,0.8,1.1,7.7,2.1,7.7c-0.1-4.3,1.2-9,2.6-13.1	c1.6-4.5,3.1-8.9,4.7-13.4c1.8-5.1,4.1-9.3,7.9-13.3c1.3-1.4,2.6-2.7,4-3.9c0.6-0.6,9.7-5.1,10.5-5.1" to="M76.4,99.5c-3.2-0.6-5.3-4-8.4-4.9c-1.6-0.5-2.3-2.4-3.1-3.7	c-1.2-1.9-2.3-3.9-3.5-5.8c-0.8-1.3-2.9-3.5-4.5-2c-0.5-0.2,1-1.2,0.9-1.1l1.1-0.9c0.1-1.2-0.4-2.3-0.6-3.4c-0.4-2-0.7-3.9-0.9-5.9	c-0.3-3.7-0.3-7.4-0.3-11.1c0-2-0.2-4.2,0.2-6.2c0.2-0.8,1.1-7.7,2.1-7.7c-0.1,4.3,1.2,9,2.6,13.1c1.6,4.5,3.1,8.9,4.7,13.4	c1.8,5.1,4.1,9.3,7.9,13.3c1.3,1.4,2.6,2.7,4,3.9c0.6,0.6,10.7,6.1,11.5,6.1" dur="2s" repeatCount="indefinite" />
</path>
<path display="inline" fill="#5a9a1a" stroke="#228811" stroke-miterlimit="10" d="M94.8,97.5c0,0,10.6,2.5,13.6,4.1	c5,2.7,10.5,6.8,14.5,10.8c0.6,0.6,4.1,5.4,4.6,6.1c3.1,4.3,5.7,8,8.9,12.3c5.6,7.7,11.2,15.8,16.8,23.5L141,141.5	c-3.8-4.6-7.4-9.4-11.2-14c-3.8-4.6-7.1-9.5-10.8-14.2c-2.1-2.6-5.4-4.9-8.5-6.7c-2.1-1.2-6.8-2.8-9-3.9c-0.9-0.4-7.3-0.2-9.1,1	c-1.5,0.9-7.1-0.1-7.1-0.1C87.4,99.2,94.8,97.5,94.8,97.5z">	<animate attributeName="d" from="M94.8,97.5c0,0,10.6,2.5,13.6,4.1 c5,2.7,10.5,6.8,14.5,10.8c0.6,0.6,4.1,5.4,4.6,6.1c3.1,4.3,5.7,8,8.9,12.3c5.6,7.7,11.2,15.8,16.8,23.5L141,141.5	c-3.8-4.6-7.4-9.4-11.2-14c-3.8-4.6-7.1-9.5-10.8-14.2c-2.1-2.6-5.4-4.9-8.5-6.7c-2.1-1.2-6.8-2.8-9-3.9c-0.9-0.4-7.3-0.2-9.1,1	c-1.5,0.9-7.1-0.1-7.1-0.1C87.4,99.2,94.8,97.5,94.8,97.5z" to="M95.4,97.5c0,0-11.1,3.3-10.2,6.1c0.2,0.7,8.2-1.5,8.9-1.6	c0,0,10.7-2,13.6-3.6c5-2.7,10.5-6.8,14.5-10.8c0.6-0.6,4.1-5.4,4.6-6.1c3.1-4.3,5.7-8,8.9-12.3c5.6-7.7,11.2-15.8,16.8-23.5	l-12.2,12.8c-3.8,4.6-7.4,9.4-11.2,14c-3.8,4.6-7.1,9.5-10.8,14.2c-2.1,2.6-5.4,4.9-8.5,6.7c-2.1,1.2-6.8,2.8-9,3.9	C100,97.7,96.4,99.5,95.4,97.5" dur="2s" repeatCount="indefinite" />	</path>
</g>
<g id="body">	<path fill="#3a7f0a" d="M62.7,109.5c0-1.8,5.1-3.7,6.4-4.5c2.6-1.5,5.3-3.2,7.3-5.5c0,0,1.4-2.9,2.3-3.3c0.9-0.4,5.9-4.7,6.7-5.3	c1.3-1.2,2.8-3.1,4.3-3.9c-0.9,3.1-3,6-6.5,9.9c0,0,2.6-0.6,3.5-0.7c1.8-0.2,3.8-1.2,5.5-1.9c1.2-0.5,1.8-0.2,3.1-0.2	c0.2,0,0.6,0,0.8-0.2c0,0.7,0.6,0.6,1.1,0.2c-0.1,0.1-0.4,0.7,0,0.7c-0.8,0.4-1.7,0.2-2.5,0.2c-1.3,0-1.8,0.5-2.7,1.4l3.7-0.6	c1.2-0.5,1.8-0.2,3.1-0.2c0.2,0,0.6,0,0.8-0.2c0,0.7,0.6,0.6,1.1,0.2c-0.1,0.1-0.4,0.7,0,0.7c-0.8,0.4-1.7,0.2-2.5,0.2	c-1.3,0-1.8,0.5-2.7,1.4c-7.6,4.4-7.3,1.2-10.2,6c-4,1.5-7.7,0.3-10.1,1.5C70.1,107.6,62.7,109.5,62.7,109.5z"/>
</g>
</svg>
</body>
</html>

SVG Animation - Script Codes CSS Codes

body { background: #DDBABA;
}
h1 { color: #D84149; text-align: center; font-family: 'Raleway', sans-serif; font-size: 3em; margin: .75em auto .5em;
}
p { color: #984149; font-family: 'Raleway', sans-serif; margin: 2em auto -4em; width: 80%;
}
svg { margin: 0; height: 30em;
}
SVG Animation - Script Codes
SVG Animation - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 3
Size 3,133 Kb
Views 16,192
Do you need developer help for 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!

Pollardld (pollardld) Script Codes
Name
Animation mixin
FCC Vote Date - PSA
New Header
My Map
Alta Map Spartanburg
Mapbox Directions, GeoLocation, Tracking, and Firebase
Turkey Hunting with Horizontal Lines
Paypal checkout svg
Mapbox Directions with geolocation tracking
CSS Accordion
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!