Skip to content

Instantly share code, notes, and snippets.

@stanwmusic
Created July 27, 2018 04:19
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save stanwmusic/9eaa454be1c1526cce78e1d7bf98eb61 to your computer and use it in GitHub Desktop.
SVG animation with SMIL
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 668 151" style="enable-background:new 0 0 668 151;" xml:space="preserve">
<style type="text/css">
.line, .blackOutline{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.blackOutline{stroke:#333;}
.noBG{fill:none;}
.orangeBG{fill:#D86C43;}
.whiteBG{fill:#FFFFFF;}
.line{stroke:#EAEAEA;stroke-width:2;stroke-dasharray:12;}
</style>
<path class="line noBG" d="M628,115.2c-55.5,14.2-106.3-18.8-155.5-69c-52.1-33.5-110.3-22.2-115.5,15c-3.3,27.6,14.2,37.4,45,36 c0,0,38.5,0.5,32-26s-35.5-19.5-35.5-19.5c-35,14-50.5,35.5-94.5,40c-75.7,13-146.1,23.3-198.5,25c-30.8,2.8-44.3-11.3-50.5-32.5 c-2.4-17.6,3.1-31,17-40"/>
<g id="butterfly2">
<animate
attributeName="opacity"
keyTimes="0; 0.1; 0.95; 1"
values="0; 1; 1; 0"
dur="25s"
repeatCount="indefinite"/>
<animateTransform
attributeName="transform"
dur="25s"
values="
-55 0 0;
-55 0 0;
40 0 0
"
keyTimes="0; 0.9; 1"
repeatCount="indefinite"
type="rotate">
</animateTransform>
<path id="wing_x5F_bottom" class=" whiteBG blackOutline" d="M 22.2153 16.8339 c 0 0 2.1694 -15.7019 5.06093 -13.885 s 0.31366 17.6104 0.31366 17.6104 s 2.31694 -2.95601 7.12541 -4.72213 c 11.5322 -3.79672 19.0391 16.3965 -6.79317 15.0221">
<animate
attributeName="d"
dur=".8s"
repeatCount="indefinite"
values="
M22.3,16.8c0,0,2-16.1,4.9-14.3s0.5,18,0.5,18s2.3-3.1,7.1-4.9 c11.6-4,19.2,16.1-6.7,15.2;
M21.3,17.2c0,0,4-11.4,6.8-9.4s-1.7,13.4-1.7,13.4s2.5-1.4,7.4-2.8 C44.6,16.8,51.1,38,26,31.5;
M22.3,16.8c0,0,2-16.1,4.9-14.3s0.5,18,0.5,18s2.3-3.1,7.1-4.9 c11.6-4,19.2,16.1-6.7,15.2
">
</animate>
</path>
<g>
<path id="wing_x5F_top" class=" whiteBG blackOutline" d="M 23 18.4 c 0 0 7.75273 -11.7118 9.75273 -10.7118 s -6.65273 13.9117 -6.65273 13.9117 c 2.6 -2.4 13.7915 -6.08962 17.7339 3.69508 c 2.41858 9.27268 -16.3339 8.00492 -15.5339 7.10492">
<animate
attributeName="d"
dur=".8s"
repeatCount="indefinite"
values="
M23,18.4c0,0,8.1-11.5,10.1-10.5s-7,13.7-7,13.7c2.6-2.4,13.8-5.7,17.7,4 c2.3,8.9-16.3,7.7-15.5,6.8;
M23,18.4c0,0,4-14,6-13s-2.9,16.2-2.9,16.2c2.6-2.4,13.7-10.3,18.1,0.4 c3.7,13.3-16.7,11.3-15.9,10.4;
M23,18.4c0,0,8.1-11.5,10.1-10.5s-7,13.7-7,13.7c2.6-2.4,13.8-5.7,17.7,4 c2.3,8.9-16.3,7.7-15.5,6.8
">
</animate>
</path>
<path id="dot2_1_" class=" orangeBG blackOutline" d="M 29.0085 23.2492 c 2.21694 -0.80847 4.33388 1.71694 3.93388 2.92541 c -0.3 1.30847 -1.20847 1.91694 -3.02541 1.71694 s -2.31694 -3.32541 -1.51694 -3.93388">
<animate
attributeName="d"
dur=".8s"
repeatCount="indefinite"
values="
M29,23.3c2.2-0.8,4.3,1.7,3.9,2.9c-0.3,1.3-1.2,1.9-3,1.7s-2.3-3.3-1.5-3.9;
M29.1,22.7c2.4-0.9,4.7,1.9,4.3,3.2c-0.3,1.4-1.3,2.1-3.3,1.9s-2.5-3.6-1.7-4.3;
M29,23.3c2.2-0.8,4.3,1.7,3.9,2.9c-0.3,1.3-1.2,1.9-3,1.7s-2.3-3.3-1.5-3.9
">
</animate>
</path>
<path id="dot1_3_" class=" orangeBG blackOutline" d="M 36.1678 25.8746 c 0.60847 -0.60847 4.54235 -1.91694 5.04235 -0.1 c 0.50847 1.71694 0.4 2.92541 -2.52541 3.32541 C 35.6678 29.4 35.5593 26.4746 36.1678 25.8746 Z">
<animate
attributeName="d"
dur=".8s"
repeatCount="indefinite"
values="
M36.1,25.9c0.6-0.6,4.5-1.9,5-0.1c0.5,1.7,0.4,2.9-2.5,3.3C35.6,29.4,35.5,26.5,36.1,25.9z;
M36.9,25.6c0.7-0.7,5-2.1,5.5-0.1c0.6,1.9,0.4,3.2-2.8,3.6C36.4,29.4,36.2,26.2,36.9,25.6z;
M36.1,25.9c0.6-0.6,4.5-1.9,5-0.1c0.5,1.7,0.4,2.9-2.5,3.3C35.6,29.4,35.5,26.5,36.1,25.9z
">
</animate>
</path>
</g>
<g id="body_1_">
<path id="body" class=" whiteBG blackOutline" d="M20.9,20.2c0,0,4.2,12.3,6.1,15.4S25.4,18,20.7,16.4"/>
<path id="head_1_" class=" whiteBG blackOutline" d="M17.9,11.6c2.4-2.1,3.9,0.7,3.8,2.1c-0.1,1.4-1.1,3-2.6,2.8C17.6,16.2,15.5,13.7,17.9,11.6z"/>
<path id="us1_1_" class=" noBG blackOutline" d="M 9.8 0.56093 c 0 0 7.26093 3.59508 9.55246 10.2391">
<animate attributeName="d" dur=".8s" repeatCount="indefinite"
values="
M9.8,0.4c0,0,7.1,3.9,9.4,10.4;
M9.8,2.3c0,0,9,0.3,11.2,8.5;
M9.8,0.4c0,0,7.1,3.9,9.4,10.4
">
</animate>
</path>
<path id="us2_1_" class=" noBG blackOutline" d="M 0.40847 7.99481 c 5.14235 -0.1694 11.7068 0.70519 16.2068 4.70519">
<animate
attributeName="d"
dur=".8s"
repeatCount="indefinite"
values="
M0.4,7.8c5.1,0,11.8,0.9,16.3,4.9;
M0.5,10.1c5.6-2,10.7-1.4,15.2,2.6;
M0.4,7.8c5.1,0,11.8,0.9,16.3,4.9
">
</animate>
</path>
</g>
</g>
<g id="butterfly">
<animate attributeName="opacity"
keyTimes="0; 0.1; 0.95; 1"
values="0; 1; 1; 0"
dur="15s"
repeatCount="indefinite"/>
<animateTransform
attributeName="transform"
dur="15s"
values="
360 0 0;
360 0 0;
-55 0 0;
-55 0 0;
40 0 0
"
keyTimes="0; 0.3; 0.6; 0.9; 1"
repeatCount="indefinite"
type="rotate">
</animateTransform>
<path class=" noBG blackOutline" d="M2.3,11.8c4.9,0.9,9.1,2.8,12.8,5.6c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-5.5-16.2,0-16.7s8.9,16.2,5.9,15.2 C21.4,14,38.4,2.1,43.8,14.9c2.5,9.5-14.2,9.4-15,9.5c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c-1.1,7.6-4,14.7-11.4,13.7 c-8-2.7,1.4-18.4,3.3-15.4c1.6,2.4-18.5,2.3-18.1-4.4c1.6-5,10.1-3,19.3-0.1L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-3.2-6.3-3.4-10.7">
<animate
additive="replace"
attributeName="d"
dur="1.2s"
repeatCount="indefinite"
values="
M2.3,11.8c4.9,0.9,9.1,2.8,12.8,5.6c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-5.5-16.2,0-16.7s8.9,16.2,5.9,15.2 C21.4,14,38.4,2.1,43.8,14.9c2.5,9.5-14.2,9.4-15,9.5c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c-1.1,7.6-4,14.7-11.4,13.7 c-8-2.7,1.4-18.4,3.3-15.4c1.6,2.4-18.5,2.3-18.1-4.4c1.6-5,10.1-3,19.3-0.1L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-3.2-6.3-3.4-10.7;
M2.1,13.1c5-0.4,9.3,1.5,13,4.3c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-7.3-12.1-1.8-12.7s10.7,12.1,7.7,11.1 c-3.9-1.6,7.1-11.6,12.5,1.2c2.5,9.5-8.2,7.4-9.1,7.5c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c0.3,7.4-3.1,8.8-8.8,7.6 c-8-2.7-1.2-12.3,0.8-9.3c1.6,2.4-13.7,0.7-13.3-6.1c1.6-5,5.9-3,14.4,1.5L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-3.9-5.7-4.1-10;
M2.3,12c5-0.4,9.1,2.6,12.8,5.4c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-9.2-9.9-3.7-10.5s8.5,11.3,8.5,11.3 c-2.2-2,4.5-10.1,9.6,3.2c2.1,7.6-4.2,3-5.1,3.1c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c-0.2,5.3-1.8,5.1-4.1,4.5 c-8-2.7-2.8-9.7-3.4-6.1c-0.1,0.7-11.6-2.9-12-8.6c0.2-3.2,3.6-1.9,12.6,3.9L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-4.8-4.5-5-8.8;
M2.7,11.3c5-0.4,8.7,3.3,12.4,6.1c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.7-8.3-10.6-15.1-14.7c0,0-12.1-8.3-6.6-8.9s11.2,12.3,11.2,12.3 c-2.2-2-3.1-7.7,6.3,3c4.9,8-0.8,0.6-1.7,0.7c0,0,6.6,6.3,5.2,7.4c-1.5,1.1-7.3-3.5-7.3-3.5c1.2,1.3,0,1.6-1,0.8 c-8-2.7-7.5-9.8-3.3-4.2c-0.1,0.7-14.3-5.1-14.7-10.8c0.2-3.2,3.1,2.1,12.1,7.9L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-5.5-3.9-5.7-8.2;
M2.3,12c5-0.4,9.1,2.6,12.8,5.4c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-9.2-9.9-3.7-10.5s8.5,11.3,8.5,11.3 c-2.2-2,4.5-10.1,9.6,3.2c2.1,7.6-4.2,3-5.1,3.1c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c-0.2,5.3-1.8,5.1-4.1,4.5 c-8-2.7-2.8-9.7-3.4-6.1c-0.1,0.7-11.6-2.9-12-8.6c0.2-3.2,3.6-1.9,12.6,3.9L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-4.8-4.5-5-8.8;
M2.1,13.1c5-0.4,9.3,1.5,13,4.3c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-7.3-12.1-1.8-12.7s10.7,12.1,7.7,11.1 c-3.9-1.6,7.1-11.6,12.5,1.2c2.5,9.5-8.2,7.4-9.1,7.5c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c0.3,7.4-3.1,8.8-8.8,7.6 c-8-2.7-1.2-12.3,0.8-9.3c1.6,2.4-13.7,0.7-13.3-6.1c1.6-5,5.9-3,14.4,1.5L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-3.9-5.7-4.1-10;
M2.3,11.8c4.9,0.9,9.1,2.8,12.8,5.6c0.3,1.8,1.2,2.7,3.2,1.6l0.8-1.5c-1-2.1-2.2-2.3-3.6-1.1 c-0.9,1.5,0.5,3.3,2.2,3.1c5.6,6.8,11.1,12.1,16.9,12.5c0.4-2.4-8.3-10-15.1-14.7c0,0-5.5-16.2,0-16.7s8.9,16.2,5.9,15.2 C21.4,14,38.4,2.1,43.8,14.9c2.5,9.5-14.2,9.4-15,9.5c0,0,7.1,6.2,5.7,7.3c-1.5,1.1-7.8-3.4-7.8-3.4c-1.1,7.6-4,14.7-11.4,13.7 c-8-2.7,1.4-18.4,3.3-15.4c1.6,2.4-18.5,2.3-18.1-4.4c1.6-5,10.1-3,19.3-0.1L18,19.4c1.4-1,1.5-2.3,0-3.4l-1.8-0.4 c-2.6-2.4-3.2-6.3-3.4-10.7
">
</animate>
</path>
<path class=" orangeBG blackOutline" d="M32.3,15.7c0,0,1.9-3,4.5-2.5c1.8,0.4,3.9,1.7,2,4.5c-2,3-6.9,2.1-7.8,0c-1.1-2.5,1.5-3.4,1.5-3.4 M17.9,32.2 c0,0-2.5,1.5-2.1,3.7c0.3,1.5,1.4,3.2,3.7,1.7c2.5-1.6,1.8-5.7,0.1-6.4c-2-0.9-2.8,1.2-2.8,1.2">
<animate
additive="replace"
attributeName="d"
dur="1.2s"
repeatCount="indefinite"
values="
M32.3,15.7c0,0,1.9-3,4.5-2.5c1.8,0.4,3.9,1.7,2,4.5c-2,3-6.9,2.1-7.8,0c-1.1-2.5,1.5-3.4,1.5-3.4 M17.9,32.2 c0,0-2.5,1.5-2.1,3.7c0.3,1.5,1.4,3.2,3.7,1.7c2.5-1.6,1.8-5.7,0.1-6.4c-2-0.9-2.8,1.2-2.8,1.2;
M29.6,16.5c0,0,1.3-3.2,3-2.6c1.2,0.4,2.6,1.8,1.3,4.8c-1.3,3.2-4.7,2.2-5.2,0c-0.7-2.6,1-3.6,1-3.6 M19.9,30.2 c0,0-2.3,1.1-1.9,2.6c0.3,1.1,1.3,2.3,3.3,1.2c2.3-1.1,1.6-4,0.1-4.6c-1.9-0.7-2.6,0.8-2.6,0.8;
M27.4,18.8c0,0,0.5-2.3,1.1-1.9c0.5,0.3,1,1.3,0.5,3.5c-0.5,2.3-1.8,1.6-2,0c-0.3-1.9,0.4-2.6,0.4-2.6 M21.7,28.4c0,0-1.7,0.5-1.4,1.1c0.2,0.5,0.9,1,2.4,0.5c1.7-0.5,1.2-1.7,0.1-2c-1.4-0.3-1.9,0.3-1.9,0.3;
M27.1,22.7c0,0,0.1,0.3,0.2,0.3c0.1,0,0.2-0.2,0.1-0.5c-0.1-0.3-0.4-0.2-0.4,0c-0.1,0.3,0.1,0.4,0.1,0.4 M24.5,26.7c0,0-0.7,0-0.5,0c0.1,0,0.4,0,0.9,0c0.7,0,0.5,0,0,0c-0.5,0-0.7,0-0.7,0;
M27.4,18.8c0,0,0.5-2.3,1.1-1.9c0.5,0.3,1,1.3,0.5,3.5c-0.5,2.3-1.8,1.6-2,0c-0.3-1.9,0.4-2.6,0.4-2.6 M21.7,28.4c0,0-1.7,0.5-1.4,1.1c0.2,0.5,0.9,1,2.4,0.5c1.7-0.5,1.2-1.7,0.1-2c-1.4-0.3-1.9,0.3-1.9,0.3;
M29.6,16.5c0,0,1.3-3.2,3-2.6c1.2,0.4,2.6,1.8,1.3,4.8c-1.3,3.2-4.7,2.2-5.2,0c-0.7-2.6,1-3.6,1-3.6 M19.9,30.2 c0,0-2.3,1.1-1.9,2.6c0.3,1.1,1.3,2.3,3.3,1.2c2.3-1.1,1.6-4,0.1-4.6c-1.9-0.7-2.6,0.8-2.6,0.8;
M32.3,15.7c0,0,1.9-3,4.5-2.5c1.8,0.4,3.9,1.7,2,4.5c-2,3-6.9,2.1-7.8,0c-1.1-2.5,1.5-3.4,1.5-3.4 M17.9,32.2 c0,0-2.5,1.5-2.1,3.7c0.3,1.5,1.4,3.2,3.7,1.7c2.5-1.6,1.8-5.7,0.1-6.4c-2-0.9-2.8,1.2-2.8,1.2
">
</animate>
</path>
</g>
<animateMotion
xlink:href="#butterfly"
dur="15s"
repeatCount="indefinite"
path="M628,115.2c-55.5,14.2-106.3-18.8-155.5-69c-52.1-33.5-110.3-22.2-115.5,15c-3.3,27.6,14.2,37.4,45,36 c0,0,38.5,0.5,32-26s-35.5-19.5-35.5-19.5c-35,14-50.5,35.5-94.5,40c-75.7,13-146.1,23.3-198.5,25c-30.8,2.8-44.3-11.3-50.5-32.5 c-2.4-17.6,3.1-31,17-40" />
<animateMotion
xlink:href="#butterfly2"
dur="25s"
repeatCount="indefinite"
path="M629.5,114.4c-89.3,24-122.7-80-224.7-88.7c-66.7,4.7-56,42-176.7,76.7c-150.9,36.3-172.7,0.8-179.3-26 c-2.7-25.1,6.5-44.7,20-62.7" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment