Animated Gradient Line Icons (CSS only)

animated-gradient-line-icons-css-only.markdown

Animated Gradient Line Icons (CSS only)

A Pen by Medialoot on CodePen.

License.

index.html

<section id="controls" class="gradient-one">
  <div class="gradients">
    <div data-class="gradient-one" class="gradient one selected"></div>
    <div data-class="gradient-two"class="gradient two"></div>
    <div data-class="gradient-three"class="gradient three"></div>
    <div data-class="gradient-four"class="gradient four"></div>
  </div>
  <div class="icons">
    <span class="gradient-icon">
<svg style="opacity:.8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 52">
  <g>
  <rect class="cls-1" x="1" y="1" width="60" height="38" rx="2" ry="2"/>
  <rect class="cls-1" x="15" y="5" width="42" height="30"/>
  <circle class="cls-1" cx="8" cy="20" r="3"/><line class="cls-1" x1="5" y1="11" x2="11" y2="11"/>
  <line class="cls-1" x1="5" y1="7" x2="11" y2="7"/>
  <line class="cls-1" x1="5" y1="33" x2="11" y2="33"/>
  <line class="cls-1" x1="5" y1="29" x2="11" y2="29"/>
  <line class="cls-1" x1="48" y1="8" x2="54" y2="14"/>
  <line class="cls-1" x1="52" y1="8" x2="54" y2="10"/>
  <path class="cls-1" d="M16,44H46a2,2,0,0,1,2,2v0a2,2,0,0,1-2,2H16a0,0,0,0,1,0,0V44A0,0,0,0,1,16,44Z"/>
  <polygon class="cls-1" points="16 48 16 44 11 46 16 48"/>
  <line class="cls-1" x1="32" y1="44" x2="32" y2="48"/>
  <line class="cls-1" x1="18" y1="51" x2="39" y2="51"/>
  <line class="cls-1" x1="42" y1="51" x2="45" y2="51"/>
  </g>
  </svg>
   <div class="icons-after"></div>
  </span>

    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 62"><defs></defs><title>idea-light-bulb</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M45,27A18,18,0,1,0,21.13,44H21V55a3,3,0,0,0,3,3h6a3,3,0,0,0,3-3V44h-.13A18,18,0,0,0,45,27Z"/><line class="cls-1" x1="27" y1="49" x2="27" y2="33"/><line class="cls-1" x1="22" y1="28" x2="27" y2="33"/><line class="cls-1" x1="32" y1="28" x2="27" y2="33"/><line class="cls-1" x1="27" y1="1" x2="27" y2="5"/><line class="cls-1" x1="8.62" y1="8.62" x2="11.44" y2="11.44"/><line class="cls-1" x1="1" y1="27" x2="5" y2="27"/><line class="cls-1" x1="8.62" y1="45.38" x2="11.44" y2="42.56"/><line class="cls-1" x1="45.38" y1="45.38" x2="42.56" y2="42.56"/><line class="cls-1" x1="53" y1="27" x2="49" y2="27"/><line class="cls-1" x1="45.38" y1="8.62" x2="42.56" y2="11.44"/><line class="cls-1" x1="19" y1="49" x2="35" y2="49"/><line class="cls-1" x1="19" y1="53" x2="35" y2="53"/><path class="cls-1" d="M25,58h4a0,0,0,0,1,0,0v1a2,2,0,0,1-2,2h0a2,2,0,0,1-2-2V58A0,0,0,0,1,25,58Z"/><path class="cls-1" d="M38.3,23A12,12,0,0,0,31,15.7"/></g></g></svg>
     <div class="icons-after"></div>
  </span>

    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 62"><defs></defs><title>easel</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="19" y="6" width="12" height="4"/><rect class="cls-1" x="1" y="38" width="48" height="4"/><line class="cls-1" x1="25" y1="1" x2="25" y2="6"/><line class="cls-1" x1="25" y1="42" x2="25" y2="58"/><line class="cls-1" x1="38" y1="42" x2="44" y2="61"/><line class="cls-1" x1="12" y1="42" x2="6" y2="61"/><line class="cls-1" x1="8.53" y1="53" x2="41.47" y2="53"/><polygon class="cls-1" points="3 38 16.75 25.99 24.59 31.99 36.92 20 47 29.82 47 37.98 3 38"/><circle class="cls-1" cx="14" cy="18" r="3"/><polygon class="cls-1" points="31 8 31 10 19 10 19 8 3 8 3 38 47 38 47 8 31 8"/></g></g></svg>
     <div class="icons-after"></div>
  </span><br/>

    <!-- <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 62"><defs></defs><title>sketchbook</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="29" y="1" width="4" height="60"/><rect class="cls-1" x="5" y="27" width="4" height="8"/><rect class="cls-1" x="9" y="27" width="4" height="8"/><path class="cls-1" d="M29,2H3A2,2,0,0,0,1,4V56H29Z"/><path class="cls-1" d="M35,2H33V56h2a4,4,0,0,0,4-4V6A4,4,0,0,0,35,2Z"/><rect class="cls-1" x="1" y="23" width="28" height="16"/><rect class="cls-1" x="33" y="23" width="6" height="16"/><path class="cls-1" d="M29,56H1v2a2,2,0,0,0,2,2H29Z"/><path class="cls-1" d="M35,56H33v4h2a4,4,0,0,0,4-4V52A4,4,0,0,1,35,56Z"/></g></g></svg>
<br/>
     <div class="icons-after"></div>
  </span><br/> -->

    <span class="gradient-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 62"><defs></defs><title>seo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="58" y1="61" x2="40" y2="61"/><line class="cls-1" x1="37" y1="61" x2="35" y2="61"/><circle class="cls-1" cx="21" cy="21" r="20"/><path class="cls-1" d="M60.12,60.12h0a3,3,0,0,1-4.24,0L37,41.27,41.27,37,60.12,55.88A3,3,0,0,1,60.12,60.12Z"/><line class="cls-1" x1="35.14" y1="35.14" x2="39.15" y2="39.15"/><line class="cls-1" x1="39.86" y1="44.1" x2="44.1" y2="39.86"/><line class="cls-1" x1="13" y1="25" x2="13" y2="30"/><line class="cls-1" x1="17" y1="22" x2="17" y2="30"/><line class="cls-1" x1="21" y1="23" x2="21" y2="30"/><line class="cls-1" x1="25" y1="20" x2="25" y2="30"/><line class="cls-1" x1="29" y1="16" x2="29" y2="30"/><polyline class="cls-1" points="13 21 17 17 21 19 25 16 29 11"/></g></g></svg>
     <div class="icons-after"></div>
  </span>

    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 62"><defs></defs><title>color-swatches</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="19" y1="15" x2="1" y2="15"/><line class="cls-1" x1="12.58" y1="29" x2="1" y2="29"/><path class="cls-1" d="M19,3a2,2,0,0,0-2-2H3A2,2,0,0,0,1,3V45a2,2,0,0,1,2-2H4.49L19,17.88Z"/><line class="cls-1" x1="37.56" y1="21.73" x2="21.97" y2="12.73"/><line class="cls-1" x1="26.87" y1="31.72" x2="14.97" y2="24.85"/><line class="cls-1" x1="12.87" y1="39.8" x2="7.97" y2="36.97"/><path class="cls-1" d="M8.78,42.16,34.26,27.45l9.3-16.11a2,2,0,0,0-.73-2.73l-12.12-7A2,2,0,0,0,28,2.33L4.49,43H8A2,2,0,0,1,8.78,42.16Z"/><line class="cls-1" x1="49.27" y1="39.56" x2="40.27" y2="23.97"/><line class="cls-1" x1="35.09" y1="43" x2="28.15" y2="30.97"/><line class="cls-1" x1="18.93" y1="43" x2="16.03" y2="37.97"/><path class="cls-1" d="M43.32,43l16.35-9.44a2,2,0,0,0,.73-2.73l-7-12.12A2,2,0,0,0,50.67,18L8.78,42.16A2,2,0,0,0,8,43Z"/><rect class="cls-1" x="22" y="22" width="18" height="60" rx="2" ry="2" transform="translate(-21 83) rotate(-90)"/><circle class="cls-1" cx="7.5" cy="54.5" r="2.5"/><line class="cls-1" x1="16" y1="49" x2="41" y2="49"/><line class="cls-1" x1="16" y1="53" x2="31" y2="53"/><line class="cls-1" x1="46" y1="49" x2="51" y2="49"/></g></g></svg>
     <div class="icons-after"></div>
  </span>

    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.48 60.28"><defs></defs><title>paint-brush</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M20.46,53.86C15,59.39,3.93,60.66,1,57.78,5.76,52.84,2.16,46.51,7.48,41.1c3.82-3.88,9.82-4.18,13.4-.65S24.28,50,20.46,53.86Z"/><path class="cls-1" d="M59.59,1.85a3,3,0,0,0-4-.17L33.92,19.56A79.9,79.9,0,0,0,20.39,33.83l-2,2.66a2.13,2.13,0,0,0-.2,2.19,8.37,8.37,0,0,1,4.6,4.7l0,0a2.13,2.13,0,0,0,2.79.17l2.63-2a79.9,79.9,0,0,0,14-13.76l17.52-22A3,3,0,0,0,59.59,1.85Z"/><line class="cls-1" x1="6.45" y1="59.26" x2="28.45" y2="59.26"/><line class="cls-1" x1="31.45" y1="59.26" x2="33.45" y2="59.26"/><path class="cls-1" d="M18.88,46.34s-.36,4.47-4,6.24"/><line class="cls-1" x1="27.57" y1="25.38" x2="36.45" y2="34.26"/></g></g></svg>
     <div class="icons-after"></div>
  </span>
