Day 30

In this example below you will see how to do a Day 30 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dfmcphee, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dfmcphee ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Day 30</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  <svg version="1.1" class="creature" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 138 130.833" enable-background="new 0 0 138 130.833" xml:space="preserve">
    <g id="XMLID_248_">
      <g id="XMLID_20_">
        <path id="XMLID_32_" fill="#F4C648" d="M100.87,29.1c-0.12-0.18-1.41-2.12-2.99-3.58c-0.01-0.29-0.17-3.21-1-5.27
          c-1.2-2.96-3.5-10.25,1.74-11.63c5.26-1.37,7.38,2.88,8,5.13c0.63,2.25,6.26,15.75-2.87,31.5c-4.2,7.25-7.68,12.03-10.22,15.09
          c-0.83,0.99-1.55,1.8-2.16,2.45c-1.12-0.31-2.22-0.61-3.27-0.91c-0.94-0.64-1.88-1.24-2.83-1.78c0.35-0.95,0.89-2.02,1.61-3.22
          c3.31-5.59,9.56-16.56,6.87-22.5c-1.75-3.88-3-7.63-0.25-10c1.27-1.1,2.94-0.17,4.38,1.14c0,0.01,0,0.02,0,0.02L100.87,29.1z"/>
        <path id="XMLID_31_" fill="#2C6356" d="M102.95,74.38c-0.46,0.43-0.51,1.13-0.13,1.63l-0.44,0.18c-1.95-2.43-4-7.52-4-7.52
          c4.54,1.33,8.24,1.14,8.24,1.14C105.92,71.13,104.78,72.7,102.95,74.38z"/>
        <path class="right-pupil" id="XMLID_30_" d="M100.83,89.6c1.15,0,2.09,1.66,2.09,3.71c0,2.05-0.94,3.47-2.09,3.47s-2.08-1.42-2.08-3.47
          C98.75,91.26,99.68,89.6,100.83,89.6z"/>
        <path id="XMLID_29_" fill="#FFFFFF" d="M100.87,29.1l-2.99-3.56c0,0,0-0.01,0-0.02C99.46,26.98,100.75,28.92,100.87,29.1z"/>
        
        <path id="XMLID_28_" fill="#F4C648" d="M91.37,62.79c-1.62,1.7-2.49,2.33-2.49,2.33s-1.63,1.06-2.88,0
          c-1.4-1.18-1.58-2.79-0.73-5.02c0.95,0.54,1.89,1.14,2.83,1.78C89.15,62.18,90.25,62.48,91.37,62.79z"/>
        <g id="Ruby">
          <polygon class="ruby" id="XMLID_27_" fill="#EB007E" points="79.75,25 84,33 76.19,33 79.5,25 		"/>
          <polygon class="ruby" id="XMLID_26_" fill="#EB007E" points="84,33 69,50.38 76.19,33 		"/>
          <polygon class="ruby" id="XMLID_25_" fill="#EB007E" points="79.5,25 76.19,33 69,25 		"/>
          <polygon class="ruby" id="XMLID_23_" fill="#EB007E" points="69,25 76.19,33 61.81,33 		"/>
          <polygon class="ruby" id="XMLID_22_" fill="#EB007E" points="76.19,33 69,50.38 61.81,33 		"/>
          <polygon class="ruby" id="XMLID_21_" fill="#EB007E" points="69,25 61.81,33 58.5,25 		"/>
          <polygon class="ruby" id="XMLID_19_" fill="#EB007E" points="61.81,33 69,50.38 54,33 		"/>
          <polygon class="ruby" id="XMLID_9_" fill="#EB007E" points="58.5,25 61.81,33 54,33 58.25,25 		"/>
          <polyline class="ruby" id="XMLID_55_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="54,33 61.81,33 76.19,33 84,33		"/>
          <polyline class="ruby" id="XMLID_54_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="58.5,25 61.81,33 69,50.38 76.19,33 79.5,25		"/>
          <polyline class="ruby" id="XMLID_52_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="76.19,33 69,25 61.81,33"/>
          <polygon class="ruby" id="XMLID_56_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
          69,50.38 84,33 79.75,25 79.5,25 69,25 58.5,25 58.25,25 54,33 		"/>
        </g>
        
        <g class="ruby-glow">
          <line id="XMLID_33_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="69.5" y1="18" x2="69.5" y2="5"/>
          <line id="XMLID_51_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="87.62" y1="21.5" x2="84.75" y2="25"/>

          <line id="XMLID_50_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50.38" y1="21.5" x2="53.25" y2="25"/>

          <line id="XMLID_49_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="80.12" y1="9.88" x2="75.62" y2="19"/>

          <line id="XMLID_48_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="57.88" y1="9.88" x2="62.38" y2="19"/>

          <line id="XMLID_47_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="85.53" y1="16" x2="81.5" y2="20.75"/>

          <line id="XMLID_46_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="52.47" y1="16" x2="56.5" y2="20.75"/>
        </g>
        
        <g class="eye">
          <path class="middle-pupil" id="XMLID_24_" d="M76.41,68.3l-0.22,0.45c0,4.72-2.98,7.46-7.19,7.46s-7.19-2.74-7.19-7.46l-0.22-0.45 c3.87-1.94,7.41-1.79,7.41-1.79S72.54,66.36,76.41,68.3z"/>
          
          <path id="XMLID_75_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M61.59,68.3c3.87-1.94,7.41-1.79,7.41-1.79s3.54-0.15,7.41,1.79c2.47,1.23,5.07,3.31,6.97,6.82c0,0-2.63,6-14.38,6
          s-14.38-6-14.38-6C56.52,71.61,59.12,69.53,61.59,68.3z"/>
 
        </g>
        
        <path id="XMLID_18_" fill="#A2DADF" d="M69,113.99c1.06,0.01,2.1-0.02,3.12-0.08l0.14,2.49c-1.04,0.07-2.13,0.1-3.26,0.1
          s-2.22-0.03-3.26-0.1l0.14-2.49C66.9,113.97,67.94,114,69,113.99z"/>
        <path id="XMLID_10_" fill="#A2DADF" d="M99,99.5c2.76,0,5-3.54,5-7.92c0-4.37-2.24-7.91-5-7.91s-5,3.54-5,7.91
          C94,95.96,96.24,99.5,99,99.5z M82.31,98.36v0.01c2.12,0.35,4.11,0.8,5.6,1.36c0.24-2.73,0.83-6.02-2.05-6.48
          C83.17,92.82,82.31,95.88,82.31,98.36z M69,66.51c0,0-3.54-0.15-7.41,1.79c-2.47,1.23-5.07,3.31-6.97,6.82c0,0,2.63,6,14.38,6
          s14.38-6,14.38-6c-1.9-3.51-4.5-5.59-6.97-6.82C72.54,66.36,69,66.51,69,66.51z M69,116.5c1.13,0,2.22-0.03,3.26-0.1l-0.14-2.49
          c-1.02,0.06-2.06,0.09-3.12,0.08c-1.06,0.01-2.1-0.02-3.12-0.08l-0.14,2.49C66.78,116.47,67.87,116.5,69,116.5z M55.69,98.36
          c0-2.48-0.86-5.54-3.55-5.11c-2.88,0.46-2.29,3.75-2.05,6.48c1.49-0.56,3.48-1.01,5.6-1.36V98.36z M110.66,132.5H27.34H15.33
          c0-19.61,8.12-41.26,19.85-56.49l0.44,0.18c1.95-2.43,4-7.52,4-7.52c-4.54,1.33-8.24,1.14-8.24,1.14c-0.38-0.71-0.63-1.34-0.8-1.9
          c-0.32-1.04,0.46-2.06,1.54-2.09c3.33-0.1,9.17-1.56,14.51-3.03c1.62,1.7,2.5,2.33,2.5,2.33s1.62,1.06,2.87,0
          c1.4-1.18,1.58-2.79,0.74-5.03c5.27-3.07,10.77-4.78,16.26-4.78s10.99,1.72,16.27,4.79c-0.85,2.23-0.67,3.84,0.73,5.02
          c1.25,1.06,2.88,0,2.88,0s0.87-0.63,2.49-2.33c5.34,1.47,11.18,2.93,14.51,3.03c1.08,0.03,1.86,1.05,1.54,2.09
          c-0.17,0.56-0.42,1.19-0.8,1.9c0,0-3.7,0.19-8.24-1.14c0,0,2.05,5.09,4,7.52l0.44-0.18c11.73,15.23,19.85,36.88,19.85,56.49
          H110.66z M32.33,97.09c1.45,4.06,4.71,4.67,6.73,4.64L39,99.5c2.76,0,5-3.54,5-7.92c0-4.37-2.24-7.91-5-7.91s-5,3.54-5,7.91
          c0,1.64,0.32,3.17,0.85,4.43L32.33,97.09z"/>
        <path id="XMLID_8_" fill="#F4C648" d="M52.74,60.09c0.84,2.24,0.66,3.85-0.74,5.03c-1.25,1.06-2.87,0-2.87,0s-0.88-0.63-2.5-2.33
          c1.12-0.31,2.22-0.61,3.27-0.91C50.84,61.24,51.79,60.64,52.74,60.09z"/>
        <path id="XMLID_5_" fill="#F4C648" d="M37.14,29.1l2.98-3.56C38.55,26.99,37.26,28.92,37.14,29.1z M40.12,25.53
          c1.43-1.32,3.11-2.26,4.38-1.16c2.75,2.38,1.5,6.13-0.25,10c-2.68,5.95,3.56,16.93,6.88,22.5c0.71,1.2,1.25,2.27,1.61,3.22
          c-0.95,0.55-1.9,1.15-2.84,1.79c-1.05,0.3-2.15,0.6-3.27,0.91c-0.61-0.65-1.33-1.46-2.16-2.45c-2.54-3.06-6.02-7.84-10.22-15.09
          c-9.12-15.75-3.5-29.25-2.87-31.5c0.62-2.25,2.75-6.5,8-5.13c5.25,1.38,2.94,8.67,1.75,11.63C40.28,22.35,40.13,25.33,40.12,25.53
          z"/>
        
        <path id="XMLID_4_" fill="#FFFFFF" d="M40.12,25.54l-2.98,3.56C37.26,28.92,38.55,26.99,40.12,25.54z"/>
        
        <path id="XMLID_3_" fill="#A2DADF" d="M39.06,101.73c-2.02,0.03-5.28-0.58-6.73-4.64l2.52-1.08c0.9,2.11,2.43,3.49,4.15,3.49
          L39.06,101.73z"/>
        <path class="left-pupil" id="XMLID_2_" d="M39.25,93.31c0,2.05-0.93,3.47-2.08,3.47c-1.15,0-2.09-1.42-2.09-3.47c0-2.05,0.94-3.71,2.09-3.71
          C38.32,89.6,39.25,91.26,39.25,93.31z"/>
        <path id="XMLID_1_" fill="#2C6356" d="M35.05,74.38c-1.83-1.68-2.97-3.25-3.67-4.57c0,0,3.7,0.19,8.24-1.14c0,0-2.05,5.09-4,7.52
          l-0.44-0.18C35.56,75.51,35.51,74.81,35.05,74.38z"/>
      </g>
      
      <g id="XMLID_53_">

          <path id="XMLID_78_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M46.63,62.79c-5.34,1.47-11.18,2.93-14.51,3.03c-1.08,0.03-1.86,1.05-1.54,2.09c0.17,0.56,0.42,1.19,0.8,1.9
          c0.7,1.32,1.84,2.89,3.67,4.57c0.46,0.43,0.51,1.13,0.13,1.63c-11.73,15.23-19.85,36.88-19.85,56.49h12.01h83.32h12.01
          c0-19.61-8.12-41.26-19.85-56.49c-0.38-0.5-0.33-1.2,0.13-1.63c1.83-1.68,2.97-3.25,3.67-4.57c0.38-0.71,0.63-1.34,0.8-1.9
          c0.32-1.04-0.46-2.06-1.54-2.09c-3.33-0.1-9.17-1.56-14.51-3.03"/>

          <path id="XMLID_77_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M85.27,60.1c-5.28-3.07-10.78-4.79-16.27-4.79s-10.99,1.71-16.26,4.78"/>

          <path id="XMLID_74_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M104,91.58c0,4.38-2.24,7.92-5,7.92s-5-3.54-5-7.92c0-4.37,2.24-7.91,5-7.91S104,87.21,104,91.58z"/>

          <path id="XMLID_73_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M39,99.5c2.76,0,5-3.54,5-7.92c0-4.37-2.24-7.91-5-7.91s-5,3.54-5,7.91c0,1.64,0.32,3.17,0.85,4.43
          C35.75,98.12,37.28,99.5,39,99.5z"/>

          <path id="XMLID_72_" class="right-pupil" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M98.75,93.31c0-2.05,0.93-3.71,2.08-3.71s2.09,1.66,2.09,3.71c0,2.05-0.94,3.47-2.09,3.47S98.75,95.36,98.75,93.31z"/>

          <path id="XMLID_71_" class="left-pupil" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M39.25,93.31c0-2.05-0.93-3.71-2.08-3.71c-1.15,0-2.09,1.66-2.09,3.71c0,2.05,0.94,3.47,2.09,3.47
          C38.32,96.78,39.25,95.36,39.25,93.31z"/>

          <path id="XMLID_70_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M107.17,116.67c0,0,3.39,7.26,3.49,15.83c0.01,0.14,0.01,0.28,0.01,0.42"/>

          <path id="XMLID_69_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M30.83,116.67c0,0-3.39,7.26-3.49,15.83c-0.01,0.14-0.01,0.28-0.01,0.42"/>
        <g class="mouth-wrapper">
          <g class="mouth">
            <path id="XMLID_66_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M48.5,100.5c0.42-0.28,0.96-0.54,1.59-0.77c1.49-0.56,3.48-1.01,5.6-1.36v-0.01C61.78,97.35,69,97.09,69,97.09
            s7.22,0.26,13.31,1.27v0.01c2.12,0.35,4.11,0.8,5.6,1.36c0.63,0.23,1.17,0.49,1.59,0.77"/>
          <path id="XMLID_68_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M82.31,98.36c0-2.48,0.86-5.54,3.55-5.11c2.88,0.46,2.29,3.75,2.05,6.48"/>
          <path id="XMLID_67_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M55.69,98.36c0-2.48-0.86-5.54-3.55-5.11c-2.88,0.46-2.29,3.75-2.05,6.48"/>
        </g>
      </g>
          
          <path id="XMLID_65_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M94.94,107c0,0-9.71,6.15-22.82,6.91c-1.02,0.06-2.06,0.09-3.12,0.08c-1.06,0.01-2.1-0.02-3.12-0.08
          C52.77,113.15,43.06,107,43.06,107"/>
        <path id="XMLID_64_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M85.72,113.83c0,0-5.17,2.11-13.46,2.57c-1.04,0.07-2.13,0.1-3.26,0.1s-2.22-0.03-3.26-0.1c-8.29-0.46-13.46-2.57-13.46-2.57"/>
        <path id="XMLID_63_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M97.22,101.52c0,0,6.28,1.66,8.45-4.43"/>
        <path id="XMLID_62_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M40.78,101.52c0,0-0.7,0.19-1.72,0.21c-2.02,0.03-5.28-0.58-6.73-4.64"/>
        <path id="XMLID_61_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M99.83,103c0,0,3.65,0.5,5.84-2.75"/>
        <path id="XMLID_60_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M38.17,103c0,0-3.65,0.5-5.84-2.75"/>
        <path id="XMLID_58_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M81.5,67.67c0,0-3.88-5.42-12.5-5.42s-12.5,5.42-12.5,5.42"/>
        <path id="XMLID_57_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M85.22,79.25c0,0-4.6,5.75-16.22,5.75s-16.22-5.75-16.22-5.75"/>

        <path id="XMLID_45_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M83,116.17c0,0-5.5,1.91-14,1.91s-14-1.91-14-1.91"/>
        <path id="XMLID_44_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M79.5,67.67c0,0-3.56-3.62-10.5-3.62s-10.5,3.62-10.5,3.62"/>
        <path id="XMLID_43_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M83.38,78.58c0,0-3.88,4.73-14.38,4.73s-14.38-4.73-14.38-4.73"/>
        <path id="XMLID_42_" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M83.75,100.81c0,0-7.25-1.31-14.75-1.31s-14.75,1.31-14.75,1.31"/>

          <path id="XMLID_41_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M106.62,69.81c0,0-3.7,0.19-8.24-1.14c0,0,2.05,5.09,4,7.52"/>

          <path id="XMLID_40_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M31.38,69.81c0,0,3.7,0.19,8.24-1.14c0,0-2.05,5.09-4,7.52"/>

          <path id="XMLID_39_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M97.88,25.54c0,0,0-0.01,0-0.02c-0.01-0.29-0.17-3.21-1-5.27c-1.2-2.96-3.5-10.25,1.74-11.63c5.26-1.37,7.38,2.88,8,5.13
          c0.63,2.25,6.26,15.75-2.87,31.5c-4.2,7.25-7.68,12.03-10.22,15.09c-0.83,0.99-1.55,1.8-2.16,2.45c-1.62,1.7-2.49,2.33-2.49,2.33
          s-1.63,1.06-2.88,0c-1.4-1.18-1.58-2.79-0.73-5.02c0.35-0.95,0.89-2.02,1.61-3.22c3.31-5.59,9.56-16.56,6.87-22.5
          c-1.75-3.88-3-7.63-0.25-10c1.27-1.1,2.94-0.17,4.38,1.14c1.58,1.46,2.87,3.4,2.99,3.58"/>

          <polyline id="XMLID_38_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
          100.88,29.12 100.87,29.1 97.88,25.54 		"/>

          <path id="XMLID_37_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M40.12,25.54c-1.57,1.45-2.86,3.38-2.98,3.56"/>

          <path id="XMLID_36_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
          M40.12,25.53c0.01-0.2,0.16-3.18,1.01-5.28c1.19-2.96,3.5-10.25-1.75-11.63c-5.25-1.37-7.38,2.88-8,5.13
          c-0.63,2.25-6.25,15.75,2.87,31.5c4.2,7.25,7.68,12.03,10.22,15.09c0.83,0.99,1.55,1.8,2.16,2.45c1.62,1.7,2.5,2.33,2.5,2.33
          s1.62,1.06,2.87,0c1.4-1.18,1.58-2.79,0.74-5.03c-0.36-0.95-0.9-2.02-1.61-3.22c-3.32-5.57-9.56-16.55-6.88-22.5
          c1.75-3.87,3-7.62,0.25-10C43.23,23.27,41.55,24.21,40.12,25.53"/>

          <line id="XMLID_35_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="40.12" y1="25.53" x2="40.12" y2="25.54"/>

          <polyline id="XMLID_34_" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
          37.13,29.12 37.14,29.1 40.12,25.54 		"/>
      </g>
    </g>
  </svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dfmcphee/day-30-rerLGy */
body, html {
  height: 100%;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.creature {
  background: #fff;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
}

.ruby {
  -webkit-animation-name: ruby-bounce;
          animation-name: ruby-bounce;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@-webkit-keyframes ruby-bounce {
  25% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  75% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
}

@keyframes ruby-bounce {
  25% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  75% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
}
.ruby-glow {
  -webkit-animation-name: ruby-glow;
          animation-name: ruby-glow;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: 60% 100%;
          transform-origin: 60% 100%;
}

@-webkit-keyframes ruby-glow {
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes ruby-glow {
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.middle-pupil {
  -webkit-animation-name: pupil-grow;
          animation-name: pupil-grow;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: 80% 100%;
          transform-origin: 80% 100%;
}

@-webkit-keyframes pupil-grow {
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes pupil-grow {
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.left-pupil {
  -webkit-animation-name: pupil-shift-right;
          animation-name: pupil-shift-right;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateX(1.3px);
          transform: translateX(1.3px);
}

@-webkit-keyframes pupil-shift-right {
  50% {
    -webkit-transform: translateX(2.3px);
            transform: translateX(2.3px);
  }
}

@keyframes pupil-shift-right {
  50% {
    -webkit-transform: translateX(2.3px);
            transform: translateX(2.3px);
  }
}
.right-pupil {
  -webkit-animation-name: pupil-shift-left;
          animation-name: pupil-shift-left;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateX(-2.2px);
          transform: translateX(-2.2px);
  -webkit-transform-origin: 80% 100%;
          transform-origin: 80% 100%;
}

@-webkit-keyframes pupil-shift-left {
  50% {
    -webkit-transform: translateX(-1.3px);
            transform: translateX(-1.3px);
  }
}

@keyframes pupil-shift-left {
  50% {
    -webkit-transform: translateX(-1.3px);
            transform: translateX(-1.3px);
  }
}
.mouth-wrapper {
  -webkit-perspective: 200px;
          perspective: 200px;
}

.mouth {
  -webkit-animation-name: mouth-bend;
          animation-name: mouth-bend;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: 80% 100%;
          transform-origin: 80% 100%;
}

@-webkit-keyframes mouth-bend {
  70% {
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
  }
}

@keyframes mouth-bend {
  70% {
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
  }
}

Comments