Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save adg29/64d7e37ac33e13bceb14 to your computer and use it in GitHub Desktop.
Save adg29/64d7e37ac33e13bceb14 to your computer and use it in GitHub Desktop.
Test of animating external and inline svg file
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Display the source blob
Display the rendered blob
Raw
<?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>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment