<div class="contain-fruit">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" class="icon" version="1.1" width="100" height="100" viewBox="0"><path fill="url(#Gradient1)" stroke="url(#Gradient1)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M49.8 22.9c0 0-3.8-7 2.9-16.9M65.4 16.2c-5.7-0.5-11.3 2.5-15.8 7.9 -5-5.5-11-8.5-16.9-7.6 -12.7 1.9-20.3 20.8-17.1 42.1s16.2 37 28.8 35.1c2.3-0.3 4.4-1.2 6.3-2.6 2.3 1.6 4.7 2.6 7.4 2.9 12.8 1.2 24.8-15.3 26.8-36.7C86.9 35.7 78.2 17.3 65.4 16.2z"/>
    <!--Begin Apple Gradient-->
    <defs>
      <radialGradient id="Gradient1" cx="45%" cy="45%" fx="30%" fy="30%">
        <stop offset="0%" stop-color="#f9a5a5" />
        <stop offset="50%" stop-color="#f98585" />
        <stop offset="100%" stop-color="#f96b6b" />
      </radialGradient>
    </defs> 
    <!--End Apple Gradient-->
  </svg>

  <svg class="icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100" height="100" viewBox="0"><path fill="url(#Gradient2)" stroke="url(#Gradient2)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M80.72 49.23c0-6.3-5.11-11.41-11.41-11.41 -0.37 0-0.74 0.02-1.1 0.05 0.71-1.48 1.1-3.14 1.1-4.88 0-4.1-2.17-7.7-5.42-9.71 -3.6 4.81-8.92 9.18-14.72 5.45 -0.01-0.01-0.02-0.01-0.03-0.02 -0.49-0.32-0.94-0.65-1.35-1.01 -1.36-1.19-2.23-2.56-2.57-3.99 -1.87-1.34-4.16-2.13-6.63-2.13 -6.3 0-11.41 5.11-11.41 11.41 0 2.6 0.87 4.99 2.33 6.91 -5.74 0.59-10.23 5.45-10.23 11.35 0 6.24 5.02 11.32 11.24 11.41 -1 1.7-1.58 3.68-1.58 5.79 0 6.3 5.11 11.41 11.41 11.41 0.11 0 0.22 0 0.33-0.01 -0.22 0.87-0.33 1.79-0.33 2.73 0 6.3 5.1 11.4 11.41 11.4 6.3 0 11.4-5.1 11.4-11.4 0-2.15-0.59-4.16-1.62-5.87 5.4-0.9 9.52-5.59 9.52-11.25 0-1.73-0.39-3.37-1.08-4.84C75.97 60.28 80.72 55.31 80.72 49.23zM45.22 23.71c0 0-3.98-5.68 1.2-17.69M71.6 8.57c-1.61 3.7-3.17 7.33-5.18 10.85 -0.7 1.22-1.55 2.56-2.53 3.86 -3.6 4.81-8.92 9.18-14.72 5.45 -0.01-0.01-0.02-0.01-0.03-0.02 -0.49-0.32-0.94-0.65-1.35-1.01 -1.36-1.19-2.23-2.56-2.57-3.99 -0.08-0.38-0.14-0.76-0.15-1.15 -0.08-2 0.87-4.07 2.96-5.9 4.36-3.82 8.48-4.19 13.95-3.29C61.98 13.37 69.01 14.52 71.6 8.57z"/>
    <!--Begin Grape Gradient-->
    <defs>
      <radialGradient id="Gradient2" cx="60%" cy="60%" fx="75%" fy="75%" r="45%">
        <stop offset="0%" stop-color="#a595d8" />
        <stop offset="20%" stop-color="#a595d8" />
        <stop offset="40%" stop-color="#8979ba" />
        <stop offset="60%" stop-color="#7363a5" />
        <stop offset="80%" stop-color="#605091" />
        <stop offset="100%" stop-color="#3e3168" />
      </radialGradient>
      <radialGradient id="Gradient2.5" x1="0" y1="0" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#3e3168" />
        <stop offset="60%" stop-color="#7363a5" />
        <stop offset="90%" stop-color="#8979ba" />
      </radialGradient>
    </defs> 
    <!--End Apple Gradient-->
  </svg>

  <svg class="icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100" height="100" viewBox="0"><path fill="url(#Gradient3)" stroke="#f97821" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M51.1 19c-0.2-1.6 0.4-3.4 2-5.1 3.3-3.5 6.6-4.1 11.2-3.8 0 0 5.8 0.4 7.5-4.7 -1 3.2-2 6.2-3.4 9.3 -2.2 4.9-7 12.3-13.5 8.9C52.6 22.6 51.3 20.9 51.1 19zM44 28.1c0 0 4.7-0.2 8.7-5.9M45.2 30.7c0 0-4-4 1-15.6M50 30.3c17.7 0 32 14.3 32 32S67.7 94.4 50 94.4 18 80.1 18 62.4 32.3 30.3 50 30.3z"/>
    <!--Begin Orange Gradient-->
    <defs>
      <radialGradient id="Gradient3" fx="30%" fy="30%" gradientUnits="userSpaceOnUse">
        <stop stop-color="#f9caaa" offset="0"/>
        <stop stop-color="#f9caaa" offset="20%"/>
        <stop stop-color="#f9ae7a" offset="20%"/>
        <stop stop-color="#f9ae7a" offset="40%"/>
        <stop stop-color="#f79959" offset="40%"/>  
        <stop stop-color="#f79959" offset="60%"/>  
        <stop stop-color="#fc9149" offset="60%"/>  
        <stop stop-color="#fc9149" offset="80%"/>  
        <stop stop-color="#f79959" offset="80%"/>  
        <stop stop-color="#f97821" offset="90%"/>
        <stop stop-color="#f97821" offset="100%"/>  
      </radialGradient>
    </defs> 
    <!--End Orange Gradient-->
  </svg>
</div>

<p class="p">Demo by Joni Trythall. <a href="http://www.sitepoint.com/getting-started-svg-gradients/">See article</a>.</p>

/* Basic styling */
body {
  background: #f3f3f3;
}
.contain-fruit {
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
}

.icon {
  margin-right: 40px;
}

.icon:last-child {
  margin-right: 0;
}

.p {
  text-align: center;
  font-family: Arial, sans-serif;
}