<!--
    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 44"><defs></defs><title>drawing-tools</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M46.5,14.5a3.35,3.35,0,0,1-2-1v20a2,2,0,0,0,4,0v-20A3.35,3.35,0,0,1,46.5,14.5Z"/><line class="cls-1" x1="45" y1="31" x2="48" y2="31"/><path class="cls-1" d="M44.5,13.5a3.35,3.35,0,0,0,2,1,3.35,3.35,0,0,0,2-1l-2-5Z"/><polygon class="cls-1" points="61 43 1 43 1 1 53 1 61 9 61 43"/><polygon class="cls-1" points="32 38 6 38 6 12 32 38"/><polygon class="cls-1" points="18 32 12 32 12 26 18 32"/><line class="cls-1" x1="11" y1="36" x2="11" y2="37"/><line class="cls-1" x1="16" y1="36" x2="16" y2="37"/><line class="cls-1" x1="21" y1="36" x2="21" y2="37"/><line class="cls-1" x1="8" y1="23" x2="7" y2="23"/><line class="cls-1" x1="8" y1="28" x2="7" y2="28"/><line class="cls-1" x1="8" y1="33" x2="7" y2="33"/><polygon class="cls-1" points="61 9 53 9 53 1 61 9"/></g></g></svg>

     <div class="icons-after"></div>
  </span><br/>

    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 44"><defs></defs><title>paint-brush-palette</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M26,3C17.6,3.3,4.4,9.42,1.56,21.78-1.95,37.05,11.65,43,22.63,43,33.41,43,44.07,37.8,47,27.68c3.14-10.89-1.75-10.74-4.48-10.74s-8.3,1.12-9.17-2.39C32.32,10.45,42.55,2.49,26,3Z"/><circle class="cls-1" cx="18" cy="13" r="3"/><circle class="cls-1" cx="10" cy="21" r="3"/><circle class="cls-1" cx="11" cy="32" r="3"/><circle class="cls-1" cx="22" cy="36" r="3"/><ellipse class="cls-1" cx="34.5" cy="24.5" rx="4.5" ry="3.5"/><path class="cls-1" d="M55.6,13H58.4a1.06,1.06,0,0,1,1,1l.22,1.77a49.36,49.36,0,0,1,.17,10.65L58.4,41.57A1.49,1.49,0,0,1,57,43h0a1.49,1.49,0,0,1-1.4-1.43l-1.4-15.15a49.36,49.36,0,0,1,.17-10.65L54.6,14A1.06,1.06,0,0,1,55.6,13Z"/><path class="cls-1" d="M53,8.5C53,5,56.08,1,57.89,1,57.92,4.13,61,5,61,8.5a4,4,0,1,1-8,0Z"/><line class="cls-1" x1="59.78" y1="23.96" x2="54.22" y2="23.96"/></g></g></svg>
     <div class="icons-after"></div>
  </span> -->
