Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> 
<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js" ></script>
<body>
  <span class="si-icon-sun" data-icon-name="sun">
  </span> 
  <script>
    var svgIconConfig = {
        sun : { 
            url : 'http://web4slim.de/sun.svg',
            animation : [
              { 
                    el : 'path:nth-child(1)', 
                    animProperties : { 
                                from : { val : '{"path" : "M71.997,51.999h-3.998c-1.105,0-2-0.895-2-1.999s0.895-2,2-2h3.998 c1.105,0,2,0.896,2,2S73.103,51.999,71.997,51.999z"}' }, 
                                to : { val : '{"path" : "M64.142,38.688c-0.781,0.781-2.049,0.781-2.828,0 c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.142,38.688z"}'}
                    } 
              } ]
        }
​
}
  </script>
  <script src="http://tympanus.net/Development/AnimatedSVGIcons/js/svgicons.js"></script>
  <script type="text/javascript">
                (function(){
                new svgIcon( document.querySelector( '.si-icon-sun' ), svgIconConfig, {evtoggle : 'mouseover', size : { w : 100, h : 100 } } );
                })();
        </script>
</body> 
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
maisnamrajupro
0viewers