#7 Dog VK and Telegram Digital Resistance (SVG, SCSS) #30daysvgimage

7-dog-vk-and-telegram-digital-resistance-svg-scss-30daysvgimage.markdown

#7 Dog VK and Telegram Digital Resistance (SVG, SCSS) #30daysvgimage

A Pen by Anna Blok on CodePen.

License.

index.html

<div class="main">
   <div>
      <div class="reload"><a href="">You are awesome!</a></div>
      <button type="button">Digital Resistance</button>
      <svg viewBox="0 0 253.9 259">
      <path class="path" d="M111.2,256.6c-25.6-0.2-39.8-12.4-49.2-31.7c-6.3-12.9-8.6-26.8-10.8-40.8c-2.3-14.8-5.4-29.4-8.1-44.1
         c-2.4-13.2-4.9-26.5-6.9-39.7c-1-6.3-3-11.7-7.8-16.2C17.5,74,9,62.2,4.7,47.7c-2.6-8.3-2.9-17.2-0.8-25.6
         C6.6,11.6,15.5,4.7,26.3,3.7c12.4-1.1,23,2.6,31.8,11.3c4.7,4.7,9.5,9.4,14.2,14.1c1.9,2.1,4.9,2.9,7.6,1.9
         c20.4-5.6,41-5.6,61.8-1.9c2,0.4,4.5-0.5,6.5-1.5C160.7,21.6,173,14.9,185.6,9c12.3-5.8,25.5-8.2,39-5.7c29.4,5.5,34,35,18.5,53.2
         c-6.2,7.2-14.3,12.9-21.9,18.7c-6.1,4.7-12.5,8.8-19.2,12.4c-6.2,3.3-8.1,8.2-8.7,14.5c-3.6,36.7-11.9,72.2-26.6,106
         c-6.5,14.9-14.8,28.7-28.2,38.8C129.4,253.6,119.4,257,111.2,256.6z M110.8,251.1c10.4,0.7,20.7-4.5,29.5-13.1
         c11.5-11.1,18.8-25,24.5-39.6c12.4-31.6,20.2-64.8,23.2-98.6c0.6-7.1,3.5-12.5,10-16.1c6.9-3.8,13.4-8,19.7-12.7
         c7.2-5.4,14.5-10.8,20.6-17.3c7.4-8,10.2-18.1,6.3-28.7S231.9,9.4,221.1,8.2c-10.8-1.3-21.8,0.5-31.7,5.1
         C176.1,19.6,163,26.6,149.7,33c-2.7,1.3-6.2,2.1-9,1.6c-20.1-3.9-40-3.8-59.8,1.8c-5,1.4-8.8,0.3-12.3-3.1c-4.5-4.4-9-8.9-13.4-13.4
         c-7.4-7.5-16-11.5-26.8-10.9C19,9.5,11,14.3,9.4,23.5c-1.2,7.3-1,14.8,0.6,22c3.3,14.4,12.4,25.6,23,35.5c4.9,4.6,7.2,10.1,8.2,16.6
         c2.2,13.8,4.6,27.5,7.1,41.2c2.6,14.4,5.7,28.6,8,43c2.1,13.7,4.1,27.3,10.3,39.9C75.1,239.3,87.6,251.3,110.8,251.1L110.8,251.1z"
         />
      <path class="path" fill="#FFFFFF" d="M110.8,251.1c-23.2,0.3-35.7-11.8-44.2-29.2c-6.1-12.6-8.1-26.2-10.3-39.9c-2.2-14.4-5.4-28.7-8-43
         c-2.5-13.7-4.9-27.5-7.1-41.2c-1-6.5-3.3-12-8.2-16.6c-10.6-9.9-19.7-21.1-23-35.5c-1.6-7.2-1.8-14.7-0.6-22c1.6-9.2,9.6-14,19-14.5
         c10.8-0.6,19.4,3.4,26.8,10.9c4.4,4.5,8.9,9,13.4,13.4c3.5,3.4,7.3,4.5,12.3,3.1c19.7-5.5,39.7-5.7,59.8-1.8c2.8,0.5,6.3-0.3,9-1.6
         c13.3-6.4,26.4-13.4,39.8-19.8c9.9-4.6,20.8-6.4,31.7-5.1c10.8,1.2,19.6,6.1,23.5,16.7s1.2,20.7-6.2,28.7
         c-6.1,6.5-13.4,11.9-20.6,17.3c-6.3,4.7-12.9,8.9-19.7,12.7c-6.5,3.6-9.4,9-10,16.1c-3,33.8-10.8,67-23.2,98.6
         c-5.7,14.6-13,28.5-24.5,39.6C131.5,246.6,121.2,251.8,110.8,251.1z M108.2,241.5c16.8,0.2,30-10.5,29.8-25.1
         c-0.3-18.1-13.8-31.7-28.3-31.7c-19-0.1-29.8,12.4-30.5,31C78.6,232.1,90.3,241,108.2,241.5z M168.6,117.1l0.9-0.3
         c-1.8-6.6-2.8-13.7-5.6-19.9c-5-10.9-18.6-12.3-26.3-3.2c-5.5,6.5-7.8,14.4-8.7,22.9c-1.5,14.1,6.9,18,17.3,19.4
         c2.8,0.3,5.6,0.3,8.5,0.2c7.1-0.2,11-3.2,12.9-10.2C168.2,123.1,168.2,120.1,168.6,117.1z M60.9,114.5c1,9.1,4.3,13.8,11,14.6
         c8.6,1,16.1-2.7,16.9-9.4c0.6-5.2,0-10.5-1.6-15.5c-3.3-9.2-15.8-10.5-21.3-2.3C63.4,105.5,62.6,110.3,60.9,114.5L60.9,114.5z
          M164.9,51c0.8,0.7,1.2,1.4,1.7,1.5c3.4,0.5,6.8,0.8,7.3,5.4c0,0.4,1.7,1.1,2.4,0.9c0.9-0.4,1.5-1.2,1.7-2.1
         c0.3-3.1,3.6-5.6,1.8-9.4c-0.3-0.6,2.6-3,4.3-4.2c1.1-0.8,2.6-1,4.7-1.7l-4.1-3.7c0.6-0.9,1-1.8,1.3-2.8c0.1-1.2,0.1-2.3,0-3.5
         c-1.2,0-2.5,0.3-3.6,0.6c-1,0.5-1.5,1.8-2.5,2.3c-1.9,1-3.8,1.8-5.8,2.5c-2,0.8-4,1.4-6,2c1.7,1.2,3.5,2.3,5.2,3.5
         c0.2,0.2,0.4,0.4,0.6,0.6C175.6,51,167.2,46.9,164.9,51L164.9,51z"/>
      <path class="nose" d="M108.2,241.5c-17.9-0.4-29.6-9.4-29-25.8c0.7-18.6,11.4-31.1,30.5-31c14.5,0.1,28,13.7,28.3,31.7
         C138.2,231,125,241.7,108.2,241.5z"/>
      <path class="path" d="M168.6,117.1c-0.3,3-0.4,6-1.1,8.9c-1.8,7-5.7,10-12.9,10.2c-2.8,0.2-5.7,0.1-8.5-0.2c-10.4-1.4-18.8-5.3-17.3-19.4
         c0.9-8.5,3.1-16.4,8.7-22.9c7.8-9.1,21.3-7.7,26.3,3.2c0.7,1.6,1.3,2.9,1.9,4.9C166.7,105.3,167.9,110.4,168.6,117.1z"/>
      <path class="path" d="M61.2,114.6c0.4-1.7,1-4.2,2-7c1.2-3.1,1.9-4.5,2.7-5.7c5.4-8.2,17.9-6.9,21.3,2.3c1.7,5,2.2,10.3,1.6,15.5
         c-0.7,6.8-8.2,10.5-16.9,9.4c-2.2-0.3-4-0.9-5.5-2c-3.5-2.5-4.4-6.6-4.8-8.4C61.3,117,61.2,115.6,61.2,114.6z"/>
      <path class="path" d="M165.6,50.7c0.1-0.7,0.3-2.1,1.2-2.5c0.5-0.2,1-0.1,1.7,0.1c1,0.3,2.3,0.5,4.1,0.7c0.6-1,1.6-2.6,2.9-4.6
         c1.4-2.3,2.1-3.4,1.7-4.2c-0.1-0.1-0.2-0.3-2.2-1c-1.1-0.4-1.6-0.6-2.5-0.9c-0.7-0.2-1.6-0.5-2.6-0.7c-0.1-1.2,0.2-1.8,0.5-2
         c1.7-1.5,6.4,2.6,9,0.8c0.6-0.4,1.2-1.2,1.5-1.6c0.7-0.9,1.2-1.8,1.4-2.4c0.2-0.2,0.8-0.6,1.6-0.8c1-0.2,1.7,0,2.1,0.2
         c0.2,0.2,0.5,0.8,0.6,1.5c0,0.5-0.1,1-0.6,2c-1,2.1-1.2,2.2-1.1,2.6c0.2,0.7,1.5,0.7,4.3,1.6c0.8,0.3,1.5,0.5,1.9,0.7
         c-0.3,0.8-0.6,1.6-0.9,2.4c-0.7,0-1.4-0.1-2.3-0.2c-1-0.1-1.4-0.2-2.5-0.4c-1.4-0.2-2.1-0.3-2.3-0.3c-1.3,0.3-1.5,1.6-3.8,5.5
         c-1,1.7-1.6,2.4-1.3,3c0.1,0.3,0.4,0.5,2.4,1.1c2.5,0.8,3.2,0.7,3.4,1.3c0.3,0.7-0.4,1.9-1.3,2.2c-0.6,0.2-1,0-2.6-0.4
         c-2.1-0.6-3.2-0.9-3.8-0.5c-0.6,0.3-0.6,0.8-1.9,2.4c-0.5,0.6-1,1.1-1.3,1.5c-2.1,0.2-2.8-0.2-3.1-0.6c-0.6-1.1,1.3-2.8,0.6-4
         c-0.3-0.5-0.9-0.5-3-1.3C166.8,51.2,166,50.9,165.6,50.7z"/>
      </svg>
         <svg class="telegram" viewBox="0 0 248.64 310.44"><path d="M99.27,188.3A19,19,0,0,0,109.37,193a21.25,21.25,0,0,0,14.45-3.16l14.6-11.61a29.89,29.89,0,0,1,13.34-5.65,32.9,32.9,0,0,1,17.17,1.81l14.44,7.69,25.11-99.73C207,76.73,200.42,52.9,183.86,34.9a114.11,114.11,0,0,0-23.19-19,79,79,0,0,0-12.93-6.72,71.54,71.54,0,0,0-25.87-5.6c-8.83-.19-15.31,1.39-21.85,3A102.06,102.06,0,0,0,79.5,14a105.67,105.67,0,0,0-16.67,9.73A93.07,93.07,0,0,0,46.47,39.19,102.44,102.44,0,0,0,32.34,59.26,98.16,98.16,0,0,0,23.6,82.08L46.22,182.19l12.49-7.25a30.1,30.1,0,0,1,17.93-2.62,27.08,27.08,0,0,1,11.56,4.85Z" transform="translate(-3.82 -3.53)"/><path d="M23.6,82.08,3.82,233.45,109.77,314,102,285.6a87.1,87.1,0,0,1-33.12-22.73,209.55,209.55,0,0,1-9.2-20.64A213.27,213.27,0,0,1,46.22,180Z" transform="translate(-3.82 -3.53)"/><path d="M101.32,285.31,109.77,314,252.45,217.7l-44-135.31c-12.76,45.91-20.68,76.91-25.11,97.56a270.32,270.32,0,0,1-12.54,42.34c-2.53,6.49-5.52,13.31-9.11,20.49a248.54,248.54,0,0,1-14.32,24.9A44.77,44.77,0,0,1,134,278.36a48.16,48.16,0,0,1-7.56,3.7,52.31,52.31,0,0,1-7.89,2.3,48.78,48.78,0,0,1-8.91,1.35A43.45,43.45,0,0,1,101.32,285.31Z" transform="translate(-3.82 -3.53)"/></svg>
   </div>

