index.html

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.2, 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">
<div class="containter">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="283.464px" height="283.464px" viewBox="0 0 283.464 283.464" style="enable-background:new 0 0 283.464 283.464;"
	 xml:space="preserve">
<g id="fuera">
	<g id="_x3C_Path_x3E_">
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="81.0767" y1="247.8472" x2="198.4457" y2="44.5581">
			<stop  offset="0.1675" style="stop-color:#F2F2F2"/>
			<stop  offset="0.1754" style="stop-color:#F0F0F0"/>
			<stop  offset="0.2735" style="stop-color:#D5D5D5"/>
			<stop  offset="0.3737" style="stop-color:#C2C2C2"/>
			<stop  offset="0.4767" style="stop-color:#B7B7B7"/>
			<stop  offset="0.5863" style="stop-color:#B3B3B3"/>
			<stop  offset="0.5989" style="stop-color:#B7B7B7"/>
			<stop  offset="0.6925" style="stop-color:#D1D1D1"/>
			<stop  offset="0.789" style="stop-color:#E3E3E3"/>
			<stop  offset="0.8895" style="stop-color:#EEEEEE"/>
			<stop  offset="1" style="stop-color:#F2F2F2"/>
		</linearGradient>
		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="139.6855" y1="264.4517" x2="139.6855" y2="27.9521">
			<stop  offset="0" style="stop-color:#333333"/>
			<stop  offset="0.1225" style="stop-color:#363636"/>
			<stop  offset="0.2139" style="stop-color:#404040"/>
			<stop  offset="0.2951" style="stop-color:#505050"/>
			<stop  offset="0.3705" style="stop-color:#666666"/>
			<stop  offset="0.4418" style="stop-color:#848484"/>
			<stop  offset="0.5101" style="stop-color:#A8A8A8"/>
			<stop  offset="0.5748" style="stop-color:#D2D2D2"/>
			<stop  offset="0.601" style="stop-color:#E5E5E5"/>
			<stop  offset="1" style="stop-color:#666666"/>
		</linearGradient>
		<path style="fill:url(#SVGID_1_);stroke:url(#SVGID_2_);stroke-width:0.5;stroke-miterlimit:10;" d="M243.001,140.749
			c0,0-84.274-0.042-112.359-0.047c-6.627-0.001-12,5.373-12,12v28c0,6.627,5.373,12,12,12h61.3
			c-12.69,14.883-31.354,24.3-52.178,24.3c-38.233,0-69.227-31.698-69.227-70.8c0-39.102,30.994-70.8,69.227-70.8
			c28.578,0,53.084,17.719,63.645,42.996c0.171,0.409,0.327,0.825,0.49,1.238c1.875,4.082,5.937,6.915,10.743,6.915h23.903
			c6.62,0,13.301-5.425,12.389-11.979c0-0.007-0.004-0.014-0.006-0.021c-13.525-49.797-58.165-86.349-111.165-86.349
			c-63.722,0-115.378,52.83-115.378,118s51.656,118,115.378,118c61.579,0,111.885-49.338,115.2-111.471
			c0.006-0.109,0.02-0.219,0.021-0.328C255.049,145.934,249.512,140.749,243.001,140.749z"/>
	</g>
