Here is the simple example of SVG animation. We use HTML structure to show svg graphics in browser.
Tags used:-
svg <svg>:- Makes the svg structure.
circle <circle>:- Element is used to draw circles.
g <g>:- Element is used to group SVG shapes together.
path <path>:- Element is used to draw advanced shapes combined from lines, arcs, curves etc. with or without fill.
Animate Transform <animateTransform> :- Element that animates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body{
background: #88c8eb;
}
svg{
position: fixed;
top: 20%;
height: 60%;
left: 20%;
width: 60%;
}
</style>
</head>
<body>
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" fill="#fde587" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" fill="#fde587" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>
</body>
</html>
0 Comment(s)