<!--       
    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 48"><defs></defs><title>code-editor</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="1" y="1" width="60" height="46" rx="2" ry="2"/><line class="cls-1" x1="1" y1="7" x2="61" y2="7"/><line class="cls-1" x1="8" y1="7" x2="8" y2="47"/><line class="cls-1" x1="4" y1="11" x2="5" y2="11"/><line class="cls-1" x1="4" y1="4" x2="8" y2="4"/><line class="cls-1" x1="57" y1="4" x2="58" y2="4"/><line class="cls-1" x1="4" y1="15" x2="5" y2="15"/><line class="cls-1" x1="4" y1="19" x2="5" y2="19"/><line class="cls-1" x1="4" y1="23" x2="5" y2="23"/><line class="cls-1" x1="4" y1="27" x2="5" y2="27"/><line class="cls-1" x1="4" y1="31" x2="5" y2="31"/><line class="cls-1" x1="4" y1="35" x2="5" y2="35"/><line class="cls-1" x1="4" y1="39" x2="5" y2="39"/><line class="cls-1" x1="4" y1="43" x2="5" y2="43"/><line class="cls-1" x1="12" y1="15" x2="22" y2="15"/><line class="cls-1" x1="12" y1="11" x2="17" y2="11"/><line class="cls-1" x1="12" y1="31" x2="17" y2="31"/><line class="cls-1" x1="33" y1="23" x2="52" y2="23"/><line class="cls-1" x1="39" y1="19" x2="50" y2="19"/><line class="cls-1" x1="25" y1="15" x2="42" y2="15"/><line class="cls-1" x1="12" y1="19" x2="36" y2="19"/><line class="cls-1" x1="12" y1="23" x2="30" y2="23"/><line class="cls-1" x1="12" y1="27" x2="36" y2="27"/><polyline class="cls-1" points="44 35 41 38 44 41"/><polyline class="cls-1" points="53 41 56 38 53 35"/><line class="cls-1" x1="50" y1="33" x2="47" y2="43"/></g></g></svg>
     <div class="icons-after"></div>
  </span>

    <span class="gradient-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.99 50.9"><defs></defs><title>advertising-megaphone</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="45" y1="49.9" x2="26" y2="49.9"/><line class="cls-1" x1="50" y1="49.9" x2="48" y2="49.9"/><rect class="cls-1" x="16.93" y="0.33" width="3.91" height="43.01" rx="1.95" ry="1.95" transform="translate(31.48 47.82) rotate(-165)"/><path class="cls-1" d="M25.33,5.35h0l-9.11,34h0c9-4.14,17.19-5.51,26.72-3l7,1.87a4.89,4.89,0,0,0,6-3.46l1.52-5.66a4.89,4.89,0,0,0-3.46-6l-7-1.87C37.46,18.72,31,13.41,25.33,5.35Z"/><path class="cls-1" d="M56.59,28.55H58.5a2,2,0,0,1,2,2v3.82a2,2,0,0,1-2,2H56.59a0,0,0,0,1,0,0V28.55A0,0,0,0,1,56.59,28.55Z" transform="translate(10.4 -14.05) rotate(15)"/><path class="cls-1" d="M15.73,26.05a4.89,4.89,0,0,1,2.53-9.44Z"/><path class="cls-1" d="M40.16,49.8h0a2.9,2.9,0,0,1-1.92-3.94l4.12-9.63L48,37.74l-4.44,10.4A2.9,2.9,0,0,1,40.16,49.8Z"/><line class="cls-1" x1="9.31" y1="6.6" x2="12.73" y2="12.53"/><line class="cls-1" x1="3.23" y1="12.68" x2="9.15" y2="16.1"/><line class="cls-1" x1="1" y1="20.99" x2="7.84" y2="20.99"/><line class="cls-1" x1="3.23" y1="29.3" x2="9.15" y2="25.88"/><path class="cls-1" d="M42,24.67q1.56.55,3.21,1"/><path class="cls-1" d="M27.41,15A36.51,36.51,0,0,0,39.06,23.5"/></g></g></svg>
     <div class="icons-after"></div>
  </span>


    <span class="gradient-icon">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 49"><defs></defs><title>camera</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M55,10H48.88a4,4,0,0,1-3.79-2.74L43.91,3.74A4,4,0,0,0,40.12,1H27.88a4,4,0,0,0-3.79,2.74L22.91,7.26A4,4,0,0,1,19.12,10H7a6,6,0,0,0-6,6V45a3,3,0,0,0,3,3H58a3,3,0,0,0,3-3V16A6,6,0,0,0,55,10Z"/><circle class="cls-1" cx="34" cy="29" r="15"/><circle class="cls-1" cx="34" cy="29" r="11"/><path class="cls-1" d="M32.46,23.27a5.93,5.93,0,0,1,7.27,4.2"/><circle class="cls-1" cx="53" cy="18" r="2"/><line class="cls-1" x1="12" y1="43" x2="12" y2="20"/><line class="cls-1" x1="12" y1="15" x2="12" y2="17"/><line class="cls-1" x1="27" y1="9" x2="41" y2="9"/></g></g></svg>
     <div class="icons-after"></div>
  </span>-->


  </div>

