examples/05101-jlect.svg

<svg id="kanjivg" width="106" height="126" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full"><defs><style type="text/css"><![CDATA[path.black { fill:none;stroke:black;stroke-width:5;stroke-linecap:round;stroke-linejoin:round; }path.grey { fill:none;stroke:#ddd;stroke-width:5;stroke-linecap:round;stroke-linejoin:round; }path.stroke { fill:none;stroke:black;stroke-width:5;stroke-linecap:round;stroke-linejoin:round; }rect { fill:none;stroke:#555;stroke-width:2;} text{font-size:16px;font-family:Segoe UI Symbol,Cambria Math,DejaVu Sans,Symbola,Quivira,STIX,Code2000;-webkit-touch-callout:none;cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select: none;} #reset { font-weight:bold; }]]></style><marker id="markerStart" markerWidth="8" markerHeight="8" style="overflow:visible;"><circle cx="0" cy="0" r="1.5" style="stroke:none;fill:red;fill-opacity:0.5;"/></marker><marker id="markerEnd" style="overflow:visible;"><circle cx="0" cy="0" r="0.8" style="stroke:none;fill:blue;fill-opacity:0.5;"><animate attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" /></circle></marker></defs><rect x="4" y="4" width="100" height="100" /><path d="M32.43,16.5c0.13,1.22,0.23,2.74-0.12,4.24C30.08,30.2,21.42,48.5,11,61.32" class="grey" /><path d="M26.46,41.61c0.62,0.64,0.79,2.05,0.79,3.37c0,13.58-0.3,41.88-0.3,51.01" class="grey" /><path d="M50.76,12.75c0.16,1.27-0.04,2.93-0.56,4.02c-3.28,6.94-7.43,12.81-14.95,21.26" class="grey" /><path d="M45.18,26.09c0.71,0.54,1.25,1.71,1.3,2.55c0.42,7.42-0.58,27-0.22,30.86" class="grey" /><path d="M71.79,12.05c0.04,0.53-0.01,1.23-0.15,1.69c-0.87,2.91-1.97,5.16-3.96,8.7" class="grey" /><path d="M46.28,26.26c8.22-0.7,40.91-4.28,44.44-4.66" class="grey" /><path d="M68.03,25.29c0.4,0.27,0.71,0.65,0.71,1.12c0,4.81,0.04,19.38-0.2,26.95" class="grey" /><path d="M47.38,35.88c7.75-0.58,35.8-3.31,39.13-3.63" class="grey" /><path d="M46.44,45.15c8.18-0.49,37.29-3.08,40.8-3.34" class="grey" /><path d="M46.44,55.42c8.22-0.7,43.54-3.13,47.06-3.51" class="grey" /><path d="M43.84,65.63c0.38,0.25,1.19,1.89,1.27,2.4c0.08,0.51-0.13,28.47-0.13,29.1" class="grey" /><path d="M44.92,67.25C46.75,67,55.7,64.89,58.28,64.5c1.65-0.25,2.75,0,2.75,2.5s0,7.5,0,9.25s-0.55,3,1.1,2.75c1.65-0.25,13-2.25,14.65-2.25" class="grey" /><path d="M74.72,61.44c0.35,0.96,0.7,1.45,0.7,2.73c0,1.29,0.27,11.86,0.27,12.51" class="grey" /><path d="M76.75,62.65c4.15-0.65,11.94-1.89,13.63-2.33c1.1-0.29,1.71,0.79,1.71,2.8c-0.01,7.12,0.12,18.12-0.31,29.6c-0.27,7.27-4.02,3.02-6.17,0.57" class="grey" /><path d="M32.43,16.5c0.13,1.22,0.23,2.74-0.12,4.24C30.08,30.2,21.42,48.5,11,61.32" class="stroke" stroke-dasharray="150"><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="0s" fill="freeze" /></path><path d="M26.46,41.61c0.62,0.64,0.79,2.05,0.79,3.37c0,13.58-0.3,41.88-0.3,51.01" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="1.3s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="1.3s" fill="freeze" /></path><path d="M50.76,12.75c0.16,1.27-0.04,2.93-0.56,4.02c-3.28,6.94-7.43,12.81-14.95,21.26" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="2.6s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="2.6s" fill="freeze" /></path><path d="M45.18,26.09c0.71,0.54,1.25,1.71,1.3,2.55c0.42,7.42-0.58,27-0.22,30.86" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="3.6s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="3.6s" fill="freeze" /></path><path d="M71.79,12.05c0.04,0.53-0.01,1.23-0.15,1.69c-0.87,2.91-1.97,5.16-3.96,8.7" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="4.6s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="4.6s" fill="freeze" /></path><path d="M46.28,26.26c8.22-0.7,40.91-4.28,44.44-4.66" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="5.5s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="5.5s" fill="freeze" /></path><path d="M68.03,25.29c0.4,0.27,0.71,0.65,0.71,1.12c0,4.81,0.04,19.38-0.2,26.95" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="6.6s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="6.6s" fill="freeze" /></path><path d="M47.38,35.88c7.75-0.58,35.8-3.31,39.13-3.63" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="7.6s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="7.6s" fill="freeze" /></path><path d="M46.44,45.15c8.18-0.49,37.29-3.08,40.8-3.34" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="8.6s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="8.6s" fill="freeze" /></path><path d="M46.44,55.42c8.22-0.7,43.54-3.13,47.06-3.51" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="9.7s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="9.7s" fill="freeze" /></path><path d="M43.84,65.63c0.38,0.25,1.19,1.89,1.27,2.4c0.08,0.51-0.13,28.47-0.13,29.1" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="10.899999999999999s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="10.899999999999999s" fill="freeze" /></path><path d="M44.92,67.25C46.75,67,55.7,64.89,58.28,64.5c1.65-0.25,2.75,0,2.75,2.5s0,7.5,0,9.25s-0.55,3,1.1,2.75c1.65-0.25,13-2.25,14.65-2.25" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="11.899999999999999s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="11.899999999999999s" fill="freeze" /></path><path d="M74.72,61.44c0.35,0.96,0.7,1.45,0.7,2.73c0,1.29,0.27,11.86,0.27,12.51" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="13.099999999999998s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="13.099999999999998s" fill="freeze" /></path><path d="M76.75,62.65c4.15-0.65,11.94-1.89,13.63-2.33c1.1-0.29,1.71,0.79,1.71,2.8c-0.01,7.12,0.12,18.12-0.31,29.6c-0.27,7.27-4.02,3.02-6.17,0.57" class="stroke" stroke-dasharray="150"><set attributeName="opacity" to="0" dur="13.999999999999998s" /><animate attributeName="stroke-dashoffset" from="150" to="0" dur="1.8s" begin="13.999999999999998s" fill="freeze" /></path><text x="90" y="120" id="reset">⟳</text><text x="70" y="120" id="pause">◼</text><script type="text/javascript"><![CDATA[function RecurringTimer(e,t){var n,r,i=t;this.pause=function(){window.clearTimeout(n);i-=new Date-r};var s=function(){r=new Date;n=window.setTimeout(function(){i=t;s();e()},i)};this.clear=function(){window.clearTimeout(n);i=t;n=window.setTimeout(function(){i=t;s();e()},i)};this.resume=s;this.resume()}function invoketimer(){timer=new RecurringTimer(function(){svg.setCurrentTime(0)},16400)}var svg=document.getElementById("kanjivg");var pause=document.getElementById("pause");var reset=document.getElementById("reset");var timer;invoketimer();reset.onclick=function(){svg.setCurrentTime(0);timer.clear();svg.unpauseAnimations();pause.innerHTML = "◼";};pause.onclick=function(){if(svg.animationsPaused()){svg.unpauseAnimations();timer.resume();pause.innerHTML="◼"}else{svg.pauseAnimations();timer.pause();pause.innerHTML="▶"}}]]></script></svg>