</div>

script.js

$(".main button").click(function() {
    $(this).parents(".main").addClass("main-click");
 });

scripts

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

style.scss

html, body {
   height:100%;
}
body {
   width:100%;
   text-align:center;
   font-family: 'Montserrat', sans-serif;
}
.main {
   padding: 0 15px;
   background: rgba(255,255,255,1);
   transition:1.5s;
   position:relative;
   height:100%;
   &>div {
      position:relative;
      position: absolute;
      top: calc(50% - 320px);
      left: 0;
      right: 0;
      @media(max-width: 550px) {
         top: calc(50% - 197px);
      }
      @media(max-width: 350px) {
         top: calc(50% - 164px);
      }
   }
   button {
      display: block;
      width: 100%;
      max-width: 260px;
      font-size: 20px;
      font-weight:200;
      text-transform: uppercase;
      background-color: rgba(49,150,201,1);
      border: 1px solid rgba(49,150,201,1);
      color: #fff;
      padding: 15px 0;
      margin:0 auto 50px;
      transition:0.5s;
      cursor:pointer;
      opacity:1;
      animation: pulse 2s infinite;
      &:hover {
         background-color: #fff;
         border: 1px solid rgba(49,150,201,0.5);
         color: rgba(49,150,201,1);
      }
      &:focus {
         outline:none;
      }
      @media(max-width: 550px) {
          max-width: 230px;
          font-size: 15px;
          padding: 12px 0;
      }
   }
   a {
      display: table;
      font-size: 25px;
      font-weight:400;
      text-transform: uppercase;
      color: #000;
      text-decoration:none;
      margin:0 auto;
      transition:1s;
      cursor:pointer;
      opacity:1;
      position:relative;
      &:focus {
         outline:none;
      }
      @media(max-width: 550px) {
          font-size: 20px;
      }
   }
   .reload {
      opacity:0;
      transition:1s;
      position: absolute;
      right: 0;
      left: 0;
      top: 20px;
      visibility:hidden;
      @media(max-width: 550px) {
         position: inherit;
      }
   }
   svg {
      width:100%;
      max-width:500px;
      margin-top:0;
      transition:1s;
      @media(max-width: 550px) {
         max-width: 300px;
      }
      @media(max-width: 350px) {
         max-width: 220px;
      }
   }
   .telegram {
      opacity:0;
      position: absolute;
      left: 0;
      right: 0;
      display: block;
      margin: 0 auto;
      bottom: -29px;
      max-width: 415px;
      transition:1s;
      @media(max-width: 550px) {
         max-width: 300px;
      }
      @media(max-width: 350px) {
         max-width: 220px;
      }
   }
   .path {
      opacity:1;
      transition:1s;
   }
   &-click {
      background: rgba(49,150,201,1);
      background: linear-gradient(45deg, rgba(49,150,201,1) 0%, rgba(58,176,227,1) 100%);
      button {
         opacity:0;
         visibility:hidden;
      }
      .path {
         opacity:0;
      }
      svg {
         max-width: 496px;
         margin-top: -30px;
         @media(max-width: 550px) {
            max-width: 290px;
         }
         @media(max-width: 350px) {
            max-width: 225px;
            margin-top: -10px;
         }
      }
      .telegram, .reload {
         opacity:1;
      }
      .telegram {
         @media(max-width: 550px) {
            max-width: 250px;
            bottom: -24px;
         }
         @media(max-width: 350px) {
            max-width: 210px;
            bottom: -15px;
         }
      }
      .reload {
         visibility:visible;
      }
   }
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(49,150,201,1);
    box-shadow: 0px 0px 0px 0px rgba(49,150,201,1);
  }

  70% {
    -moz-box-shadow: 0px 0px 0px 10px rgba(49,150,201,0.01);
    box-shadow: 0px 0px 0px 10px rgba(49,150,201,0.01);
  }

  100% {
    -moz-box-shadow: 0px 0px 0px 10px rgba(49,150,201,0);
    box-shadow: 0px 0px 0px 10px rgba(49,150,201,0);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,400" rel="stylesheet" />