</g>
<g id="dentro">
	<path style="fill:#136799;" d="M140.451,38.202c-56.809,0-106.309,42.246-106.309,107.416c0,65.17,42.945,110.333,106.667,110.333
		c56.833,0,101.667-48.833,101.646-92.504c0-0.11,0.02-0.22,0.02-0.329c0.066-6.469-5.471-11.654-11.982-11.654l-89.694-0.105
		c-6.627-0.002-12.348,4.967-12.348,11.594v7.25c0,6.627,5.373,12.25,12,12.25h67.207c-12.391,33-46.304,44.05-67.128,44.05
		c-38.233,0-75.137-27.675-75.137-80.8c0-49,37.642-76.375,75.875-76.375c28.577,0,55.472,13.57,66.032,38.847
		c0.171,0.409,0.327,0.825,0.49,1.238c1.875,4.082,5.937,6.915,10.743,6.915l8.875-0.125c6.621,0,13.888-5.742,11.734-12
		C215.611,35.806,140.451,38.202,140.451,38.202z"/>
	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="217.5767" y1="68.667" x2="62.2879" y2="223.9557">
		<stop  offset="0" style="stop-color:#E5E5E5;stop-opacity:0.8"/>
		<stop  offset="0.0679" style="stop-color:#C0CFD7;stop-opacity:0.8163"/>
		<stop  offset="0.1631" style="stop-color:#92B3C7;stop-opacity:0.8392"/>
		<stop  offset="0.262" style="stop-color:#6B9CB9;stop-opacity:0.863"/>
		<stop  offset="0.3635" style="stop-color:#4B89AD;stop-opacity:0.8873"/>
		<stop  offset="0.4683" style="stop-color:#327AA4;stop-opacity:0.9125"/>
		<stop  offset="0.5776" style="stop-color:#216F9E;stop-opacity:0.9388"/>
		<stop  offset="0.6946" style="stop-color:#16699A;stop-opacity:0.9669"/>
		<stop  offset="0.8325" style="stop-color:#136799"/>
	</linearGradient>
	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="138.3096" y1="256.4507" x2="138.3096" y2="37.6919">
		<stop  offset="0" style="stop-color:#333333"/>
		<stop  offset="0.025" style="stop-color:#444444"/>
		<stop  offset="0.1025" style="stop-color:#767676"/>
		<stop  offset="0.1821" style="stop-color:#A0A0A0"/>
		<stop  offset="0.2623" style="stop-color:#C2C2C2"/>
		<stop  offset="0.3436" style="stop-color:#DDDDDD"/>
		<stop  offset="0.4261" style="stop-color:#F0F0F0"/>
		<stop  offset="0.5108" style="stop-color:#FBFBFB"/>
		<stop  offset="0.601" style="stop-color:#FFFFFF"/>
		<stop  offset="0.8679" style="stop-color:#666666"/>
	</linearGradient>
	<path style="fill:url(#SVGID_3_);stroke:url(#SVGID_4_);stroke-miterlimit:10;" d="M140.451,38.202
		c-56.809,0-106.309,42.246-106.309,107.416c0,65.17,42.945,110.333,106.667,110.333c56.833,0,101.667-48.833,101.646-92.504
		c0-0.11,0.02-0.22,0.02-0.329c0.066-6.469-5.471-11.654-11.982-11.654l-89.694-0.105c-6.627-0.002-12.348,4.967-12.348,11.594v7.25
		c0,6.627,5.373,12.25,12,12.25h67.207c-12.391,33-46.304,44.05-67.128,44.05c-38.233,0-75.137-27.675-75.137-80.8
		c0-49,37.642-76.375,75.875-76.375c28.577,0,55.472,13.57,66.032,38.847c0.171,0.409,0.327,0.825,0.49,1.238
		c1.875,4.082,5.937,6.915,10.743,6.915l8.875-0.125c6.621,0,13.888-5.742,11.734-12C215.611,35.806,140.451,38.202,140.451,38.202z
		"/>
</g>
</svg>
</div>

Playing-with-SVG-painting.markdown

Playing with SVG painting

A Pen by Bravo on CodePen.

License.

script.js

// Collect svg g (layers) into an array
var g = document.getElementsByTagName('g');

for (var i = 0; i < g.length; i++) {
  // Start with 100%
  g[i].style.fillOpacity = "1";
  g[i].onmouseleave = function() {
  this.style.fillOpacity = "1"; 
  }
  //Smooth effect when rolled over
  g[i].onmouseover = function() {
  this.style.fillOpacity = "0.75"; 
  }
}

// And a function which will fill the svg g
var fill = function(p) {
    var i = 0
    window.setInterval(function() {
      if( p.length == i) {return}
      p[i].style.fillOpacity = "1";
      i ++
    }, 3);
};

fill(g);

style.css

body {background-color:#bada55;
text-align:center;}

.container {
  position: relative;
}
svg {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}