Skip to content

Instantly share code, notes, and snippets.

@paulmelero

paulmelero/Playing-with-SVG-painting.markdown

Forked from anonymous/Playing-with-SVG-painting.markdown
Created August 24, 2014 23:42
Show Gist options
  • Save paulmelero/adc1b5af9deeaf3a6253 to your computer and use it in GitHub Desktop.
Save paulmelero/adc1b5af9deeaf3a6253 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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);
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment