Skip to content

Instantly share code, notes, and snippets.

@droganaida

droganaida/svg-animation-demo.html

Created March 19, 2020 17:16
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save droganaida/707ae1dd6ca7844b13f102c35fa17840 to your computer and use it in GitHub Desktop.
Save droganaida/707ae1dd6ca7844b13f102c35fa17840 to your computer and use it in GitHub Desktop.
Download ZIP
Some cool SVG animations (move, rotate, opacity, text on path). No JavaScript.
Raw
svg-animation-demo.html
<html>
<head>
<title>SVG animation demo dy #BlondieCode</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
min-height: 100vh;
margin: 0;
padding: 0;
overflow: auto;
}
body {
display: flex;
flex-direction: column;
text-align: center;
box-sizing: border-box;
font-family: Arial, "Helvetica Neue", Helvetica, serif;
background-color: #cc5577;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23cc5577' width='11' height='11'/%3E%3Crect fill='%23ce5776' x='10' width='11' height='11'/%3E%3Crect fill='%23d05a76' y='10' width='11' height='11'/%3E%3Crect fill='%23d15c75' x='20' width='11' height='11'/%3E%3Crect fill='%23d35f74' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23d46174' y='20' width='11' height='11'/%3E%3Crect fill='%23d66473' x='30' width='11' height='11'/%3E%3Crect fill='%23d76673' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%23d96972' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%23da6c72' y='30' width='11' height='11'/%3E%3Crect fill='%23db6e71' x='40' width='11' height='11'/%3E%3Crect fill='%23dc7171' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%23dd7471' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23de7671' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23df7971' y='40' width='11' height='11'/%3E%3Crect fill='%23e07c71' x='50' width='11' height='11'/%3E%3Crect fill='%23e17e71' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23e28171' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23e38471' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23e38771' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23e48972' y='50' width='11' height='11'/%3E%3Crect fill='%23e58c72' x='60' width='11' height='11'/%3E%3Crect fill='%23e58f73' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23e69173' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23e69474' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%23e79775' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%23e79a75' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%23e89c76' x='70' width='11' height='11'/%3E%3Crect fill='%23e89f77' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%23e8a278' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%23e9a47a' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%23e9a77b' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23e9aa7c' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23e9ac7e' x='80' width='11' height='11'/%3E%3Crect fill='%23eaaf7f' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23eab281' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23eab482' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23eab784' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23eaba86' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23ebbc88' x='90' width='11' height='11'/%3E%3Crect fill='%23ebbf8a' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23ebc18c' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23ebc48e' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%23ebc790' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%23ebc992' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%23ebcc94' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%23ebce97' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%23ebd199' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%23ecd39c' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%23ecd69e' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23ecd8a1' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23ecdba4' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23ecdda6' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23ece0a9' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23ede2ac' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23ede4af' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23ede7b2' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23ede9b5' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23eeecb8' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23EEB' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
div {
box-sizing: border-box;
}
main {
flex-grow: 1;
display: flex;
}
footer {
text-align: center;
padding: 20px;
flex-grow: 0;
}
a {
color: #944451;
}
a:hover {
color: #CC5577;
}
.holder {
width: 100%;
max-width: 500px;
background-color: rgba(255,255,255,.5);
margin: auto;
}
</style>
</head>
<body>
<main>
<div class="holder">
<svg id="svgMain" width="500" height="500">
<g transform="translate(-50 -50)">
<path transform="translate(800 400)"
id="batPath1" fill="#CC5577" d="m 794.19922,0 c -42.0875,7.1 -63.04844,50.225781 -78.58594,85.613281 -1.3,5.4125 -6.73828,17.536719 -11.67578,7.824219 C 689.8375,52.975 661.45078,10.65 615.98828,3.75 591.13828,3.3125 592.05,35.7375 597.3125,52.625 c 15,29.575 10.31328,68.47461 40.30078,89.72461 3.675,0.575 9.51133,8.40117 2.79883,4.82617 -3.5375,2.3625 -14.66133,11.31133 -7.11133,15.54883 -5.6375,-3.6625 -10.15078,-1.54961 -13.92578,3.15039 -9.2375,-3.025 -16.76289,5.7625 -25.40039,2.6875 0.9125,2.125 7.51289,6.53789 2.02539,4.77539 -43.2625,5.325 -85.12422,-12.46328 -126.01172,-24.61328 -29.425,-9.45 -58.88789,-18.54922 -88.83789,-26.13672 C 370.67539,120.90039 360.59961,111.4 349.84961,117.25 245.22461,98.55 135.57539,95.288282 31.150391,118.42578 20.562891,125.96328 8.775,132.16172 0,141.94922 L 0,144.25 c 17.475,-8.65 34.286719,7.33711 46.511719,17.97461 22.2625,16.0625 31.689063,43.72461 53.851561,59.91211 6.3875,8.8625 28.27344,15.16367 16.96094,27.88867 3.375,-2.15 5.76406,-5.80117 9.28906,-7.51367 24.1625,5.15 47.24844,14.20117 67.77344,28.07617 46.4125,18.1875 100.96367,23.375 138.38867,59.1875 3.525,10.4 4.82461,7.19961 2.03711,-1.90039 51.9625,1.675 102.9,15.59922 155.125,13.44922 24.8125,-1.2375 50.80039,6.42578 67.77539,25.30078 -11.1375,0.375 -17.88867,11.15039 -11.82617,20.96289 12.1375,-18.5625 -9.94844,18.24961 8.72656,16.53711 -4.1375,-5.0125 -6.05039,-16.09961 1.59961,-19.66211 -3.2625,5.775 -3.82578,14.83672 1.76172,19.07422 11.65,1.0125 -3.675,-9.36289 2.125,-16.15039 -1.775,5.5875 9.17578,15.30156 10.61328,6.78906 -11.65,-5.7 4.48633,-14.5 10.42383,-6.4375 4.0625,14.175 10.23828,28.32383 21.36328,38.48633 16.4375,19.2 48.20078,9.77578 63.42578,30.36328 10.5625,13.075 28.79844,14.43789 40.83594,25.46289 6.075,10.1375 3.17539,22.08672 5.71289,32.94922 l 2.46289,0 c -9.875,-38.0125 36.99961,-40.22539 53.84961,-63.71289 15.3125,-15.425 38.6,-14.64922 55.625,-26.82422 11.775,-11.575 13.15078,-29.65039 20.36328,-43.65039 9.1375,-5.875 21.85,5.29922 10.4375,11.94922 2.2,10.625 14.5375,-12.56172 10.1875,-0.19922 -3.37248,3.28583 -2.66605,5.06817 -0.61719,5.4707 l 2.40625,-1.52343 2.83399,-4.64844 0.72265,-2.47852 c -0.15868,-1.37695 -0.0718,-3.21471 0.44141,-5.60742 6.87274,7.04625 1.32095,11.74124 -0.17188,6.95117 l -0.3125,1.92774 0.3418,2.60742 0.36524,0.73047 c 0.0126,-0.0104 0.0265,-0.0188 0.0391,-0.0293 12.7625,0.6125 5.2375,-14.55117 -0.125,-20.01367 6.575,1.5125 8.8875,8.02617 8.75,14.01367 1.0035,-0.88618 1.70925,-1.92265 2.22461,-3.05469 0.52191,-1.14642 0.0781,-0.77899 0.084,-1.16992 0.0136,-0.90758 0.0848,-1.83489 -0.11328,-2.7207 -0.51017,-2.28167 -1.53071,-4.45234 -2.7207,-6.46485 -0.41587,-0.70332 -0.77469,-1.7098 -1.52149,-1.92187 -0.48977,-0.13908 -0.96206,-0.6912 -1.20312,-1.99414 0.72969,-0.20625 1.29267,-0.27664 1.7168,-0.25391 1.7809,0.0954 -0.80181,1.65979 0.11328,2.2168 0,0 0.83455,0.70503 1.34765,0.82031 0.7045,0.15828 1.50259,0.0843 2.1543,-0.22656 0.77201,-0.36826 1.42723,-1.05178 1.81445,-1.81445 0.3454,-0.6803 0.35157,-2.26172 0.35157,-2.26172 1.30564,-8.39944 -15.11947,-3.39444 -21.48438,-2.25391 5.7,-8.8875 16.08711,-13.8625 23.91211,-20.9375 32.2875,-19.9625 71.49961,-6.91406 106.97461,-12.91406 31.82503,-6.6625 63.67583,-14.67461 96.42583,-14.47461 32.8,-37.2125 84.0988,-43.56172 128.6738,-57.94922 23.4125,-10 42.9141,-30.48711 69.3516,-32.22461 6.1875,8.1875 1.5613,-4.58789 8.3613,-6.40039 27.9625,-22.9875 39.1754,-59.93828 67.6504,-82.30078 14.5875,-10.725 35.125,-20.03672 52.0625,-8.57422 l 0,-1.125 c -7.25,-9.9 -17.6254,-17.46211 -27.9629,-23.97461 -41.25,-13.574998 -84.8871,-14.101171 -127.9121,-19.513671 -63.275,4.7 -127.2504,10.862109 -190.0879,22.412111 -12.4875,-8.975 -25.0629,3.70039 -37.9004,5.21289 -69.7875,16.15 -133.76135,56.35 -206.42385,59.5 -4,-7.575 -10.31328,-5.44922 -17.61328,-4.69922 -1.3125,-9.7 -31.775,-0.18867 -19.4375,-10.13867 -4.525,-10.8375 -18.3125,-12.425 -28.5,-16.8125 C 808.91211,127.34922 814.3,72.3 820.125,29 823.4375,15.2625 813.14922,0.425 798.57422,0 Z M 555.74414,373.5332 c 11.65184,-0.14132 -15.09297,7.45313 -4.93164,0.31641 2.11055,-0.20508 3.72628,-0.30179 4.93164,-0.31641 z"/>
<animateTransform
attributeName="transform"
type="rotate"
values="90;0;30;0;-90"
dur="5s"
repeatCount="indefinite"
additive="sum"/>
<animateTransform
attributeName="transform"
type="scale"
values="0.1;0.16;0.16;0.1"
dur="5s"
repeatcount="indefinite"
additive="sum"/>
<animate
attributeType="CSS"
attributeName="opacity"
values="0.5;0.9;0.9;0.5"
dur="5s"
repeatCount="indefinite" />
</g>
<g transform="translate(50 50)">
<path transform="translate(800 400)"
id="batPath2" fill="#CC5577" d="m 794.19922,0 c -42.0875,7.1 -63.04844,50.225781 -78.58594,85.613281 -1.3,5.4125 -6.73828,17.536719 -11.67578,7.824219 C 689.8375,52.975 661.45078,10.65 615.98828,3.75 591.13828,3.3125 592.05,35.7375 597.3125,52.625 c 15,29.575 10.31328,68.47461 40.30078,89.72461 3.675,0.575 9.51133,8.40117 2.79883,4.82617 -3.5375,2.3625 -14.66133,11.31133 -7.11133,15.54883 -5.6375,-3.6625 -10.15078,-1.54961 -13.92578,3.15039 -9.2375,-3.025 -16.76289,5.7625 -25.40039,2.6875 0.9125,2.125 7.51289,6.53789 2.02539,4.77539 -43.2625,5.325 -85.12422,-12.46328 -126.01172,-24.61328 -29.425,-9.45 -58.88789,-18.54922 -88.83789,-26.13672 C 370.67539,120.90039 360.59961,111.4 349.84961,117.25 245.22461,98.55 135.57539,95.288282 31.150391,118.42578 20.562891,125.96328 8.775,132.16172 0,141.94922 L 0,144.25 c 17.475,-8.65 34.286719,7.33711 46.511719,17.97461 22.2625,16.0625 31.689063,43.72461 53.851561,59.91211 6.3875,8.8625 28.27344,15.16367 16.96094,27.88867 3.375,-2.15 5.76406,-5.80117 9.28906,-7.51367 24.1625,5.15 47.24844,14.20117 67.77344,28.07617 46.4125,18.1875 100.96367,23.375 138.38867,59.1875 3.525,10.4 4.82461,7.19961 2.03711,-1.90039 51.9625,1.675 102.9,15.59922 155.125,13.44922 24.8125,-1.2375 50.80039,6.42578 67.77539,25.30078 -11.1375,0.375 -17.88867,11.15039 -11.82617,20.96289 12.1375,-18.5625 -9.94844,18.24961 8.72656,16.53711 -4.1375,-5.0125 -6.05039,-16.09961 1.59961,-19.66211 -3.2625,5.775 -3.82578,14.83672 1.76172,19.07422 11.65,1.0125 -3.675,-9.36289 2.125,-16.15039 -1.775,5.5875 9.17578,15.30156 10.61328,6.78906 -11.65,-5.7 4.48633,-14.5 10.42383,-6.4375 4.0625,14.175 10.23828,28.32383 21.36328,38.48633 16.4375,19.2 48.20078,9.77578 63.42578,30.36328 10.5625,13.075 28.79844,14.43789 40.83594,25.46289 6.075,10.1375 3.17539,22.08672 5.71289,32.94922 l 2.46289,0 c -9.875,-38.0125 36.99961,-40.22539 53.84961,-63.71289 15.3125,-15.425 38.6,-14.64922 55.625,-26.82422 11.775,-11.575 13.15078,-29.65039 20.36328,-43.65039 9.1375,-5.875 21.85,5.29922 10.4375,11.94922 2.2,10.625 14.5375,-12.56172 10.1875,-0.19922 -3.37248,3.28583 -2.66605,5.06817 -0.61719,5.4707 l 2.40625,-1.52343 2.83399,-4.64844 0.72265,-2.47852 c -0.15868,-1.37695 -0.0718,-3.21471 0.44141,-5.60742 6.87274,7.04625 1.32095,11.74124 -0.17188,6.95117 l -0.3125,1.92774 0.3418,2.60742 0.36524,0.73047 c 0.0126,-0.0104 0.0265,-0.0188 0.0391,-0.0293 12.7625,0.6125 5.2375,-14.55117 -0.125,-20.01367 6.575,1.5125 8.8875,8.02617 8.75,14.01367 1.0035,-0.88618 1.70925,-1.92265 2.22461,-3.05469 0.52191,-1.14642 0.0781,-0.77899 0.084,-1.16992 0.0136,-0.90758 0.0848,-1.83489 -0.11328,-2.7207 -0.51017,-2.28167 -1.53071,-4.45234 -2.7207,-6.46485 -0.41587,-0.70332 -0.77469,-1.7098 -1.52149,-1.92187 -0.48977,-0.13908 -0.96206,-0.6912 -1.20312,-1.99414 0.72969,-0.20625 1.29267,-0.27664 1.7168,-0.25391 1.7809,0.0954 -0.80181,1.65979 0.11328,2.2168 0,0 0.83455,0.70503 1.34765,0.82031 0.7045,0.15828 1.50259,0.0843 2.1543,-0.22656 0.77201,-0.36826 1.42723,-1.05178 1.81445,-1.81445 0.3454,-0.6803 0.35157,-2.26172 0.35157,-2.26172 1.30564,-8.39944 -15.11947,-3.39444 -21.48438,-2.25391 5.7,-8.8875 16.08711,-13.8625 23.91211,-20.9375 32.2875,-19.9625 71.49961,-6.91406 106.97461,-12.91406 31.82503,-6.6625 63.67583,-14.67461 96.42583,-14.47461 32.8,-37.2125 84.0988,-43.56172 128.6738,-57.94922 23.4125,-10 42.9141,-30.48711 69.3516,-32.22461 6.1875,8.1875 1.5613,-4.58789 8.3613,-6.40039 27.9625,-22.9875 39.1754,-59.93828 67.6504,-82.30078 14.5875,-10.725 35.125,-20.03672 52.0625,-8.57422 l 0,-1.125 c -7.25,-9.9 -17.6254,-17.46211 -27.9629,-23.97461 -41.25,-13.574998 -84.8871,-14.101171 -127.9121,-19.513671 -63.275,4.7 -127.2504,10.862109 -190.0879,22.412111 -12.4875,-8.975 -25.0629,3.70039 -37.9004,5.21289 -69.7875,16.15 -133.76135,56.35 -206.42385,59.5 -4,-7.575 -10.31328,-5.44922 -17.61328,-4.69922 -1.3125,-9.7 -31.775,-0.18867 -19.4375,-10.13867 -4.525,-10.8375 -18.3125,-12.425 -28.5,-16.8125 C 808.91211,127.34922 814.3,72.3 820.125,29 823.4375,15.2625 813.14922,0.425 798.57422,0 Z M 555.74414,373.5332 c 11.65184,-0.14132 -15.09297,7.45313 -4.93164,0.31641 2.11055,-0.20508 3.72628,-0.30179 4.93164,-0.31641 z"/>
<animateTransform
attributeName="transform"
type="rotate"
values="0;20;-30;20;0"
dur="5s"
repeatCount="indefinite"
additive="sum"/>
<animateTransform
attributeName="transform"
type="scale"
values="0.09;0.12;0.12;0.09"
dur="5s"
repeatcount="indefinite"
additive="sum"/>
<animate
attributeType="CSS"
attributeName="opacity"
values="0.3;0.8;0.8;0.3"
dur="5s"
repeatCount="indefinite" />
</g>
<g transform="translate(300 50)">
<path transform="translate(800 400)"
id="batPath3" fill="#CC5577" d="m 794.19922,0 c -42.0875,7.1 -63.04844,50.225781 -78.58594,85.613281 -1.3,5.4125 -6.73828,17.536719 -11.67578,7.824219 C 689.8375,52.975 661.45078,10.65 615.98828,3.75 591.13828,3.3125 592.05,35.7375 597.3125,52.625 c 15,29.575 10.31328,68.47461 40.30078,89.72461 3.675,0.575 9.51133,8.40117 2.79883,4.82617 -3.5375,2.3625 -14.66133,11.31133 -7.11133,15.54883 -5.6375,-3.6625 -10.15078,-1.54961 -13.92578,3.15039 -9.2375,-3.025 -16.76289,5.7625 -25.40039,2.6875 0.9125,2.125 7.51289,6.53789 2.02539,4.77539 -43.2625,5.325 -85.12422,-12.46328 -126.01172,-24.61328 -29.425,-9.45 -58.88789,-18.54922 -88.83789,-26.13672 C 370.67539,120.90039 360.59961,111.4 349.84961,117.25 245.22461,98.55 135.57539,95.288282 31.150391,118.42578 20.562891,125.96328 8.775,132.16172 0,141.94922 L 0,144.25 c 17.475,-8.65 34.286719,7.33711 46.511719,17.97461 22.2625,16.0625 31.689063,43.72461 53.851561,59.91211 6.3875,8.8625 28.27344,15.16367 16.96094,27.88867 3.375,-2.15 5.76406,-5.80117 9.28906,-7.51367 24.1625,5.15 47.24844,14.20117 67.77344,28.07617 46.4125,18.1875 100.96367,23.375 138.38867,59.1875 3.525,10.4 4.82461,7.19961 2.03711,-1.90039 51.9625,1.675 102.9,15.59922 155.125,13.44922 24.8125,-1.2375 50.80039,6.42578 67.77539,25.30078 -11.1375,0.375 -17.88867,11.15039 -11.82617,20.96289 12.1375,-18.5625 -9.94844,18.24961 8.72656,16.53711 -4.1375,-5.0125 -6.05039,-16.09961 1.59961,-19.66211 -3.2625,5.775 -3.82578,14.83672 1.76172,19.07422 11.65,1.0125 -3.675,-9.36289 2.125,-16.15039 -1.775,5.5875 9.17578,15.30156 10.61328,6.78906 -11.65,-5.7 4.48633,-14.5 10.42383,-6.4375 4.0625,14.175 10.23828,28.32383 21.36328,38.48633 16.4375,19.2 48.20078,9.77578 63.42578,30.36328 10.5625,13.075 28.79844,14.43789 40.83594,25.46289 6.075,10.1375 3.17539,22.08672 5.71289,32.94922 l 2.46289,0 c -9.875,-38.0125 36.99961,-40.22539 53.84961,-63.71289 15.3125,-15.425 38.6,-14.64922 55.625,-26.82422 11.775,-11.575 13.15078,-29.65039 20.36328,-43.65039 9.1375,-5.875 21.85,5.29922 10.4375,11.94922 2.2,10.625 14.5375,-12.56172 10.1875,-0.19922 -3.37248,3.28583 -2.66605,5.06817 -0.61719,5.4707 l 2.40625,-1.52343 2.83399,-4.64844 0.72265,-2.47852 c -0.15868,-1.37695 -0.0718,-3.21471 0.44141,-5.60742 6.87274,7.04625 1.32095,11.74124 -0.17188,6.95117 l -0.3125,1.92774 0.3418,2.60742 0.36524,0.73047 c 0.0126,-0.0104 0.0265,-0.0188 0.0391,-0.0293 12.7625,0.6125 5.2375,-14.55117 -0.125,-20.01367 6.575,1.5125 8.8875,8.02617 8.75,14.01367 1.0035,-0.88618 1.70925,-1.92265 2.22461,-3.05469 0.52191,-1.14642 0.0781,-0.77899 0.084,-1.16992 0.0136,-0.90758 0.0848,-1.83489 -0.11328,-2.7207 -0.51017,-2.28167 -1.53071,-4.45234 -2.7207,-6.46485 -0.41587,-0.70332 -0.77469,-1.7098 -1.52149,-1.92187 -0.48977,-0.13908 -0.96206,-0.6912 -1.20312,-1.99414 0.72969,-0.20625 1.29267,-0.27664 1.7168,-0.25391 1.7809,0.0954 -0.80181,1.65979 0.11328,2.2168 0,0 0.83455,0.70503 1.34765,0.82031 0.7045,0.15828 1.50259,0.0843 2.1543,-0.22656 0.77201,-0.36826 1.42723,-1.05178 1.81445,-1.81445 0.3454,-0.6803 0.35157,-2.26172 0.35157,-2.26172 1.30564,-8.39944 -15.11947,-3.39444 -21.48438,-2.25391 5.7,-8.8875 16.08711,-13.8625 23.91211,-20.9375 32.2875,-19.9625 71.49961,-6.91406 106.97461,-12.91406 31.82503,-6.6625 63.67583,-14.67461 96.42583,-14.47461 32.8,-37.2125 84.0988,-43.56172 128.6738,-57.94922 23.4125,-10 42.9141,-30.48711 69.3516,-32.22461 6.1875,8.1875 1.5613,-4.58789 8.3613,-6.40039 27.9625,-22.9875 39.1754,-59.93828 67.6504,-82.30078 14.5875,-10.725 35.125,-20.03672 52.0625,-8.57422 l 0,-1.125 c -7.25,-9.9 -17.6254,-17.46211 -27.9629,-23.97461 -41.25,-13.574998 -84.8871,-14.101171 -127.9121,-19.513671 -63.275,4.7 -127.2504,10.862109 -190.0879,22.412111 -12.4875,-8.975 -25.0629,3.70039 -37.9004,5.21289 -69.7875,16.15 -133.76135,56.35 -206.42385,59.5 -4,-7.575 -10.31328,-5.44922 -17.61328,-4.69922 -1.3125,-9.7 -31.775,-0.18867 -19.4375,-10.13867 -4.525,-10.8375 -18.3125,-12.425 -28.5,-16.8125 C 808.91211,127.34922 814.3,72.3 820.125,29 823.4375,15.2625 813.14922,0.425 798.57422,0 Z M 555.74414,373.5332 c 11.65184,-0.14132 -15.09297,7.45313 -4.93164,0.31641 2.11055,-0.20508 3.72628,-0.30179 4.93164,-0.31641 z"/>
<animateTransform
attributeName="transform"
type="rotate"
values="10;-90;20;40;10"
dur="5s"
repeatCount="indefinite"
additive="sum"/>
<animateTransform
attributeName="transform"
type="scale"
values="0.1;0.08;0.08;0.1"
dur="5s"
fill="freeze"
repeatcount="indefinite"
additive="sum"/>
<animate
attributeType="CSS"
attributeName="opacity"
values="0.8;0.3;0.3;0.8"
dur="5s"
fill="freeze"
repeatCount="indefinite" />
</g>
<g transform="scale(14, 14), translate(2 1)">
<path id="textPath" fill="none"
stroke="#E89C76" d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
<text fill="#EDE9B5"
font-family="Verdana, sans-serif" font-size="3px">
<textpath xlink:href="#textPath">
Meow-meow-meow! Purr-purr
<animate
attributeName="startOffset"
from="0%"
to ="100%"
begin="0s"
dur="20s"
repeatCount="indefinite"/>
</textpath>
</text>
</g>
<g transform="translate(0 134)">
<path id="catPath" fill="#CC5577" d="m151.35 307.2h113c0-16.06-1.15-19.25-27.75-19.25 4.25-12.75 21.52-43.59 31.12-43.59 8.5 0 18.63 0.47 18.63 19.84 0 22 37.02 57.48 46 43 13.38-21.56-23-14.98-23-67 0-71.15 41.52-61.02 41.52-101 0-20-5.52-22.7-5.52-37 0-18.893 16.65-17.796 13.41-33.465-2.24-10.823-3.99-19.503-5.29-32.591-0.93-9.287-1.23-19.185-10.87-18.787-11.33 0.468-15.63 20.417-33.25 21.848-17.58 1.427-32.57-14.967-39.38-12.625-6.74 2.321-4.62 20.625-0.62 33.625 6.29 20.432 20 46.995-5 50.995s-68 8-99 49-29.86 89.12-42 104c-40.759 49.96-82.526 29.45-82.526 71 0 18.61 31.525 32 36.525 26s-42.485-23.87 10.646-45c45.395-18.04 49.445-21.72 63.355-9z"/>
<set xlink:href="#catPath"
attributeName="fill"
to="#0099AA"
begin="click"
dur="3s"/>
<animate xlink:href="#catPath"
attributeName="d"
attributeType="XML"
values="m 151.35,307.2 h 113 c 0,-16.06 -1.15,-19.25 -27.75,-19.25 4.25,-12.75 21.52,-43.59 31.12,-43.59 8.5,0 18.63,0.47 18.63,19.84 0,22 37.02,57.48 46,43 13.38,-21.56 -23,-14.98 -23,-67 0,-71.15 41.52,-61.02 41.52,-101 0,-20 -5.52,-22.7 -5.52,-37 0,-18.893 16.65,-17.796 13.41,-33.465 -2.24,-10.823 -3.99,-19.503 -5.29,-32.591 -0.93,-9.287 -1.23,-19.185 -10.87,-18.787 -11.33,0.468 -15.63,20.417 -33.25,21.848 -17.58,1.427 -32.57,-14.967 -39.38,-12.625 -6.74,2.321 -4.62,20.625 -0.62,33.625 6.29,20.432 20,46.995 -5,50.995 -25,4 -68,8 -99,49 -31,41 -29.86,89.12 -42,104 -40.759,49.96 -82.526,29.45 -82.526,71 0,18.61 41.772056,21.75294 46.772056,15.75294 5,-6 -70.949044,-13.05366 10.646,-45 C 143.63706,287.91294 137.44,294.48 151.35,307.2 Z;
m 151.35,307.2 h 113 c 0,-16.06 -1.15,-19.25 -27.75,-19.25 4.25,-12.75 21.52,-43.59 31.12,-43.59 8.5,0 18.63,0.47 18.63,19.84 0,22 37.02,57.48 46,43 13.38,-21.56 -23,-14.98 -23,-67 0,-71.15 41.52,-61.02 41.52,-101 0,-20 -5.52,-22.7 -5.52,-37 0,-18.893 16.65,-17.796 13.41,-33.465 C 356.52,57.912 350.78503,50.370562 349.48503,37.282562 348.55503,27.995562 347.68575,16.959 338.04575,17.357 326.71575,17.825 326.97,37.774 309.35,39.205 291.77,40.632 281.33425,20.822315 274.52425,23.164315 267.78425,25.485315 265.35,47.205 269.35,60.205 c 6.29,20.432 20,46.995 -5,50.995 -25,4 -65.1536,-0.53921 -96.1536,40.46079 -31,41 -32.7064,97.65921 -44.8464,112.53921 -40.759,49.96 -58.496905,35.24981 -85.941685,66.44575 -15.370584,17.47144 -16.375794,31.80588 -3.324662,33.40065 18.372872,2.24507 -16.86736,-20.45431 64.727684,-52.40065 C 144.20634,293.60575 137.44,294.48 151.35,307.2 Z;
m 151.35,307.2 h 113 c 0,-16.06 -1.15,-19.25 -27.75,-19.25 4.25,-12.75 21.52,-43.59 31.12,-43.59 8.5,0 18.63,0.47 18.63,19.84 0,22 37.02,57.48 46,43 13.38,-21.56 -23,-14.98 -23,-67 0,-71.15 41.52,-61.02 41.52,-101 0,-20 -5.52,-22.7 -5.52,-37 0,-18.893 16.65,-17.796 13.41,-33.465 -2.24,-10.823 -3.99,-19.503 -5.29,-32.591 -0.93,-9.287 -1.23,-19.185 -10.87,-18.787 -11.33,0.468 -15.63,20.417 -33.25,21.848 -17.58,1.427 -32.57,-14.967 -39.38,-12.625 -6.74,2.321 -4.62,20.625 -0.62,33.625 6.29,20.432 20,46.995 -5,50.995 -25,4 -68,8 -99,49 -31,41 -29.86,89.12 -42,104 -40.759,49.96 -82.526,29.45 -82.526,71 0,18.61 41.772056,21.75294 46.772056,15.75294 5,-6 -70.949044,-13.05366 10.646,-45 C 143.63706,287.91294 137.44,294.48 151.35,307.2 Z;"
dur="2s"
repeatCount="indefinite"/>
</g>
</svg>
</div>
</main>
<footer>
<small><a href="https://www.youtube.com/c/AidaDrogan" target="_blank">by #BlondieCode © 2020</a></small> |
<small><a href="https://freesvg.org/" target="_blank">SVG © freesvg.org</a></small>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment