Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="info">
    tap my belly
  </div>
  <div class="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" viewBox="0 0 1600 1200">
  <defs>
    <clipPath id="clip-husky">
      <rect width="1600" height="1200"/>
    </clipPath>
  </defs>
  <g id="husky" clip-path="url(#clip-husky)">
    <rect width="1600" height="1200" fill="#f5e9aa"/>
    <g id="design" transform="translate(0 53.427)">
      <g class="music">
        <path class="notes note-1" data-name="Icon ionic-ios-musical-note" d="M46.678,3.407c-.768.147-19.28,3.938-19.966,4.068a1.448,1.448,0,0,0-1.323,1.307h0v41.68A4.507,4.507,0,0,1,25,52.374a4.354,4.354,0,0,1-2.631,2.075c-.539.18-1.274.343-2.14.539C16.288,55.871,9.7,57.374,9.7,63.452a7.579,7.579,0,0,0,5.719,7.7,12.275,12.275,0,0,0,2.255.163c1.34,0,5.882-.539,8.365-2.157a8.8,8.8,0,0,0,3.938-7.81V23.814a1.3,1.3,0,0,1,1.046-1.274l15.162-3.1a2.624,2.624,0,0,0,2.091-2.565V4.649A1.292,1.292,0,0,0,46.678,3.407Z" />
        <path class="notes note-2" data-name="Icon ionic-ios-musical-notes" d="M41.835,3.4C41.3,3.5,19,7.83,18.521,7.92a1,1,0,0,0-.916.9V35.973a3.119,3.119,0,0,1-.271,1.323,3.013,3.013,0,0,1-1.82,1.436c-.373.124-.882.237-1.481.373-2.725.611-7.282,1.651-7.282,5.857a5.176,5.176,0,0,0,4.715,5.371,5.512,5.512,0,0,0,.8.079h0a13.956,13.956,0,0,0,5.789-1.493,6.092,6.092,0,0,0,2.725-5.4V19.487a.9.9,0,0,1,.724-.882l17.187-3.471a.9.9,0,0,1,1.085.882v14.8a3.241,3.241,0,0,1-.283,1.515,3.005,3.005,0,0,1-1.832,1.436c-.373.124-1,.237-1.594.373-2.725.611-7.282,1.64-7.282,5.846a5.186,5.186,0,0,0,4.726,5.461,9.344,9.344,0,0,0,2.194-.1,12.963,12.963,0,0,0,4.127-1.47,5.96,5.96,0,0,0,3.109-5.45V4.268A.9.9,0,0,0,41.835,3.4Z" />
        <path class="notes note-3" data-name="Icon ionic-md-musical-notes" d="M19.412,4.5V44.515a13.231,13.231,0,0,0-4.132-.637c-5.949,0-10.78,4.21-10.78,10.159S9.331,64.149,15.28,64.149A10.523,10.523,0,0,0,26.092,53.415V25.626H57.47V44.515a13.231,13.231,0,0,0-4.132-.637c-5.949,0-10.78,4.21-10.78,10.159s4.831,10.112,10.78,10.112A10.523,10.523,0,0,0,64.149,53.415V4.5ZM57.47,19.412H26.092V11.179H57.47Z" />
        <path class="notes note-4" data-name="Icon ionic-md-musical-notes" d="M14.353,4.5V30.939a8.742,8.742,0,0,0-2.73-.421C7.692,30.518,4.5,33.3,4.5,37.23s3.192,6.681,7.123,6.681a6.953,6.953,0,0,0,7.143-7.092V18.458H39.5v12.48a8.742,8.742,0,0,0-2.73-.421c-3.931,0-7.123,2.781-7.123,6.712s3.192,6.681,7.123,6.681a6.953,6.953,0,0,0,7.143-7.092V4.5ZM39.5,14.353H18.766V8.913H39.5Z" />
        <path class="notes note-5" data-name="Icon ionic-md-musical-note" d="M21.387,4.5V26.283a8.24,8.24,0,1,0,4.122,7.122V12.755h8.264V4.5Z" />
      </g>
      <g id="husky-2" data-name="husky" transform="translate(-309.369 53.898)">
        <path id="shadow" d="M214.344,0C332.723,0,428.688,16.568,428.688,37.006S332.723,74.011,214.344,74.011,0,57.443,0,37.006,95.965,0,214.344,0Z" transform="translate(900.312 809)" fill="rgba(68,68,68,0.3)"/>
        <g id="left-leg" transform="translate(1066.369 714)">
          <path id="Path_5" data-name="Path 5" d="M122.053,112.737c67.408,0,122.053-35.088,122.053-78.371S189.461.973,122.053.973,0-8.918,0,34.366,54.645,112.737,122.053,112.737Z" transform="translate(242.287 141.645) rotate(-173)" fill="#67758f"/>
          <ellipse id="Ellipse_3" data-name="Ellipse 3" cx="39.828" cy="50.106" rx="39.828" ry="50.106" transform="translate(267.968 147.551) rotate(-164)" fill="#ebf0f9"/>
          <path id="Subtraction_5" data-name="Subtraction 5" d="M-1179.195-572.445a32.237,32.237,0,0,1-8.889-1.246,32.712,32.712,0,0,1-13.817-8.058,40.584,40.584,0,0,1-9.21-13.812,52.19,52.19,0,0,1-3.815-17.663,61.075,61.075,0,0,1,2.367-19.611c.14-.487.287-.979.438-1.463-6.455,24.769,3.772,48.554,23.286,54.15a30.138,30.138,0,0,0,8.307,1.165c17.776,0,34.455-14.869,40.559-36.157,7.05-24.588-2.5-48.839-21.73-55.21.431.105.847.216,1.235.328a32.709,32.709,0,0,1,13.817,8.058,40.583,40.583,0,0,1,9.209,13.812,52.192,52.192,0,0,1,3.815,17.663,61.074,61.074,0,0,1-2.367,19.611,61.677,61.677,0,0,1-6.93,15.669,54.539,54.539,0,0,1-10.225,12.138,44.737,44.737,0,0,1-12.449,7.843A35.61,35.61,0,0,1-1179.195-572.445Z" transform="translate(1417.767 710.265)" fill="rgba(103,117,143,0.2)"/>
        </g>
        <g id="right-leg" data-name="leg" transform="translate(856.369 714)">
          <path id="Path_5-2" data-name="Path 5" d="M122.053,0c67.408,0,122.053,35.088,122.053,78.371s-54.645,33.392-122.053,33.392S0,121.654,0,78.371,54.645,0,122.053,0Z" transform="translate(39.564 29.749) rotate(-7)" fill="#67758f"/>
          <ellipse id="Ellipse_3-2" data-name="Ellipse 3" cx="39.828" cy="50.106" rx="39.828" ry="50.106" transform="translate(0 51.221) rotate(-16)" fill="#ebf0f9"/>
          <path id="Subtraction_5-2" data-name="Subtraction 5" d="M53.322,97.9v0c19.21-6.388,28.74-30.634,21.7-55.2C68.913,21.407,52.235,6.539,34.458,6.539A30.129,30.129,0,0,0,26.151,7.7C6.639,13.3-3.59,37.084,2.865,61.852c-.161-.514-.308-1.007-.438-1.463A61.069,61.069,0,0,1,.059,40.779,52.191,52.191,0,0,1,3.874,23.116,40.581,40.581,0,0,1,13.084,9.3,32.708,32.708,0,0,1,26.9,1.247,32.237,32.237,0,0,1,35.79,0a35.611,35.611,0,0,1,13.6,2.784,44.733,44.733,0,0,1,12.449,7.842A54.532,54.532,0,0,1,72.067,22.764,61.685,61.685,0,0,1,79,38.434a61.072,61.072,0,0,1,2.367,19.61,52.191,52.191,0,0,1-3.815,17.662A40.581,40.581,0,0,1,68.34,89.518a32.71,32.71,0,0,1-13.817,8.058C54.127,97.69,53.723,97.8,53.322,97.9Z" transform="translate(92.808 137.819) rotate(180)" fill="rgba(103,117,143,0.2)"/>
        </g>
        <g id="body">
          <path id="main-body" data-name="body" d="M60.782,8.188H218.627S341.25,276.75,273,369c-35.08,47.416-85.976,25.521-141.238,27.887C82.112,395.634,33.17,413.834,0,369-68.25,276.75,60.782,8.188,60.782,8.188Z" fill="#67758f"/>
          <path id="main-body-shadow" d="M64.653,424.727c-9.691,0-19.619-.747-30.129-1.537l-.938-.07C23.562,422.366,12.2,421.513.68,421.513c-3.09,0-6.117.063-9,.186-1.678-.042-3.421-.064-5.183-.064-10.14,0-20.494.712-29.629,1.341l-.509.035c-9.759.671-18.976,1.306-28.094,1.306A133.182,133.182,0,0,1-90.751,423.1a80.492,80.492,0,0,1-17.9-4.569c-12.412-4.824-22.693-12.91-31.431-24.72a83.147,83.147,0,0,1-8.765-15.03,108.274,108.274,0,0,1-6.074-17.322,147.625,147.625,0,0,1-3.625-19.284,202.347,202.347,0,0,1-1.416-20.917,312.511,312.511,0,0,1,2.826-45.419c1.933-14.9,4.881-31.053,8.762-48-6.987,33.684-10.125,63.294-9.324,88.008.941,29.028,7.342,51.754,19.025,67.545,18.987,25.664,36.944,30.82,59.763,30.82,5.774,0,11.81-.316,18.2-.651l1.2-.063c7.2-.377,14.295-.715,21.83-.715,2.02,0,4.025.025,5.959.074,2.272-.1,4.668-.147,7.121-.147,12.542,0,25.871,1.279,38.762,2.517l.033,0c12.885,1.236,26.2,2.514,38.744,2.514h.013c31.434,0,51.646-8.371,65.534-27.143,13.686-18.5,21.127-45.969,22.116-81.648.81-29.2-2.68-64.085-10.372-103.675C116.769,135.969,94.423,72.515,87.895,54.718c13.757,33.133,39.053,98.7,53.924,165.578,3.926,17.656,6.91,34.484,8.867,50.017a334.8,334.8,0,0,1,2.86,47.56,215.757,215.757,0,0,1-1.473,21.936,156.19,156.19,0,0,1-3.755,20.215,113.189,113.189,0,0,1-6.3,18.124,85.526,85.526,0,0,1-9.1,15.664c-8.822,11.924-19.089,20.1-31.387,24.987A79.145,79.145,0,0,1,83.7,423.47,129.389,129.389,0,0,1,64.653,424.727ZM86.023,50.238-79.5,33.414l.2-.414H78.547l.015.032c.512,1.128,3.278,7.26,7.461,17.2Z" fill="rgba(68,68,68,0.4)"/>
        </g>
        <g id="belly">
          <path id="sub-body" data-name="belly" d="M8.89,24.827l124.346-8.92s70.451,159,28.2,216.264c-21.719,29.435-53.229,15.843-87.443,17.311C43.25,248.7,12.949,260-7.587,232.171-49.842,174.9,8.89,24.827,8.89,24.827Z" fill="#ebf0f9"/>
          <path id="sub-body-shadow" data-name="Subtraction 4" d="M-17.956,268.455c-6,0-12.147-.463-18.654-.954l-.58-.044c-6.207-.468-13.241-1-20.37-1-1.914,0-3.79.039-5.574.116-1.035-.026-2.114-.04-3.208-.04-6.288,0-12.693.442-18.344.832l-.319.022c-6.041.417-11.746.81-17.388.81-9.306,0-16.569-1.141-22.856-3.591a43.394,43.394,0,0,1-19.46-15.346,62.971,62.971,0,0,1-6.751-11.7,84.787,84.787,0,0,1-4.637-13.506,138.1,138.1,0,0,1-3.857-31.021c1.788,15.772,6.279,28.629,13.351,38.213,15.1,20.464,36.216,22.129,60.241,22.129,1.543,0,3.1-.006,4.6-.011h.09c1.486-.005,3.023-.011,4.551-.011,3.431,0,6.065.028,8.539.091,1.473-.063,3.016-.1,4.588-.1,7.489,0,15.154.727,21.918,1.369l.418.04c7.2.684,14,1.329,20.636,1.329,18.091,0,29.595-5.13,38.466-17.152,8.79-11.913,12.9-29.6,12.209-52.568-.557-18.577-4.239-40.677-10.943-65.686-11.742-43.8-29.15-82.772-31.1-87.072l8.5-.61.008.018C-3.41,34.083.86,43.851,6.461,58.739c3.451,9.174,6.72,18.457,9.715,27.59,3.744,11.416,7.068,22.63,9.881,33.329C33.216,146.892,37.143,171,37.73,191.314a135.923,135.923,0,0,1-2.5,32.216A79.219,79.219,0,0,1,30.956,237.4a57.175,57.175,0,0,1-6.647,11.866c-5.462,7.4-11.818,12.476-19.432,15.511C-1.422,267.286-8.678,268.455-17.956,268.455Z" fill="rgba(103,117,143,0.2)"/>
        </g>
        <g id="head">
        <g id="mane">
          <path id="mane-bg" d="M1132.449,449.247c-6.1-18.207-4.314-64.059-4.314-64.059s-37.24-35.909-39.678-79.036,11.231-86.154,29.928-93.473,89.31,48.62,89.31,48.62,13.815-8.482,28.992-11.31,31.718,0,31.718,0,44.667-71.067,61.49-72.8,48.067,22.555,64.09,63.31,0,99.71,0,99.71,14.116,32.748,19.11,60.58" transform="translate(-160 33)" fill="#67758f"/>
          <path id="mane-shadow" d="M-115.726,305.145v0h0c-.023-.064-.045-.131-.067-.2l264.955-53.066A255.327,255.327,0,0,0,138.775,213.9c-3.624-10.311-6.7-17.4-6.732-17.473a189.123,189.123,0,0,0,7.493-31.634c2.527-16.714,3.842-40.98-4.236-61.66a174.989,174.989,0,0,0-26.094-45.1C99.265,45.727,88.7,36.748,80.23,33.4a8.055,8.055,0,0,1,1.489-.309A17.04,17.04,0,0,1,83.457,33c4.263,0,9.382,1.51,14.8,4.366a78.937,78.937,0,0,1,17,12.56,118.8,118.8,0,0,1,16.686,19.946A138.61,138.61,0,0,1,145.809,96.4c3.655,9.3,5.929,20.323,6.76,32.773a195.152,195.152,0,0,1-.751,32.365,238.936,238.936,0,0,1-6.009,34.572c.149.348,3.662,8.559,7.682,19.853,2.412,6.774,4.543,13.342,6.335,19.52a211.013,211.013,0,0,1,5.092,21.207Zm64.091-178.028h0c-.128-.122-12.953-12.307-28.809-25.544C-95.1,89.336-115.452,73.641-129.164,68.361a11.775,11.775,0,0,1,3.379-.445c5.269,0,13.032,2.591,23.074,7.7A286.193,286.193,0,0,1-74.47,92.556c18.223,12.176,33.834,24.517,33.99,24.64l0,0a104.764,104.764,0,0,1,16.949-7.954C-37,116.327-51.49,127.009-51.635,127.116Z" transform="translate(1088.176 177.102)" fill="rgba(68,68,68,0.3)"/>
        </g>
        <g id="face">
          <path id="face-2" data-name="face" d="M-109.4,237.525c-6.683-3.4-13.172,11.175-15.16,11.49s-2.937-5.08-3.111-9.948c-.167-4.639,1.758-7.391,0-8.816s-8.04-1.372-14.541,2.11c-3.94,2.114-9.982,5.975-10.732.643-3.276-23.312,12.535-50.423,39.95-72.864q-.413-1.479-.726-3.089C-124.6,86.18-62.967,43.7-17.82,87.374c14.572-53.88,104.052-44.189,113.76,37.92,29.2,11.327,48.565,30.12,51.815,53.246,3.127,22.243-8.212,12.322-26,16.774-7,1.975,6.216,19.8,0,21.178-1.242.275-2.606-.163-4.3-.6-3.7-.956-9-1.912-18.106,4.529C80.9,231.1,49.632,256.011,20.123,261.78a193.451,193.451,0,0,1-37.206,3.9C-52.789,265.679-78.2,253.42-109.4,237.525Z" transform="translate(1117.027 281.449)" fill="#ebf0f9"/>
          <path id="face-shadow" d="M-23.714,244.91A143.143,143.143,0,0,1-71.546,236.8c-14.561-5-28.746-12.026-44.451-20.026,24.542,10.14,57.261,21.78,92.739,21.78a156.448,156.448,0,0,0,29.876-2.847c13.453-2.624,34.337-12.3,54.5-25.242,21.487-13.794,37.767-28.306,44.667-39.815a36.346,36.346,0,0,0,3.4-30.822c-4.074-12.444-14.441-23.467-27.054-28.768C83.369,99.2,78.535,83.143,69.2,68.095,59.361,52.235,46.007,39.88,32.561,34.2a63.5,63.5,0,0,1,19.133,7.327,69.1,69.1,0,0,1,17.126,14.09A78.68,78.68,0,0,1,82,76.578a99.925,99.925,0,0,1,7.306,27.947,120.018,120.018,0,0,1,19.96,9.846,85.5,85.5,0,0,1,15.681,12.352,61.678,61.678,0,0,1,10.814,14.565,50.462,50.462,0,0,1,5.36,16.483c.974,6.929.585,10.967-1.26,13.092-1.989,2.29-5.5,2.294-10.349,2.3a57.041,57.041,0,0,0-14.4,1.383,2.631,2.631,0,0,0-1.7,1.312c-1.105,2.1.258,6.117,1.577,10,1.259,3.708,2.449,7.21,1.493,8.908a1.956,1.956,0,0,1-1.371.958,3.769,3.769,0,0,1-.825.086,11.946,11.946,0,0,1-2.91-.538l-.018,0-.552-.145a18.3,18.3,0,0,0-4.715-.687c-4.049,0-8.43,1.706-13.391,5.216-4.5,2.609-9.887,6.142-15.588,9.883-9.066,5.949-19.34,12.691-30.207,18.538-12.587,6.772-23.52,11.005-33.423,12.941A192.837,192.837,0,0,1-23.714,244.91Zm-93.1-28.472a4.418,4.418,0,0,0-1.3-.2,4.615,4.615,0,0,0-.548.033,1.283,1.283,0,0,1,.611-.139,3.341,3.341,0,0,1,1.233.3ZM-159.99,205.16h0c.023-1.224.1-2.477.215-3.723.05.485.111.989.183,1.5A6.072,6.072,0,0,1-159.99,205.16Z" transform="translate(1123.659 302.218)" fill="rgba(103,117,143,0.2)"/>
        </g>
        <g id="features">
          <g class="open-eyes">
          <ellipse id="Ellipse_8" data-name="Ellipse 8" cx="9" cy="15" rx="9" ry="15" transform="translate(1054.008 412.299) rotate(-14)" fill="#444"/>
          <ellipse id="Ellipse_9" data-name="Ellipse 9" cx="9" cy="15" rx="9" ry="15" transform="translate(1133.008 395.299) rotate(-14)" fill="#444"/>
          <ellipse id="Ellipse_10" data-name="Ellipse 10" cx="2.5" cy="3.5" rx="2.5" ry="3.5" transform="translate(1061.29 413.175) rotate(14)" fill="#fff"/>
          <ellipse id="Ellipse_11" data-name="Ellipse 11" cx="2.5" cy="3.5" rx="2.5" ry="3.5" transform="translate(1140.29 396.175) rotate(14)" fill="#fff"/>
        </g>
          <g class="closed-eyes">
            <path id="Path_7" data-name="Path 7" d="M17.039,7.276c12.7.033,16.8,13.35,16.8,13.35s-5.312-6.957-16.363-7.469A22.352,22.352,0,0,0,0,20.625S4.339,7.243,17.039,7.276Z" transform="translate(1125.232 396.723) rotate(-14)" fill="#444"/>
            <path id="Path_8" data-name="Path 8" d="M17.036,7.276c12.7.033,16.794,13.348,16.794,13.348s-5.311-6.956-16.36-7.468A22.348,22.348,0,0,0,0,20.624S4.338,7.243,17.036,7.276Z" transform="translate(1046.892 412.55) rotate(-14)" fill="#444"/>
          </g>
          <path id="mouth" d="M1.345,20.186,51.69,17.518s11.639,33.6-23.853,33.85S1.345,20.186,1.345,20.186Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1090.577, 458.85)" fill="#444"/>
          <path id="tongue" d="M-.005,0,13.382-10.631,28.666,0s19,49.892-12.573,50.786S-.005,0-.005,0Z" fill="#d27272"/>
          <g id="muzzle">
            <path id="Path_10" data-name="Path 10" d="M1217.538,441.923s13.213,10.98,25.505,6.054,11.648-20.993,11.648-20.533" transform="translate(-138.215 39)" fill="#ebf0f9" stroke="#444" stroke-linecap="round" stroke-width="1"/>
            <path id="Path_11" data-name="Path 11" d="M1217.538,441.923s13.213,10.98,25.505,6.054,11.545-20.025,11.507-20.4" transform="translate(136.975 -382.87) rotate(21)" fill="#ebf0f9" stroke="#444" stroke-linecap="round" stroke-width="1"/>
          </g>
          <path id="nose" d="M22.348,4.739C34.5,4.739,44,7.163,44,16S34.15,32,22,32,0,24.837,0,16,10.2,4.739,22.348,4.739Z" transform="translate(1088.768 439.639) rotate(-9)" fill="#444"/>
          <path id="nose-2" data-name="nose" d="M8.035,4.739c4.369,0,7.785.8,7.785,3.726s-3.541,5.294-7.91,5.294S0,11.389,0,8.465,3.666,4.739,8.035,4.739Z" transform="translate(1093.337 443.671) rotate(-20)" fill="rgba(254,254,254,0.2)"/>
        </g>
        <g id="earphone" transform="translate(309.369 -53.898)">
        <path id="Subtraction_7" data-name="Subtraction 7" d="M-117.006,265.844h0c-.64-2.648-1.23-5.341-1.755-8.005a196.268,196.268,0,0,1,0-75.425,191.669,191.669,0,0,1,10.488-35.126,189.623,189.623,0,0,1,16.6-31.786A187.154,187.154,0,0,1-69.7,87.807a183.013,183.013,0,0,1,26.64-22.849A177.972,177.972,0,0,1-12.482,47.706a174.038,174.038,0,0,1,140.129,0,177.974,177.974,0,0,1,30.575,17.252,183.014,183.014,0,0,1,26.64,22.849A187.156,187.156,0,0,1,206.841,115.5a189.625,189.625,0,0,1,16.6,31.786,191.679,191.679,0,0,1,10.488,35.126,195.7,195.7,0,0,1,3.657,37.712A197.489,197.489,0,0,1,236.472,241l-19.689,1.384a174.541,174.541,0,0,0,1.364-21.776c0-91.776-71.822-166.44-160.1-166.44s-160.1,74.665-160.1,166.44A172.487,172.487,0,0,0-96.435,264.4L-117,265.844Z" transform="translate(687.369 166.194) rotate(-8)" fill="#444"/>
        <g id="buds" transform="translate(12.374 -47.194) rotate(3)">
          <rect id="Rectangle_1" data-name="Rectangle 1" width="14" height="88" rx="7" transform="translate(907.568 347.427) rotate(-11)" fill="#444"/>
          <path id="Path_31" data-name="Path 31" d="M8,0C18,0,55.8,6.487,55.777,43.758S18.413,88,8,88a8,8,0,0,1-8-8V8A8,8,0,0,1,8,0Z" transform="translate(920.898 343.861) rotate(-11)" fill="#e23939"/>
        </g>
        <g id="buds-2" data-name="buds" transform="translate(568.362 407.767) rotate(-21)">
          <rect id="Rectangle_1-2" data-name="Rectangle 1" width="14" height="88" rx="7" transform="translate(68.083 100.591) rotate(-169)" fill="#444"/>
          <path id="Path_31-2" data-name="Path 31" d="M8,88c10,0,47.8-6.487,47.777-43.758S18.413,0,8,0A8,8,0,0,0,0,8V80A8,8,0,0,0,8,88Z" transform="translate(54.752 97.026) rotate(-169)" fill="#e23939"/>
        </g>
      </g>
        </g>
        <g id="hands">
          <g id="hand-right" transform="translate(1109.93 691.405)">
            <path id="arm" d="M88.185,0H3.925S-1.949,30.079-1.949,70.014s5.875,89.724,5.875,89.724H59.9s6.65-46.007,14.406-85.941c2.342-12.06,7.177-34.155,7.177-34.155Z" transform="translate(1.949)" fill="#ebf0f9"/>
            <path id="arm-shadow" d="M-1208.08-498.667h-5.622l.008-.063c.639-4.383,6.436-43.809,13.089-78.066,2.548-13.118,7.707-29.4,15.334-48.38-2.56,13.4-5.388,27.054-8.4,40.568-5,22.42-8.652,44.593-10.834,59.245-2.364,15.878-3.561,26.588-3.573,26.695Zm-5.638,0h-50.338l-.007-.056c-.255-2.2-1.595-13.977-2.93-29.831-1.34-15.912-2.938-39.209-2.938-59.837,0-12.3.557-24.9,1.657-37.461.511,17.085.768,31.751.768,43.59,0,18.753,1.561,38.8,2.871,52.31,1.429,14.742,2.857,24.98,2.871,25.082l48.046,6.2Z" transform="translate(1269.93 658.405)" fill="rgba(103,117,143,0.2)"/>
            <path id="paw" d="M24.429,89.335c19.609,0,35.505-20,35.505-44.668S44.038,0,24.429,0,0,17.905,0,42.575,4.82,89.335,24.429,89.335Z" transform="matrix(-0.035, -0.999, 0.999, -0.035, 5.149, 175.485)" fill="#ebf0f9"/>
            <path id="paw-shadow" d="M-1227.994-593.771a91.385,91.385,0,0,1-14.952-1.06,38.643,38.643,0,0,1-11.794-3.686,20.011,20.011,0,0,1-7.845-7.071,22.453,22.453,0,0,1-3.106-11.215c-.3-8.6,3.3-17.014,10.14-23.706-3.6,6.209-7.317,13.633-7.554,21.619-.184,6.207,1.348,10.894,4.682,14.329,4.956,5.105,13.774,7.382,28.592,7.382,2.084,0,4.293-.042,6.753-.128,14-.489,23.825-2.189,30.906-5.349,8.924-3.982,13.113-10.188,12.806-18.97-.248-7.115-4.1-13.838-11.132-19.441-6.888-5.487-16.826-9.914-28.739-12.8,11.294.211,21.911,3.8,29.9,10.094,8.022,6.328,12.615,14.8,12.931,23.855a21.615,21.615,0,0,1-.764,6.71,18.053,18.053,0,0,1-2.649,5.506,24.916,24.916,0,0,1-10.025,7.833,59.066,59.066,0,0,1-14.776,4.32,132.5,132.5,0,0,1-17.666,1.677C-1224.275-593.807-1226.194-593.771-1227.994-593.771Z" transform="translate(1269.987 767.875)" fill="rgba(103,117,143,0.2)"/>
          </g>
          <g id="hand-left" transform="translate(1018.93 691.405)">
            <path id="arm-2" data-name="arm" d="M-1.949,0H86.606S92.48,30.079,92.48,70.014s-5.875,89.724-5.875,89.724H30.63S23.98,113.731,16.224,73.8-1.949,0-1.949,0Z" transform="translate(1.949)" fill="#ebf0f9"/>
            <path id="arm-shadow-2" data-name="arm-shadow" d="M86.437,130.873c-3.821-9.254-7.134-18.054-9.846-26.155a214.074,214.074,0,0,1-7.266-26.589C62.357,42.248,56.289.418,56.228,0h5.622c.064.444,6.676,46.139,14.406,85.941,2.781,14.321,6.207,29.438,10.182,44.931Zm-84.782-3.7C.557,114.612,0,102.014,0,89.724,0,69.095,1.6,45.8,2.938,29.886,4.393,12.61,5.861.124,5.875,0H56.228L8.168,6.2C8.155,6.29,6.706,16.744,5.3,31.285,3.987,44.8,2.426,64.841,2.426,83.595c0,11.861-.258,26.521-.768,43.573Z" transform="translate(94.43 159.738) rotate(180)" fill="rgba(103,117,143,0.2)"/>
            <path id="paw-2" data-name="paw" d="M24.429,0C44.038,0,59.934,20,59.934,44.668s-15.9,44.668-35.505,44.668S0,71.43,0,46.761,4.82,0,24.429,0Z" transform="matrix(0.035, -0.999, 0.999, 0.035, 0, 172.368)" fill="#ebf0f9"/>
            <path id="paw-shadow-2" data-name="paw-shadow" d="M46.481,60.1v0c11.909-2.889,21.843-7.316,28.73-12.8,7.035-5.6,10.884-12.326,11.133-19.441.306-8.783-3.883-14.988-12.807-18.971-7.081-3.16-16.9-4.86-30.905-5.348-2.464-.086-4.673-.128-6.753-.128-14.819,0-23.637,2.276-28.592,7.381C3.951,14.225,2.42,18.912,2.6,25.12c.237,7.983,3.952,15.408,7.554,21.619C3.318,40.047-.283,31.627.017,23.033A22.453,22.453,0,0,1,3.123,11.818a20.01,20.01,0,0,1,7.845-7.071A38.643,38.643,0,0,1,22.762,1.06,91.392,91.392,0,0,1,37.715,0c1.8,0,3.721.035,5.7.1A132.5,132.5,0,0,1,61.084,1.782,59.068,59.068,0,0,1,75.86,6.1a24.916,24.916,0,0,1,10.025,7.833,18.049,18.049,0,0,1,2.649,5.506,21.614,21.614,0,0,1,.764,6.71c-.316,9.056-4.908,17.528-12.931,23.855C68.384,56.3,57.77,59.888,46.481,60.1Z" transform="translate(90.151 174.104) rotate(180)" fill="rgba(103,117,143,0.2)"/>
          </g>
        </g>
      </g>
      

    </g>
  </g>
</svg>

  </div>
  <div>
    <audio id="audio" controls autoplay hidden>
      <source src="https://saranyamk.github.io/images-repo/codepen1.mp3">
  </audio>
  </div>
</div>
              
            
!

CSS

              
                :root {
  --note-pos-1: translate(530px, 150px) rotate(20deg);
  --note-pos-2: translate(450px, 300px) rotate(-15deg); 
  --note-pos-3: translate(1050px, 230px) rotate(10deg);
  --note-pos-4: translate(1020px, 400px) rotate(-15deg);
  --note-pos-5: translate(975px, 150px) rotate(-20deg);
  
  --note-pos-d-1: translate(530px, 150px) rotate(-20deg);
  --note-pos-d-2: translate(450px, 300px) rotate(15deg); 
  --note-pos-d-3: translate(1050px, 230px) rotate(-10deg);
  --note-pos-d-4: translate(1020px, 400px) rotate(15deg);
  --note-pos-d-5: translate(975px, 150px) rotate(20deg);
  
  --animation-time: 0.6s; 
}

$bellies: "main-belly", "main-belly-shadow", "sub-belly", "sub-belly-shadow";
$legPos: ("left-leg": translate(1066px, 714px), "right-leg": translate(856px, 714px));

@each $name, $pos in $legPos {
  @keyframes #{$name}-animation {
    100% {
      transform: $pos scaleX(1.03);
    }
  }

  .shake-#{$name} {
    animation: #{$name}-animation var(--animation-time) 0s ease-in-out infinite alternate;
  }
}

* {
  border: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#head {
  transform-origin: center;
  transform: rotate(9deg) translate(-23px, -40px);
}

#tongue {
  transform: translate(1103px, 477px) rotate(-9deg);
}

#belly {
  cursor: pointer;
}

#left-leg {
  transform: translate(1066px, 714px)
}

#right-leg {
  transform: translate(856px, 714px);
}
.info {
  margin-bottom: 10px;
  font-size: 25px;
  font-family: 'Sacramento', cursive;
}

.shake-head {
  animation: shake-head-animation var(--animation-time) 0s ease-in-out infinite alternate;
}

.toggle-tongue {
  animation: toggle-tongue-animation 0.8s 0s ease-in-out infinite alternate;
}

@each $ele in $bellies {
  .shake-#{$ele} {
    animation: shake-#{$ele}-animation var(--animation-time) 0s ease-in-out infinite alternate;
  }
}

#main-body {
  transform: translate(976px, 446px);
}
@keyframes shake-main-belly-animation {
  0% {
    transform: translate(976px, 446px) skew(-1deg);
  }
  100% {
    transform: translate(976px, 446px) skew(1deg);
  }
}

#sub-body {
  transform: translate(1037px, 507px);
}

@keyframes shake-sub-belly-animation {
  0% {
    transform: translate(1037px, 507px) skew(-1deg);
  }
  100% {
    transform: translate(1037px, 507px) skew(1deg);
  }
}

#main-body-shadow {
  transform: translate(1116px, 420px);
}
@keyframes shake-main-belly-shadow-animation {
  0% {
    transform: translate(1116px, 420px) skew(-1deg);
  }
  100% {
    transform: translate(1116px, 420px) skew(1deg);
  }
}

#sub-body-shadow {
  transform: translate(1174px, 489px);
}
@keyframes shake-sub-belly-shadow-animation {
  0% {
    transform: translate(1174px, 489px) skew(-1deg);
  }
  100% {
    transform: translate(1174px, 489px) skew(1deg);
  }
}

.closed-eyes {
  display: none;
}

@keyframes toggle-tongue-animation {
  0% {
    transform: translate(1104px, 477px) rotate(-9deg) scale(0.9);
  }
  
  100% {
    transform: translate(1104px, 478px) rotate(-9deg);
  }
}

.notes {
  transform: translate(775px, 450px);
  transform-origin: 0px 0px;
  fill: rgb(226, 57, 57);
}

@for $i from 1 through 5 {
  @keyframes notes-move-#{$i} {
    100% {
      transform: var(--note-pos-#{$i});
    }
  }
  
  @keyframes notes-dance-#{$i} {
    0% {
      transform: var(--note-pos-#{$i});
    }
    100% {
      transform: var(--note-pos-d-#{$i});
    }
  }
  
  .play.note-#{$i} {
    transform-origin: 25px 25px;
    animation: notes-move-#{$i} var(--animation-time) 1 forwards, notes-dance-#{$i} var(--animation-time) var(--animation-time) ease-in-out infinite alternate;
  }
  
}

@keyframes shake-head-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(18deg) translate(-60px, -85px);
  }
} 

              
            
!

JS

              
                window.onload = function() {
  let belly = document.getElementById("belly");
  let audio = document.getElementById("audio");
  let isPlaying = false;
  
  $(".closed-eyes").hide();
  
  belly.onclick = function() {
    if(isPlaying) {
      audio.pause(); 
      $(".open-eyes").show();
      $(".closed-eyes").hide();
    } else {
      $(".open-eyes").hide();
      $(".closed-eyes").show();
      audio.play();
    }
    toggleAnimation();
  }
  
  audio.onended = function() {
    $(".open-eyes").show();
    $(".closed-eyes").hide();
    toggleAnimation();
  };
  
  function toggleAnimation() {
    isPlaying = !isPlaying;
    $("#head").toggleClass("shake-head");
    $("#tongue").toggleClass("toggle-tongue");
    $("#main-body").toggleClass("shake-main-belly")
    $("#main-body-shadow").toggleClass("shake-main-belly-shadow")
    $("#sub-body").toggleClass("shake-sub-belly")
    $("#sub-body-shadow").toggleClass("shake-sub-belly-shadow")
    $("#left-leg").toggleClass("shake-left-leg");
    $("#right-leg").toggleClass("shake-right-leg");
    $.each($("path.notes"), (idx, ele) => {
       $(ele).toggleClass("play");
    })
  };
}
              
            
!
999px

Console