<svg id="svg">
  <defs>
    <linearGradient
       id="background">
      <stop
         style="stop-color:#f0ac22;stop-opacity:0.5;"
         offset="0"
         id="outer" />
      <stop
         style="stop-color:#6c0f00;stop-opacity:1;"
         offset="1"
         id="inner" />
    </linearGradient>
    
    <radialGradient
       inkscape:collect="always"
       xlink:href="#background"
       id="radialBackground"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.93780968,0,0,0.8962851,-55.53029,-147.88994)"
       cx="355.5737"
       cy="529.10315"
       fx="355.5737"
       fy="529.10315"
       r="400.02042" />
  </defs>
      <rect
       style="fill:url(#radialBackground);fill-opacity:1;stroke:none"
       id="rect5339"
       width="500.0"
       height="400.0"
       x="0.0"
       y="0.0" />
  
  <g id="head">
    <path
       style="fill:#f7d6b1;fill-opacity:1;stroke:none"
       d="m 141.37208,95.576471 c 39.28572,0.35715 62.58564,19.315479 62.14285,47.857139 -0.31655,20.40484 -34.2857,43.57142 -65.71428,43.57142 -32.17458,0 -62.896458,-20.56109 -62.857138,-43.57142 0.0537,-31.42935 27.142858,-48.214279 66.428568,-47.857139 z"
       id="path5261"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="zsssz" />
    <path
       style="fill:#000000;fill-opacity:0.09803922;stroke:none"
       d="m 104.94351,125.21932 c 0,0 21.42858,-4.28571 20.71429,8.57143 -0.71428,12.85715 -16.42857,16.42857 -21.42857,15 -4.999996,-1.42857 -11.428568,-6.42857 -10.714288,-12.14285 0.71429,-5.71429 5.714292,-10 11.428568,-11.42858 z"
       id="path5265"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#000000;fill-opacity:0.09803922;stroke:none"
       d="m 175.28205,125.77199 c 0,0 -21.42858,-4.28571 -20.71429,8.57143 0.71428,12.85715 16.42857,16.42857 21.42857,15 5,-1.42857 11.42857,-6.42857 10.71429,-12.14285 -0.71429,-5.71429 -5.71429,-10 -11.42857,-11.42858 z"
       id="path5265-2"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#000000;fill-opacity:0.09652512;stroke:none"
       d="m 156.37208,150.21932 c 0,0 -7.85715,14.28572 -17.85715,14.28572 -7.14285,0 -14.2857,-12.85714 -14.2857,-12.85714 0,0 21.42857,15.71428 20.71428,-3.57143 -0.71429,-19.28571 3.57142,-24.28572 3.57142,-24.28572 0,0 -4.28571,21.42858 0.71429,26.42858 5,5 7.14286,-1e-5 7.14286,-1e-5 z"
       id="path5285"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cscscsc" />
    <path
       style="fill:#ffffff;fill-opacity:1;stroke:none"
       d="m 161.37208,138.11218 c 0.126,-5.16441 3.40571,-7.93823 9.28572,-8.03571 6.70462,-0.11115 9.90658,4.36622 9.82143,8.74999 -0.0764,3.93189 -4.6677,7.4573 -9.10715,7.50001 -5.48747,0.0528 -10.10522,-3.90184 -10,-8.21429 z"
       id="path5287"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ssass" />
    <path
       style="fill:#ffffff;fill-opacity:1;stroke:none"
       d="m 119.55162,137.32764 c -0.126,-5.16441 -3.40571,-7.93823 -9.28572,-8.03571 -6.70462,-0.11115 -9.90658,4.36622 -9.82143,8.74999 0.0764,3.93189 4.6677,7.4573 9.10715,7.50001 5.48747,0.0528 10.10522,-3.90184 10,-8.21429 z"
       id="path5287-3"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ssass" />
    <path
       style="fill:#7a5d2f;fill-opacity:0.98039216;stroke:none"
       d="m 124.12175,169.69238 c 0,0 4.17469,3.96677 16.81086,3.08006 12.63618,-0.88672 21.2485,-4.74137 21.2485,-4.74137 0,0 -8.33918,2.28099 -17.97887,2.71518 -9.6397,0.43418 -20.08049,-1.05387 -20.08049,-1.05387 z"
       id="path5307"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       d="m 109.12056,136.08451 c 1.18059,-0.58592 3.47726,0.82829 3.32633,2.1376 -0.14562,1.26318 -2.58479,2.05128 -3.59418,1.27801 -0.90658,-0.69451 -0.75512,-2.90792 0.26785,-3.41561 z"
       id="path5309"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="aaaa" />
    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       d="m 170.38371,135.89619 c 1.18059,-0.58592 3.47726,0.82829 3.32633,2.1376 -0.14562,1.26318 -2.58479,2.05128 -3.59419,1.27801 -0.90658,-0.69451 -0.75512,-2.90792 0.26786,-3.41561 z"
       id="path5309-1"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="aaaa" />
    <g
       id="open"
       transform="translate(-277.14286,-108.57143)">
      <path
         inkscape:connector-curvature="0"
         id="path5426"
         d="m 399.28572,223.07647 c 0,0 -4.28571,-6.42857 -11.78571,-6.07143 -7.5,0.35714 -15.35714,10.35714 -15.35714,10.35714 0,0 8.57142,-7.5 15,-7.14285 6.42857,0.35714 12.14285,2.85714 12.14285,2.85714 z"
         style="fill:#691e10;fill-opacity:1;stroke:none" />
      <path
         inkscape:connector-curvature="0"
         id="path5426-8"
         d="m 435,225.40507 c 0,0 4.28571,-6.42857 11.78571,-6.07143 7.5,0.35714 15.35714,10.35714 15.35714,10.35714 0,0 -8.57142,-7.5 -15,-7.14285 C 440.71428,222.90507 435,225.40507 435,225.40507 z"
         style="fill:#691e10;fill-opacity:1;stroke:none" />
    </g>
    <g id="blink"
       id="g5477"
       transform="translate(-277.14286,-108.57143)">
        <path
           style="fill:#691e10;fill-opacity:1;stroke:none"
           d="m 369.28572,229.86219 c 0,0 7.5,-4.08 14.64285,-4.30666 7.14286,-0.22666 13.92857,0.68 13.92857,0.68 0,0 2.5,0.22666 2.5,1.36 0,1.13333 -8.21428,0.68 -8.21428,0.68 0,0 -11.07143,-0.45334 -14.64286,0.22666 -3.57143,0.68 -8.21428,1.36 -8.21428,1.36 z"
           id="path5385"
           inkscape:connector-curvature="0" />
        <path
           style="fill:#691e10;fill-opacity:1;stroke:none"
           d="m 465.17857,231.67655 c 0,0 -7.5,-4.07999 -14.64285,-4.30665 -7.14286,-0.22666 -13.92857,0.68 -13.92857,0.68 0,0 -2.5,0.22666 -2.5,1.35999 0,1.13333 8.21428,0.68 8.21428,0.68 0,0 11.07143,-0.45334 14.64286,0.22666 3.57143,0.68 8.21428,1.36 8.21428,1.36 z"
           id="path5385-6"
           inkscape:connector-curvature="0" />
      <path
         inkscape:connector-curvature="0"
         id="path5457"
         d="m 376.78572,245.57647 19.64285,-3.21429 c 0,0 -0.35714,-6.42857 -7.5,-6.42857 -7.14285,0 -12.85714,3.57143 -13.92857,7.14286 -1.07143,3.57143 1.78572,2.5 1.78572,2.5 z"
         style="fill:#dfc1a0;fill-opacity:1;stroke:none" />
      <path
         inkscape:connector-curvature="0"
         id="path5457-8"
         d="m 457.02265,245.67971 -19.64285,-3.21429 c 0,0 0.35714,-6.42857 7.5,-6.42857 7.14285,0 12.85714,3.57143 13.92857,7.14286 1.07143,3.57143 -1.78572,2.5 -1.78572,2.5 z"
         style="fill:#dfc1a0;fill-opacity:1;stroke:none" />
    </g>
  </g>
