Adapted from http://plnkr.co/edit/LneUEK?p=preview
Tests for rendering and animating SVG via ajax, embedded object, use tag, and inline.
A Pen by Alan David Garcia on CodePen.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<link href="style.css" type="text/css" rel="stylesheet"/> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script> | |
<script> | |
$(function() { | |
var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF", "#ED1C24", "#FFF200", "#00A651", "#00AEEF", "#2E3192", "#EC008C", "#FF0000"]; | |
var container = $("#container"); | |
// var svgUrl = "http://rawgit.com/adg29/1e7460829be46be22035/raw/494de785a8083c074971c0ea336cf8b1fb5b7201/left-hands.svg"; | |
var svgUrl = "http://rawgit.com/adg29/64d7e37ac33e13bceb14/raw/2bf32b13530f2793bae5290adcb12e58d06a13d0/bad-trip.svg"; | |
var timeline = new TimelineMax({ | |
delay: 2, | |
repeat: -1 | |
}); | |
$.get(svgUrl) | |
.then(injectSvg) | |
.always(startAnimation); | |
function injectSvg(xmlDoc) { | |
var svg = $(xmlDoc).find("svg"); | |
container.append(svg); | |
} | |
function startAnimation() { | |
for (var i = 0; i < colors.length; i++) { | |
timeline.to(".gs-ani-path.gs-ani-fill", 1, { | |
fill: colors[i], | |
ease: Linear.ease | |
}); | |
} | |
} | |
}); | |
</script> | |
<title> | |
Test of animating external and inline svg file | |
</title> | |
<h2>Loaded via Ajax</h2> | |
<div id="container"></div> | |
<h2>Embedded Object <small>SVG is Encapsulated, External document</small></h2> | |
<div> | |
<object id="svg-object" data="bad-trip.svg" type="image/svg+xml"></object> | |
</div> | |
<h2>Use Tag <small>SVG is Encapsulated, No IE Support</small></h2> | |
<div> | |
<svg> | |
<use xlink:href="bad-trip.svg#bad-trip"></use> | |
</svg> | |
</div> | |
<h2>Inline SVG</h2> | |
<div> | |
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg version="1.1" id="bad-trip" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve"> | |
<g> | |
<g> | |
<path fill="#FDFCFC" d="M356.1,320.5c6.5,38.5,13,76.4,19,114.9c-5.9-1.8-11.3-4.1-16-4.7c-3.6-27.8-7.7-55.7-10.7-82.9 | |
c-0.6-5.3-2.4-10.7-2.4-16.6c0-3.6,0-5.9,4.1-7.1C351.3,322.8,353.1,321.7,356.1,320.5z"/> | |
<path fill="#FDFCFC" d="M167.7,335.3c5.9-18.4,4.7-38.5,18.4-53.9c1.8,1.8,0.6,4.1,0.6,5.9c-2.4,11.8-4.7,23.7-6.5,36.1 | |
c-3,16-6.5,32.6-8.9,48.6c-0.6,4.7-2.4,7.7-6.5,10.1c-3,1.8-5.3,4.1-8.9,5.9c2.4-10.7,4.7-20.1,7.1-30.2c0-0.6,0.6-1.8,0.6-1.8 | |
c7.7-1.2,4.1-10.1,10.1-12.4c-3-1.2-3.6,1.2-5.3,0c-0.6-3.6,1.8-5.9,3-8.9C170.1,334.7,168.9,334.7,167.7,335.3z"/> | |
<path fill="#FDFCFC" d="M328.8,197.9c7.1,0,7.7,4.1,8.3,8.9c3,20.7,6.5,41.5,10.1,62.2c0,1.2,0,1.8,0.6,3.6 | |
c-3.6-0.6-7.1-1.2-10.1-1.8C334.7,246.4,331.8,222.1,328.8,197.9z"/> | |
<path fill="#FDFCFC" d="M186.6,277.8c-4.1-10.7-7.7-20.7-1.8-31.4c3-5.9,5.3-13,7.7-19c2.4-7.1,7.1-13.6,5.3-23.1 | |
c3,3.6,2.4,6.5,1.8,8.9c-3.6,19-7.1,37.9-10.1,56.9C189,272.5,188.4,274.9,186.6,277.8z"/> | |
<path fill="#FDFCFC" d="M130.4,499.4c0-9.5,3-17.2,5.9-26.1c2.4,1.8,4.1,3.6,6.5,5.3c4.1,3.6,3.6,5.3,0,9.5 | |
C138.7,492.3,134.5,495.8,130.4,499.4z"/> | |
<path fill="#FDFCFC" d="M241.1,168.2c1.2,4.1-0.6,5.9-4.1,5.9c-8.3,0-16-1.8-24.3-3c-1.2-1.8-0.6-3.6-1.8-5.9 | |
C221.6,166.5,231.1,167.6,241.1,168.2z"/> | |
<path fill="#FDFCFC" d="M253,123.2c5.9,3,11.3,1.2,17.2,0c-1.2,6.5-4.1,11.3-5.9,17.2C260.1,134.5,256.5,128.5,253,123.2z"/> | |
<path fill="#FDFCFC" d="M328.8,392.7c0,1.2,1.2,1.8,2.4,3c1.8,1.8,1.2,4.7-1.2,4.7c-3,0.6-4.1,2.4-5.3,4.7c-1.2,1.8-3,3-4.7,3 | |
c-1.2,0-1.8-0.6-2.4-1.2c-0.6-1.2-0.6-2.4,0.6-3C322.3,401,322.9,393.9,328.8,392.7z"/> | |
<path fill="#FDFCFC" d="M286.7,90.6c-5.3,11.3-7.7,12.4-14.8,6.5C276.7,95.4,281.4,93,286.7,90.6z"/> | |
<path fill="#FDFCFC" d="M237,93c5.3,2.4,9.5,4.1,13.6,5.9C244.7,103.7,241.1,101.9,237,93z"/> | |
<path fill="#FDFCFC" d="M292.1,315.7c-1.8,4.1-1.8,4.1-7.1,3.6c0-2.4-0.6-5.3-0.6-7.7C287.9,310.4,289.1,314,292.1,315.7z"/> | |
<g> | |
<path class="gs-ani-path" fill="#311C29" d="M419.4,411.1c7.7,32.6,15.4,65.2,21.3,98.3c3.6,20.1,7.1,40.3,8.3,61c0.6,8.9,0,17.8-4.1,26.7 | |
c-5.9,11.3-12.4,17.8-24.9,21.3c0.6,3,3.6,3.6,4.7,6.5c-29,0-57.5,0-87.1,0c1.8,3,0,4.1-1.8,5.3c-6.5,4.1-12.4,8.3-20.1,9.5 | |
c-3,0.6-4.1,3.6-7.7,3.6c3.6,10.7,11.8,17.8,16.6,27.2c1.2,2.4,2.4,4.1,3.6,6.5c0.6,1.8,2.4,4.1,0,5.9c-2.4,1.8-4.7,2.4-7.7,0.6 | |
c-1.2-0.6-2.4-1.8-4.1-1.2c-0.6,7.1,7.1,9.5,8.9,15.4c0.6,1.2,2.4,0.6,4.1,0.6c11.3,0,21.9,0.6,33.2,0.6 | |
c13.6-0.6,17.2,4.7,16,17.8c-3,0-6.5,0-9.5,0c-1.8-1.2-0.6-3-1.8-4.7c-16.6,0-33.2,0-50.4,0c-0.6,4.1,0,8.9,0,13 | |
c0.6,16.6,1.2,33.2,1.8,50.4c0,1.8,0.6,3.6,0.6,5.3c0.6,2.4,0.6,5.3-1.8,7.1c-2.4,1.8-4.7,0.6-7.1,0c-5.3-2.4-10.7-5.3-16.6-7.7 | |
c-11.3-4.7-23.1-9.5-34.4-14.8c-2.4-1.2-4.7-1.2-7.1,0c-17.8,7.1-36.7,12.4-54.5,20.1c-5.9,2.4-10.1,0-10.1-7.1 | |
c0-10.7,0-21.9,0.6-32.6c0.6-11.3,1.2-22.5,1.8-34.4c-17.2-0.6-33.8-0.6-50.4-1.2c-0.6,0-1.2,0-1.8,0c-2.4,5.9-7.1,2.4-10.7,3 | |
c-2.4-10.1,2.4-16.6,12.4-16.6c14.8,0,29,0,44.4,0c1.8-4.7,8.9-7.7,7.1-14.8c-3,3-6.5,6.5-11.8,4.1c-0.6-2.4,0-4.7,1.2-6.5 | |
c1.8-4.1,3-7.7,3-12.4c0-6.5,2.4-8.9,7.1-8.9c0.6-4.7,1.2-8.9,4.7-13.6c-4.7,0-7.1-4.1-10.1-6.5c-4.7-3.6-10.1-5.9-14.8-8.9 | |
c-1.8-1.2-3.6-1.8-4.7-3c-2.4-2.4-4.1-5.3-1.2-8.9c-28.4,1.8-56.9,0.6-84.7,0c0-0.6,0-0.6-0.6-1.2c1.8-1.8,3.6-3,5.9-5.3 | |
c-9.5-0.6-16-3.6-20.7-11.3c-4.7-7.1-6.5-14.8-5.9-23.1c0.6-25.5,6.5-49.8,13.6-73.5c20.1-71.1,40.3-142.2,59.8-213.3 | |
c0-0.6,0.6-0.6,0.6-1.2c-3.6-17.2,8.9-27.8,17.2-39.7c1.2-1.8,2.4-3.6,2.4-5.9c3-13,4.7-26.1,8.3-39.1c0.6-3-0.6-3.6-3-3.6 | |
c-5.3-0.6-6.5-4.1-5.9-8.9c3.6-24.3,5.3-48.6,10.1-72.9c1.2-5.3,3.6-8.9,7.7-11.8c14.2-11.3,30.8-19,45.6-29.6 | |
c3-2.4,4.1-7.7,9.5-6.5c-1.8-10.1-4.7-19.5-7.1-29c-0.6-1.8-1.8-3.6-3-5.3c-7.1-10.7-3.6-17.8,5.9-22.5 | |
c18.4-8.3,37.3-11.8,58.1-7.1c8.3,1.8,16.6,4.7,23.7,10.1c6.5,4.7,9.5,11.3,3.6,17.8c-5.3,5.9-7.7,13.6-8.9,21.3 | |
c-5.9,26.1-38.5,39.1-59.2,23.1c-3-2.4-5.9-4.1-8.3-7.1c-1.2,1.8,0,3,0.6,4.1c14.8,16.6,31.4,20.7,50.9,5.9 | |
c4.1-3.6,8.3-7.1,11.3-11.8c2.4-3.6,5.3-3.6,7.1,0.6c0.6,1.8,2.4,2.4,3.6,3.6c16.6,10.1,33.2,20.7,50.9,30.2 | |
c8.3,4.7,11.3,11.8,11.8,19.5c1.2,7.7,1.2,16.6,3,24.3c2.4,10.7,1.8,22.5,5.9,33.2c1.8-1.8,3-3.6,5.3-4.1 | |
c4.7-2.4,10.1-3,14.8-1.2c10.7,4.1,20.1,10.1,30.2,16c1.2,0.6,3,1.8,2.4,3.6c-0.6,1.8-2.4,2.4-3.6,2.4c-3.6,0.6-5.9,0-8.9-2.4 | |
s-5.9-4.7-10.7-3c3,4.1,5.9,8.3,9.5,11.8c1.8,2.4,4.1,4.7,8.3,2.4c1.8-1.2,3.6,0,4.7,2.4c-3.6,2.4-1.8,7.1-4.1,10.1 | |
c-1.8,2.4-3,5.3-6.5,4.7c-1.8,0-2.4,0.6-3.6,1.8c-7.7,7.1-16.6,7.1-24.3,0.6c-1.8-1.2-3-4.1-5.9-3.6c-0.6,0.6-0.6,1.8,0,2.4 | |
c8.3,19.5,17.2,39.1,26.1,58.6c17.2,39.1,34.9,78.8,52.1,117.9c18.4,42.1,37.3,84.1,56.3,126.2c1.8,3.6,3.6,6.5,6.5,9.5 | |
c5.9,4.7,11.3,10.1,13.6,17.2c0.6,1.8,1.8,2.4,3.6,2.4c3,0,5.9,0,8.9,1.2c4.7,1.8,7.7,4.7,7.7,9.5c0,3.6,0,6.5-0.6,10.1 | |
c-1.2,8.3-1.2,8.3-9.5,9.5c-0.6,0-1.8,0-1.8,0c-1.2,6.5-8.3,4.1-11.3,8.3c-0.6,0.6-1.2,1.2-1.8,1.2c-9.5,1.2-11.8,8.9-14.8,16 | |
c-1.2,3.6-3,7.7-4.7,11.3c-1.8,3-4.7,7.1-10.1,7.1c-4.1,0-8.9,0-13.6,0c-0.6,26.7,1.2,53.3,1.2,80c-6.5,0-13,0-17.8,0 | |
c4.7-32.6,0-64.6,0.6-96.6c0-4.7-0.6-9.5-0.6-13.6c0-1.8,0-3.6-1.8-5.3c-4.1-4.1,2.4-3.6,3.6-5.3c-6.5-5.3-3-12.4-4.1-18.4 | |
c7.7-2.4,3.6,7.7,9.5,7.1c4.7-9.5,3-19-0.6-28.4c-16.6-44.4-36.1-88.3-53.9-132.1c-1.2-2.4-2.4-5.3-3.6-7.7c0-0.6,0-1.8-1.8-1.8 | |
C418.8,409.3,419.4,410.5,419.4,411.1z M292.1,315.7c1.8,0,3.6,0,5.3-0.6c-5.9-1.2-7.1-5.9-9.5-11.8c-0.6,4.1-5.9,4.1-3.6,8.3 | |
c0,2.4,0.6,5.3,0.6,7.7C289.7,319.9,289.7,319.9,292.1,315.7z M395.7,504.1c0.6,11.8,2.4,23.7-0.6,35.5c4.1,3,7.7,2.4,11.8,0.6 | |
c4.1-1.8,2.4-5.3,2.4-8.3c0.6-3.6,0-6.5,0-10.1c-0.6-7.7-1.2-15.4-1.2-23.1c2.4-1.2,4.7,0,6.5-1.8c5.3-4.7,5.3-21.3-0.6-26.1 | |
c-5.9,4.1,0,11.8-4.7,16.6c-0.6-7.7,0-14.8-1.2-21.9c-0.6-3-1.2-5.9-3.6-8.3c-3.6-3.6-6.5-3-8.3,1.8c-1.8,4.7-2.4,10.1-1.8,15.4 | |
c0.6,5.3,1.2,11.3-0.6,16.6c-2.4-0.6-3-2.4-3-3c1.2-3-1.2-5.3-0.6-8.3c0.6-3.6-1.2-5.9-4.1-6.5c-4.1-0.6-3.6,3.6-4.1,5.3 | |
c-0.6,4.1-0.6,8.3-0.6,12.4C383.3,499.4,386.3,502.9,395.7,504.1z M356.1,320.5c-2.4,1.2-4.1,2.4-6.5,3.6 | |
c-3.6,1.2-4.1,3.6-4.1,7.1c0.6,5.3,1.8,11.3,2.4,16.6c3.6,27.8,7.1,55.1,10.7,82.9c4.7,0.6,10.1,3,16,4.7 | |
C368.5,396.9,362.6,359,356.1,320.5z M167.7,335.3c1.8-0.6,2.4-0.6,3-0.6c-0.6,3-3.6,5.3-3,8.9c1.8,1.2,3-1.2,5.3,0 | |
c-5.9,2.4-2.4,11.3-10.1,12.4c-0.6,0-0.6,1.2-0.6,1.8c-2.4,10.1-4.7,20.1-7.1,30.2c3.6-1.2,5.9-4.1,8.9-5.9 | |
c4.1-2.4,5.9-5.3,6.5-10.1c3-16.6,5.9-32.6,8.9-48.6c2.4-11.8,4.7-23.7,6.5-36.1c0.6-1.8,1.2-4.1-0.6-5.9 | |
C172.4,296.8,173,316.9,167.7,335.3z M242.9,380.9c-1.2-2.4-0.6-4.7-0.6-6.5c-0.6-2.4,0-5.3-1.8-7.7c-2.4-3-4.7-2.4-5.9,0.6 | |
c-0.6,2.4-3,5.3-0.6,8.9c1.2,2.4,2.4,7.1-0.6,11.3c-1.2-4.7,0-8.9-2.4-12.4c-3.6-0.6-6.5,1.2-5.9,4.1c0.6,5.9-3,13,3.6,17.8h0.6 | |
c4.7-0.6,5.3,2.4,5.3,5.9c0,2.4,0,4.7,0,7.1c-0.6,4.1,2.4,5.3,5.3,5.3c3.6,0,4.7-2.4,4.7-5.9c0-5.9,0-12.4,0-18.4 | |
c0-1.2-0.6-3,1.2-3.6c6.5-1.8,4.1-7.1,4.1-11.3c0-1.8-1.2-4.1-3.6-3.6c-3.6,0-3.6,2.4-3.6,4.1 | |
C242.9,377.9,244.7,379.1,242.9,380.9z M328.8,197.9c3,24.3,5.9,48.6,8.9,72.9c3,0.6,5.9,1.2,10.1,1.8c0-1.8-0.6-3-0.6-3.6 | |
c-3.6-20.7-7.1-41.5-10.1-62.2C336.5,202,335.9,197.9,328.8,197.9z M256.5,706.7c0-3,0-5.3,0-8.3c0-4.1,0-8.3,3.6-11.8 | |
c3-2.4,1.8-10.1-1.2-13.6c-2.4,3-1.2,6.5-2.4,10.1c-2.4-4.1-1.8-7.7-1.2-11.3c1.2-7.1,4.7-14.2-3-21.3 | |
c-7.1,10.1-1.2,20.7-4.1,30.8c-1.8-2.4-1.2-4.7-1.2-7.1c0-2.4,0-5.3-1.2-7.7c-0.6-1.2-1.2-1.8-2.4-1.8c-1.2,0-1.8,0.6-1.8,1.8 | |
c-0.6,7.1-3,14.8,1.2,20.1c5.9,6.5,4.7,13,4.1,19.5C250,707.3,253,707.3,256.5,706.7z M186.6,277.8c1.8-3,2.4-5.3,3-7.7 | |
c3.6-19,7.1-37.9,10.1-56.9c0.6-2.4,1.2-5.3-1.8-8.9c1.2,9.5-3,16-5.3,23.1c-2.4,6.5-4.7,13-7.7,19 | |
C178.9,257.1,181.9,267.2,186.6,277.8z M260.7,318.1c8.9,2.4,10.7,1.2,9.5-7.1c-0.6-3-1.2-6.5,0-8.9c1.8-2.4,1.2-5.3,2.4-7.7 | |
c1.2-1.8-0.6-2.4-1.8-3.6c-1.2-1.8-1.8,0.6-3,1.2c-1.2-1.2-1.2-4.7-4.1-3.6c-2.4,0.6-1.2,3.6-1.8,5.3c-0.6,2.4,1.2,4.7-0.6,7.1 | |
c-1.8,0-0.6-3.6-3.6-2.4c-1.8,3-1.8,6.5,0.6,8.9C263.1,309.8,263.1,313.4,260.7,318.1z M363.8,237.5c4.7-3,5.3-9.5,1.2-13 | |
c-1.8,1.2-0.6,3.6-1.8,4.7c-1.2-3.6,0-8.3-4.7-10.7c-1.8,4.7-0.6,9.5-0.6,12.4c0-0.6-0.6-1.8-1.8-3c-1.8-1.2-3.6-1.2-3.6,1.2 | |
c0,3.6-1.2,8.3,1.8,9.5c4.7,2.4,5.3,5.9,5.3,10.1c0,1.8,1.2,3,3.6,2.4c2.4,0,2.4-1.8,2.4-3.6 | |
C364.3,244.1,363.8,241.1,363.8,237.5z M130.4,499.4c4.1-3.6,8.3-7.7,11.8-11.8c4.1-4.1,4.1-5.9,0-9.5c-1.8-1.8-4.1-3-6.5-5.3 | |
C133.3,482.2,130.4,490.5,130.4,499.4z M241.1,168.2c-10.1-0.6-19.5-1.8-30.2-3.6c0.6,2.4,0,4.1,1.8,5.9c7.7,1.8,16,3,24.3,3 | |
C241.1,173.6,242.9,172.4,241.1,168.2z M273.7,228.7c3.6,0,4.7-1.2,4.7-4.1c0-3.6-0.6-7.7,1.8-11.3c0.6-1.2,0.6-3-0.6-4.1 | |
c-1.8-1.8-4.1-6.5-5.9-4.1c-2.4,2.4-5.9,6.5-3,11.3C273.1,220.4,273.1,224.5,273.7,228.7z M253,123.2c3.6,5.3,7.1,11.3,11.3,17.2 | |
c2.4-5.9,5.3-11.3,5.9-17.2C264.2,124.4,258.3,126.2,253,123.2z M328.8,392.7c-5.9,1.8-6.5,8.3-11.3,11.3c-1.2,0.6-1.2,1.8-0.6,3 | |
c0.6,0.6,1.2,1.8,2.4,1.2c1.8-0.6,3.6-1.8,4.7-3c1.2-2.4,2.4-4.1,5.3-4.7c2.4-0.6,2.4-3,1.2-4.7 | |
C330.6,393.9,328.8,393.3,328.8,392.7z M286.2,219.2c2.4,0,6.5,1.8,6.5-2.4s-1.8-8.9-4.1-12.4 | |
C287.9,209.1,284.4,213.8,286.2,219.2z M286.7,90.6c-5.3,2.4-10.1,4.7-14.8,6.5C279,103.1,281.4,101.9,286.7,90.6z M237,93 | |
c4.1,8.9,7.7,10.7,13.6,5.9C246.5,97.1,242.3,95.4,237,93z M221,88.3c-3.6-1.8-4.7,0.6-5.3,3.6C218.6,92.4,221.6,92.4,221,88.3z | |
M322.9,97.7c-1.8-1.8-1.8-4.7-5.3-2.4C318.1,97.7,318.7,100.1,322.9,97.7z M209.7,95.4c-4.7,0-4.7,0-4.7,3.6 | |
C208,99.5,209.7,98.9,209.7,95.4z M331.2,103.7c0-3.6-1.8-4.1-4.7-3C327,103.1,327.6,104.8,331.2,103.7z M307.5,88.9 | |
c0.6,4.1,2.4,4.1,5.3,3C311,88.9,311,88.9,307.5,88.9z M199.1,101.9c-3-0.6-4.1,0.6-4.7,3.6C197.3,106,198.5,104.8,199.1,101.9z" | |
/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M395.7,504.1c-8.9-1.2-12.4-4.1-13-13.6c0-4.1,0-8.3,0.6-12.4c0.6-2.4,0-5.9,4.1-5.3c3,0.6,4.7,3,4.1,6.5 | |
c-0.6,3,1.8,5.3,0.6,8.3c0,0.6,0.6,3,3,3c1.8-5.3,1.2-11.3,0.6-16.6c-0.6-5.3-0.6-10.1,1.8-15.4c1.8-4.1,5.3-4.7,8.3-1.8 | |
c2.4,2.4,3,5.3,3.6,8.3c1.2,7.1,0.6,14.2,1.2,21.9c4.7-5.3-1.2-13,4.7-16.6c5.9,5.3,6.5,21.3,0.6,26.1c-1.8,1.8-4.1,0.6-6.5,1.8 | |
c-0.6,7.7,0.6,15.4,1.2,23.1c0,3.6,0.6,6.5,0,10.1c-0.6,3,1.8,6.5-2.4,8.3c-4.1,1.8-8.3,2.4-11.8-0.6 | |
C397.5,527.8,396.3,516,395.7,504.1z"/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M242.9,380.9c1.8-1.2,0.6-2.4,0.6-3.6c0-1.8,0-4.1,2.4-4.7c2.4-0.6,3.6,1.8,3.6,3.6 | |
c0,4.1,2.4,8.9-4.1,11.3c-1.8,0.6-1.2,2.4-1.2,3.6c0,5.9,0,12.4,0,18.4c0,3.6-1.2,5.9-4.7,5.9c-3,0-5.9-1.2-5.3-5.3 | |
c0-2.4,0-4.7,0-7.1c0-3.6-0.6-6.5-5.3-5.9h-0.6c-7.1-4.7-3-11.8-3.6-17.8c-0.6-3,2.4-4.7,5.9-4.1c2.4,3.6,1.2,7.7,2.4,12.4 | |
c3-4.1,2.4-8.3,0.6-11.3c-1.8-3.6,0-5.9,0.6-8.9c1.2-3,3.6-3,5.9-0.6c1.8,2.4,1.2,4.7,1.8,7.7 | |
C242.3,376.2,241.1,378.5,242.9,380.9z"/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M256.5,706.7c-3.6,1.2-5.9,0.6-8.3-0.6c0-7.1,1.2-13.6-4.1-19.5c-4.1-4.7-1.8-13-1.2-20.1 | |
c0-0.6,0.6-1.8,1.8-1.8c1.2,0,1.8,1.2,2.4,1.8c1.2,2.4,0.6,5.3,1.2,7.7c0,2.4,0,4.7,1.2,7.1c3-10.1-3-20.7,4.1-30.8 | |
c7.7,7.1,4.1,14.2,3,21.3c-0.6,4.1-1.2,7.7,1.2,11.3c1.2-3.6,0-7.1,2.4-10.1c3,3.6,4.1,11.3,1.2,13.6c-4.1,3.6-3.6,7.7-3.6,11.8 | |
C256.5,701.4,256.5,703.7,256.5,706.7z"/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M260.7,318.1c2.4-4.1,2.4-7.7-1.8-11.3c-3-2.4-2.4-5.9-0.6-8.9c3-1.2,1.8,2.4,3.6,2.4 | |
c1.8-2.4,0.6-4.7,0.6-7.1c0-1.8-1.2-4.1,1.8-5.3c3-1.2,3,2.4,4.1,3.6c1.2,0,1.2-3,3-1.2c0.6,1.2,2.4,1.8,1.8,3.6 | |
c-1.2,2.4-0.6,5.3-2.4,7.7c-1.8,2.4-0.6,5.9,0,8.9C271.3,318.7,269.6,320.5,260.7,318.1z"/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M363.8,237.5c0.6,3.6,0.6,6.5,1.2,10.1c0,1.8,0,3.6-2.4,3.6c-1.8,0-3.6-0.6-3.6-2.4 | |
c0-4.1-0.6-7.7-5.3-10.1c-2.4-1.8-1.8-6.5-1.8-9.5c0-2.4,1.8-2.4,3.6-1.2c1.2,1.2,1.8,2.4,1.8,3c0-3-1.2-7.7,0.6-12.4 | |
c5.3,2.4,3.6,7.1,4.7,10.7c1.2-1.2-0.6-3.6,1.8-4.7C369.1,228.1,368.5,234.6,363.8,237.5z"/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M273.7,228.7c-0.6-4.7-0.6-8.9-3-12.4c-3-4.1,0.6-8.9,3-11.3c2.4-2.4,4.1,2.4,5.9,4.1 | |
c0.6,0.6,1.2,3,0.6,4.1c-2.4,3.6-1.8,7.7-1.8,11.3C278.5,227.5,277.3,229.2,273.7,228.7z"/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M286.2,219.2c-2.4-5.9,1.8-10.1,2.4-14.8c2.4,4.1,4.1,8.3,4.1,12.4C292.7,221,288.5,219.2,286.2,219.2z" | |
/> | |
<path class="gs-ani-path gs-ani-fill" fill="#C9478F" d="M292.1,315.7c-2.4-1.8-4.1-5.3-7.7-4.1c-1.8-4.1,3.6-4.1,3.6-8.3c2.4,5.9,4.1,10.7,9.5,11.8 | |
C295.6,315.7,293.9,315.7,292.1,315.7z"/> | |
</g> | |
<path fill="#FDFCFC" d="M221,88.3c0,4.1-2.4,4.1-5.3,3.6C216.3,88.9,217.4,86.5,221,88.3z"/> | |
<path fill="#FDFCFC" d="M322.9,97.7c-4.1,1.8-4.7,0-5.3-2.4C320.5,93,321.1,96,322.9,97.7z"/> | |
<path fill="#FDFCFC" d="M209.7,95.4c-0.6,3.6-2.4,4.1-4.7,3.6C205.6,96,205.6,96,209.7,95.4z"/> | |
<path fill="#FDFCFC" d="M331.2,103.7c-3,0.6-4.1-1.2-4.7-3C329.4,99.5,331.2,100.1,331.2,103.7z"/> | |
<path fill="#FDFCFC" d="M307.5,88.9c3.6,0,3.6,0,5.3,3C309.9,93,308.1,93,307.5,88.9z"/> | |
<path fill="#FDFCFC" d="M199.1,101.9c0,3.6-1.8,4.1-4.7,3.6C194.9,102.5,196.1,101.3,199.1,101.9z"/> | |
<path fill="#FDFCFC" d="M419.4,411.1c0-0.6-0.6-1.8-0.6-2.4c1.8,0,1.2,1.2,1.8,1.8C420,410.5,419.4,410.5,419.4,411.1z"/> | |
</g> | |
</g> | |
</svg> | |
</div> | |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
<!-- Created with Inkscape (http://www.inkscape.org/) --> | |
<svg | |
xmlns:dc="http://purl.org/dc/elements/1.1/" | |
xmlns:cc="http://creativecommons.org/ns#" | |
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |
xmlns:svg="http://www.w3.org/2000/svg" | |
xmlns="http://www.w3.org/2000/svg" | |
version="1.1" | |
preserveAspectRatio="xMinYMin meet" | |
viewBox="0 0 202 282" | |
id="left-hand" | |
class="left-hand"> | |
<defs | |
id="defs3062" /> | |
<g | |
transform="translate(-3.9365484,0.71573604)" | |
id="g3068"> | |
<path | |
d="M 89.69264,263.54978 C 88.761688,262.61883 88,261.19255 88,260.38027 88,259.56798 87.061749,257.01263 85.914997,254.70169 84.768246,252.39076 82.936748,247.35 81.845001,243.5 80.10637,237.36879 70.416999,216.4413 67.906482,213.39504 67.405634,212.78731 65.880504,210.1924 64.517305,207.62857 60.093249,199.30806 54.194992,192.26242 45.745442,185.205 34.140909,175.51242 28.201948,168.68312 23.058311,159.11675 c -2.442929,-4.54348 -7.392929,-11.66379 -11,-15.82293 -3.6070711,-4.15913 -7.4261629,-8.68549 -8.4868707,-10.05856 -2.4069664,-3.1158 -3.22519903,-11.72432 -1.5863718,-16.69002 2.6620175,-8.06599 9.8705365,-6.93012 22.2340325,3.5035 4.554495,3.84356 9.516803,8.63298 11.027352,10.64316 C 40.48354,137.6612 48.15174,145 50.196764,145 c 2.372135,0 2.382652,0.0668 -2.204763,-14 C 44.970748,121.73567 43.47417,117.48775 37.070451,100 35.358544,95.325 32.370525,85.66979 30.430407,78.543977 28.49029,71.418164 26.481429,65.080087 25.966273,64.459361 24.293778,62.444128 22.000308,47.716018 22.001725,39 c 0.0018,-11.110263 1.901217,-15.365775 7.051582,-15.798639 4.686897,-0.393912 7.741098,2.084769 13.457781,10.921856 6.697557,10.353364 11.199751,19.818303 12.88641,27.091036 0.824965,3.557178 2.637148,9.48889 4.027074,13.181583 1.389926,3.692693 3.888403,11.42504 5.552172,17.182994 4.549344,15.74432 11.666811,30.39736 14.773256,30.41434 0.6875,0.004 1.255768,-0.78067 1.262817,-1.74317 C 81.043853,116.01256 76.622821,98.537885 70.956205,80.5 58.024772,39.336858 57,34.95941 57,20.884243 57,9.3145437 57.039055,9.1144394 59.706719,7.0160552 67.26339,1.0719766 77.489365,13.668106 82.425057,35 c 1.417928,6.128237 4.089136,14.223745 5.664674,17.167664 0.567898,1.061127 2.367022,8.32 3.998054,16.130829 3.133879,15.007797 7.845369,30.037096 11.113585,35.451507 2.41509,4.00104 6.79874,4.64584 6.79846,1 -2.1e-4,-2.78241 -2.5794,-16.184005 -3.89719,-20.25 -0.53476,-1.65 -2.06639,-9.3 -3.4036,-17 -1.33722,-7.7 -3.380387,-16.25 -4.540367,-19 C 88.595716,25.828804 87.74982,22.899432 88.41422,14.754556 89.212558,4.9677404 90.259245,2.2240217 93.505223,1.4093332 c 4.045404,-1.01533179 11.115717,1.5048585 15.807117,5.6343997 6.9395,6.1083931 9.46887,10.5819591 11.22888,19.8599711 0.87231,4.598476 2.19352,9.313838 2.93602,10.478581 0.74249,1.164743 1.83886,4.030215 2.43638,6.367715 0.59751,2.3375 1.58934,6.1625 2.20408,8.5 1.97755,7.519535 2.99934,14.956836 3.88118,28.25 1.35682,20.45298 2.83177,35.60874 3.94145,40.5 2.47395,10.90471 3.74471,14.5 5.12502,14.5 0.78906,0 3.30735,-3.375 5.59621,-7.5 2.28886,-4.125 5.58338,-9.3 7.32115,-11.5 1.73778,-2.2 5.16104,-6.7 7.60726,-10 2.44622,-3.3 5.50234,-7.125 6.79138,-8.5 1.28904,-1.375 5.1703,-6.681307 8.62501,-11.791794 C 183.7552,76.224798 185.17335,75 189.98392,75 c 10.548,0 12.40369,7.447895 6.93085,27.8172 -1.69687,6.31558 -3.45631,12.20286 -3.90986,13.08284 C 190.22984,121.28422 184,135.36402 184,136.25165 c 0,0.58276 -1.06597,2.45712 -2.36882,4.16525 -1.30285,1.70812 -4.28217,6.91114 -6.62071,11.56227 -3.65859,7.27658 -8.93266,15.55137 -18.82601,29.53721 -1.80525,2.55202 -2.51948,5.42901 -3.24098,13.05509 -1.09169,11.5389 -0.38615,16.90528 4.64769,35.35106 4.00947,14.69208 3.87209,15.6245 -2.44165,16.57254 -10.04907,1.50892 -19.56163,3.80563 -22.43974,5.41785 -1.76538,0.98891 -5.90978,2.3616 -9.20978,3.05044 -3.3,0.68883 -7.35,1.67702 -9,2.19598 -1.65,0.51895 -6.76168,1.60628 -11.35928,2.41628 -6.092654,1.0734 -8.819725,2.04135 -10.057364,3.56977 -1.595294,1.9701 -1.80053,1.99458 -3.390716,0.40439 z" | |
class="gs-ani-path gs-ani-fill" | |
fill="#02ee99" /> | |
<path | |
d="M 89.69264,263.54978 C 88.761688,262.61883 88,261.19255 88,260.38027 88,259.56798 87.061749,257.01263 85.914997,254.70169 84.768246,252.39076 82.936748,247.35 81.845001,243.5 80.10637,237.36879 70.416999,216.4413 67.906482,213.39504 67.405634,212.78731 65.880504,210.1924 64.517305,207.62857 60.093249,199.30806 54.194992,192.26242 45.745442,185.205 34.140909,175.51242 28.201948,168.68312 23.058311,159.11675 c -2.442929,-4.54348 -7.392929,-11.66379 -11,-15.82293 -3.6070711,-4.15913 -7.4261629,-8.68549 -8.4868707,-10.05856 -2.4069664,-3.1158 -3.22519903,-11.72432 -1.5863718,-16.69002 2.6620175,-8.06599 9.8705365,-6.93012 22.2340325,3.5035 4.554495,3.84356 9.516803,8.63298 11.027352,10.64316 C 40.48354,137.6612 48.15174,145 50.196764,145 c 2.372135,0 2.382652,0.0668 -2.204763,-14 C 44.970748,121.73567 43.47417,117.48775 37.070451,100 35.358544,95.325 32.370525,85.66979 30.430407,78.543977 28.49029,71.418164 26.481429,65.080087 25.966273,64.459361 24.293778,62.444128 22.000308,47.716018 22.001725,39 c 0.0018,-11.110263 1.901217,-15.365775 7.051582,-15.798639 4.686897,-0.393912 7.741098,2.084769 13.457781,10.921856 6.697557,10.353364 11.199751,19.818303 12.88641,27.091036 0.824965,3.557178 2.637148,9.48889 4.027074,13.181583 1.389926,3.692693 3.888403,11.42504 5.552172,17.182994 4.549344,15.74432 11.666811,30.39736 14.773256,30.41434 0.6875,0.004 1.255768,-0.78067 1.262817,-1.74317 C 81.043853,116.01256 76.622821,98.537885 70.956205,80.5 58.024772,39.336858 57,34.95941 57,20.884243 57,9.3145437 57.039055,9.1144394 59.706719,7.0160552 67.26339,1.0719766 77.489365,13.668106 82.425057,35 c 1.417928,6.128237 4.089136,14.223745 5.664674,17.167664 0.567898,1.061127 2.367022,8.32 3.998054,16.130829 3.133879,15.007797 7.845369,30.037096 11.113585,35.451507 2.41509,4.00104 6.79874,4.64584 6.79846,1 -2.1e-4,-2.78241 -2.5794,-16.184005 -3.89719,-20.25 -0.53476,-1.65 -2.06639,-9.3 -3.4036,-17 -1.33722,-7.7 -3.380387,-16.25 -4.540367,-19 C 88.595716,25.828804 87.74982,22.899432 88.41422,14.754556 89.212558,4.9677404 90.259245,2.2240217 93.505223,1.4093332 c 4.045404,-1.01533179 11.115717,1.5048585 15.807117,5.6343997 6.9395,6.1083931 9.46887,10.5819591 11.22888,19.8599711 0.87231,4.598476 2.19352,9.313838 2.93602,10.478581 0.74249,1.164743 1.83886,4.030215 2.43638,6.367715 0.59751,2.3375 1.58934,6.1625 2.20408,8.5 1.97755,7.519535 2.99934,14.956836 3.88118,28.25 1.35682,20.45298 2.83177,35.60874 3.94145,40.5 2.47395,10.90471 3.74471,14.5 5.12502,14.5 0.78906,0 3.30735,-3.375 5.59621,-7.5 2.28886,-4.125 5.58338,-9.3 7.32115,-11.5 1.73778,-2.2 5.16104,-6.7 7.60726,-10 2.44622,-3.3 5.50234,-7.125 6.79138,-8.5 1.28904,-1.375 5.1703,-6.681307 8.62501,-11.791794 C 183.7552,76.224798 185.17335,75 189.98392,75 c 10.548,0 12.40369,7.447895 6.93085,27.8172 -1.69687,6.31558 -3.45631,12.20286 -3.90986,13.08284 C 190.22984,121.28422 184,135.36402 184,136.25165 c 0,0.58276 -1.06597,2.45712 -2.36882,4.16525 -1.30285,1.70812 -4.28217,6.91114 -6.62071,11.56227 -3.65859,7.27658 -8.93266,15.55137 -18.82601,29.53721 -1.80525,2.55202 -2.51948,5.42901 -3.24098,13.05509 -1.09169,11.5389 -0.38615,16.90528 4.64769,35.35106 4.00947,14.69208 3.87209,15.6245 -2.44165,16.57254 -10.04907,1.50892 -19.56163,3.80563 -22.43974,5.41785 -1.76538,0.98891 -5.90978,2.3616 -9.20978,3.05044 -3.3,0.68883 -7.35,1.67702 -9,2.19598 -1.65,0.51895 -6.76168,1.60628 -11.35928,2.41628 -6.092654,1.0734 -8.819725,2.04135 -10.057364,3.56977 -1.595294,1.9701 -1.80053,1.99458 -3.390716,0.40439 z m 13.52933,-11.62729 c 3.14708,-1.00174 7.31455,-2.12012 9.26104,-2.48528 1.9465,-0.36517 3.78567,-1.06292 4.08705,-1.55057 0.30139,-0.48765 2.70438,-0.88664 5.33999,-0.88664 2.63561,0 9.33883,-1.125 14.89604,-2.5 5.55722,-1.375 11.21245,-2.5 12.56718,-2.5 6.69631,0 7.29899,-3.778 2.50833,-15.72397 -2.64675,-6.59992 -3.2307,-9.66662 -3.86087,-20.27603 -0.89471,-15.06331 0.15573,-21.78339 4.39295,-28.10335 11.5855,-17.28014 14.69775,-22.18506 17.12072,-26.98231 1.50406,-2.97789 3.99619,-7.25484 5.53809,-9.50435 4.77939,-6.97277 16.39654,-34.50329 19.45292,-46.099874 1.79539,-6.812114 1.13836,-12.884511 -1.54977,-14.323152 -3.3263,-1.780182 -5.7176,-1.084966 -7.78405,2.263036 -3.9597,6.415382 -10.82929,15.58708 -18.69937,24.96581 -4.40427,5.24856 -10.43923,13.94459 -13.411,19.32452 C 146.73846,139.02287 144.98556,141 141.14804,141 c -2.55235,0 -3.17312,-0.70913 -5.90898,-6.75 -1.68136,-3.7125 -3.74528,-10.35 -4.58649,-14.75 -1.52858,-7.99529 -3.46504,-29.677071 -3.66182,-41 -0.0573,-3.3 -0.52339,-7.880151 -1.03564,-10.178114 -0.51225,-2.297963 -1.57215,-8.443648 -2.35534,-13.657077 -0.78318,-5.21343 -2.34312,-11.556848 -3.46652,-14.096485 -1.1234,-2.539637 -3.0157,-8.093952 -4.2051,-12.342923 -2.86758,-10.244077 -8.08076,-17.661398 -15.76018,-22.4236264 -4.806231,-2.9804827 -6.319395,-1.1227032 -6.938113,8.5182344 -0.415586,6.47572 -0.144038,8.187691 2.063565,13.009732 5.241068,11.447998 10.904718,30.181766 12.740888,42.143269 1.01855,6.635236 3.00251,16.492488 4.4088,21.905004 2.7709,10.664626 3.25043,17.528446 1.35689,19.421986 -0.66,0.66 -3.08264,1.2 -5.38364,1.2 -3.5748,0 -4.68294,-0.55267 -7.61461,-3.79767 C 96.592118,103.54276 91.108113,88.868826 88.019517,74 84.830617,58.6483 74.512348,24.809151 70.943938,18 69.935121,16.075 67.990301,13.15 66.622116,11.5 64.550811,9.0020546 63.830386,8.6873163 62.317253,9.6192986 57.086532,12.841051 62.844994,42.582611 75.957868,80.070951 81.370849,95.5461 86,113.92842 86,119.94819 c 0,4.73688 -0.117684,4.93555 -3.605671,6.08668 -2.849335,0.94037 -4.109249,0.92048 -6.006379,-0.0948 C 72.090765,123.64025 65.136648,110.93417 61.643503,99 60.758082,95.975 58.881977,89.45 57.474381,84.5 56.066785,79.55 54.502429,74.6 53.998035,73.5 53.493641,72.4 52.099698,68.125 50.900385,64 48.274114,54.967027 43.807569,44.760227 40.646883,40.56904 39.373939,38.881068 37.08988,35.3625 35.571197,32.75 33.497125,29.182097 32.216189,28 30.42403,28 c -3.224182,0 -3.79688,2.760424 -3.179798,15.326738 0.383593,7.811511 1.257572,12.49479 3.764673,20.173262 1.795807,5.5 4.50552,14.5 6.021585,20 1.516064,5.5 4.647701,14.725 6.959193,20.5 7.092261,17.71921 14.078336,43.26282 12.142754,44.39829 -0.34784,0.20405 -2.534822,0.68576 -4.859959,1.07046 -5.435174,0.89926 -8.365636,-1.09948 -16.358081,-11.15713 C 23.070659,123.40753 20.56212,120.86121 15.314077,118.41613 12.461819,117.08726 9.6814622,116 9.1355056,116 7.1695791,116 5,119.20206 5,122.10355 c 0,4.94956 2.4059912,9.14796 9.613631,16.77553 C 20.857697,145.48694 28,155.2455 28,157.16893 c 0,3.6312 16.549822,22.44793 26,29.56135 6.860982,5.16445 11.220778,10.87825 18.518495,24.26972 7.434601,13.64265 10.236144,19.94927 12.634355,28.44147 1.078155,3.8178 2.574529,8.0928 3.325277,9.5 0.750747,1.40719 1.624921,3.38187 1.942608,4.38817 0.649453,2.05719 2.586533,1.84426 12.801235,-1.40715 z" | |
id="left-hand-stroke" | |
style="fill:#222921" /> | |
</g> | |
</svg> |
body { | |
font-family: sans-serif; | |
} | |
h2 { | |
color: #444; | |
border-bottom: 1px solid #aaa; | |
font-size: 18px; | |
margin: 18px 0 6px; | |
} | |
small { | |
color: #888; | |
font-weight: normal; | |
margin-left: 10px; | |
} | |
svg, | |
#svg-object { | |
border: 2px solid crimson; | |
height: 200px; | |
padding: 10px 5px 0 10px; | |
} | |
/*** SVG Styles ***/ | |
.left-hand { | |
border-color: green; | |
} | |
path.left-hand-palm { | |
fill: blue; | |
} |
Adapted from http://plnkr.co/edit/LneUEK?p=preview
Tests for rendering and animating SVG via ajax, embedded object, use tag, and inline.
A Pen by Alan David Garcia on CodePen.