</section>

script.js

$(".gradients").on("click", ".gradient", function(){
  $(".gradients div").removeClass("selected");
  var $this = $(this);
  $this.addClass("selected");
  $("#controls").attr("class", $this.attr("data-class"))
})

scripts

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

.gradient-icon{
  display:inline-block;
  width:100px;
  height:100px;
  margin:25px 25px;
  position:relative;
  overflow:hidden;
}

section{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.icons{
  display:block;
  align-self:center;
  background-color:#fff;
  padding:50px 60px;
  box-shadow: 0px 0px 10px rgba(20,20,20,.1);
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

html, body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  background-color:#f9f9f9;
}

svg .cls-1{
  fill:none;
  stroke-width:1px;
  stroke: #000;
  mix-blend-mode:multiply;
}

svg{
  color:#000;
  position:relative;
  opacity:.9;
  width:100%;
  height:100%;
  display:block;
  transition:transform .3s ease;
}
.icons-after{
  position: absolute;
  width:150%;
  height:150%;
  top:-25%;
  left:-25%;
  mix-blend-mode: screen;
  pointer-events:none;
  animation: spin 1.5s linear infinite alternate;
}

.gradient-one .icons-after, .gradients .one{
  background: linear-gradient(55deg, #cb60b3 0%,#9c18dd 44%,#48a7e2 100%);
}
.gradient-two .icons-after, .gradients .two{
  background: linear-gradient( 55deg, #7656d0, #83b4f1 );
}
.gradient-three .icons-after, .gradients .three{
   background: linear-gradient( 55deg, #d80f0f, #f5d76c );
}
.gradient-four .icons-after, .gradients .four{
  background: linear-gradient( 55deg, #08b976, #f2f7ba );
}

svg:hover{
  cursor:pointer;
  transform: scale(.9);
}

@-webkit-keyframes spin {
   from {
     transform: rotate(0deg);
  
   }
   to { 
     transform: rotate(360deg);
   }
}

/* OTHER STYLING */

.gradients{
  width:50px;
  height:300px;
  padding-top:25px;
  margin-left:-90px; 
  margin-right:20px; 
  display:block;
}

.gradients div{
  opacity:.8;
  background-color:red;
  width:50px;
  height:50px;
  margin-bottom:15px;
  border-radius:10px;
  display:inline-block;
  box-shadow: 0px 2px 5px rgba(50,50,50, .2);
  cursor:pointer;
  position:relative;
}

.gradients div.selected::after{
  content:'';
  display:block;
  position:absolute;
  width:12px;
  height:12px;
  background-color:rgba(0,50,150,.5);
  border-radius:100%;
  left:-20px;
  top:23px;
}