</svg>

<h1><strong>SVG</strong> is very flexible!</h1>
<p>Click on the <strong>head</strong> to change <strong>background</strong>.</p>
<p>Graphic created with Inkscape and directly pasted to codepen.</p>
<p>This is just a <em>quick test</em>, the posibilities are endless.</p>

body {
  font-family:sans-serif;
  color:#444;
}

#svg { 
  float:left;
  width:500px;
  height:400px;
  margin:-.5em 2em .5em 0;
  box-shadow:0 4px 10px 4px rgba(0,0,0,0.2);
  border:4px solid white;
  border-radius:8px;
}
#head {
  cursor:pointer;
}
#blink {
  transition:opacity .25s ease;
  opacity:1.0;
}

#open {
  opacity:0.0;
  transition:opacity .25s ease;
}
#head:hover #blink {
  opacity:0.0;
}
#head:hover #open {
  opacity:1.0;
}
h1 {
  font-weight:normal;
}

$("#head").bind("click",function(e) {  
  randomBackground();
  e.preventDefault();
  return false;
});

var $background = $("#background");

var randomBackground = function() {
  $background.find("#outer").css("stopColor",getRandomColor());
  $background.find("#inner").css("stopColor",getRandomColor());
  
  $background.hide(0);
  $background.show(0);
};

function getRandomColor(){
  var c = '#'+Math.random().toString(16).substr(-6);
 return c;
}