svg.corgo__drop(xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 356.6693 305.6711' stroke-linecap='round' stroke-linejoin='round')
  defs
    clippath#rainbowClip
      path(d='M88.5742 48.4925c-13.22-12.702-28.8574-22.7919-44.6114-32.168-7.3913-4.399-16.8888-14.0411-24.5136-13.8203-1.7596.051-3.4185.627-4.9297 1.914C2.3375 14.7943 4.6287 35.129 3.1757 51.0649c-4.118 45.1603 10.1852 74.853 44.3172 103.592-4.7515 8.6543-16.5721 20.4835-13.9747 27.8905 1.865 3.15 12.5781-8.4386 12.5781-8.4386 10.0849 8.8476 21.8906 11.061 24.9017 12.1924 15.856 5.953 29.449 15.9276 45.664 22.0156 2.376.893 14.6352 7.522 17.0762 6.414 1.083-.492 2.288-6.0902 2.75-7.3202 1.967-5.239 5.2683-9.6567 9.1543-13.2617 3.084-2.861 10.0612-5.791 14.4922-7.086 1.334-.39 3.9648-1.2949 3.9648-1.2949s-2.5286-5.6271-3.3906-8.5781c-1.719-5.882-4.3832-11.6537-5.8242-17.8457-3.103-13.321-10.5339-47.3326-27.1392-58.7627-8.8603-27.546-21.9703-35.5618-39.1713-52.0889z' fill='#f55' stroke='#000' stroke-width='5')
      path(d='M319.656 191.1065c-1.2365-3.381 3.0897 10.151 4.453 4.1214 2.966-13.1166-11.9401-26.918-13.4786-30.496 0 0 5.8561-9.9945 9.5834-13.5708 14.5143-13.9265 22.3843-30.7225 27.0994-49.9747 7.3358-29.9523 9.67-45.9948 2.724-66.8336-3.148-9.4438-5.077-20.215-6.719-30.0666-3.985 0-18.5102 9.765-23.4962 12.2578-34.855 17.4276-68.762 49.3209-82.2364 88.3536-5.2803 14.9238-15.0513 19.5148-20.4663 30.0448-6.204 12.062-10.0128 18.7897-11.3108 32.4747-.31 3.272-4.1602 15.5248-3.0672 18.3508 2.045 5.286 4.1535-3.1826 18.9948 9.9698 15.347 13.6008 1.4772 21.2537 12.0232 20.5077 4.544-.321 11.311-6.25 15.677-7.939 27.2645-7.414 49.0885-24.3885 70.2197-17.2z' fill='#f55' stroke='#000' stroke-width='5')
    g#rainbow
      rect(width='400.1059' height='28.6017' x='171.3194' y='339.154' ry='0' fill='red' stroke='red')
      rect(ry='0' y='138.7289' x='171.3041' height='28.6017' width='400.1059' fill='#f0f' stroke='#f0f')
      rect(width='400.1059' height='28.6017' x='171.3063' y='167.361' ry='0' fill='purple' stroke='purple')
      rect(ry='0' y='195.9931' x='171.3085' height='28.6017' width='400.1059' fill='#00f' stroke='#00f')
      rect(width='400.1059' height='28.6017' x='171.3107' y='224.6253' ry='0' fill='#0fc' stroke='#0fc')
      rect(ry='0' y='253.2574' x='171.3128' height='28.6017' width='400.1059' fill='#0f0' stroke='#0f0')
      rect(width='400.1059' height='28.6017' x='171.3151' y='281.8897' ry='0' fill='#ff0' stroke='#ff0')
      rect(ry='0' y='310.5216' x='171.3172' height='28.6017' width='400.1059' fill='#f60' stroke='#f60')
    g#rainbow-mask
      use(href='#rainbow')
      use(href='#rainbow' transform='translate(0, -230)')
  g
    path(d='M286.8436 136.1044c-39.9324-36.8122-45.784-30.164-71.9092-36.4787-21.2198-5.129-44.129-4.814-65.492-.3178-29.4531 6.1989-31.1502.6584-82.4576 36.7965 0 0-29.8512 50.3223-30.8882 52.9542-1.971 5.002-3.5343 25.0247 1.5427 29.4287.378.328.3835-.5557.4375-.6777.64-1.449 6.863-11.8523 6.914-11.6133.821 3.799-2.0877 10.147-2.5507 14.045-.973 8.182 1.5596 19.226 5.6406 26.121.858 1.45 1.1285-1.4848 1.0625-2.0898-.357-3.3-.4657-6.3782.3653-9.6192.189-.739.5683-2.2168.5683-2.2168s-.2481 1.889-.2031 2.836c.157 3.298.8689 6.5434 1.4219 9.8144 1.337 7.921 6.56 13.1988 10.246 19.4258.2105.3562.3837-5.4009.67-8.7461.2645 1.6968.5452 1.6498 1.3945 3.7637 1.649 4.108-.3172-.5815.9668 3.3965 1.574 4.874 3.706 9.6721 6.082 14.1601.4237.801 4.957 6.627 7.4024 8.8067 3.3087 3.9784 9.1033 7.0903 12.4102 9.1347 1.262.781 2.46 1.7197 3.871 2.3047.705.292 2.9558.7554 2.2168.5664-2.439-.625-5.9508-4.1213-7.6738-5.9043-.754-.78-3.039-2.5255-1.957-2.6015 4.437-.315 9.039 4.0823 13.041 5.4433 4.927 1.675 10.2384 2.624 15.2734 3.914l2.2422.5743c-1.5331-.6034-2.963-1.3478-4.1445-2.373-.064-.056.164.0415.246.0625 2.052.526 4.1053 1.052 6.1583 1.578 1.97.505 3.924 1.0887 5.912 1.5177 4.753 1.025 12.578 2.639 17.379 1.828 1.048-.177 3.8918-.0851 3.0898-.7812-.6091-.5287-1.6523-.9118-2.6914-1.1855.108.0155.2586.0492.3536.0605 3.616.43 7.0326 1.2088 10.7246 1.1738 8.779-.085 17.6355-.3296 26.1465.4024 3.4549.2973 31.066-4.3841 35.2148-5.2715-1.4188.5708-3.5242 2.3747-4.709 2.748-.3733.1177-.9536.1457-1.586.129 8.3812 1.0669 18.492 2.5784 26.1895.4687 6.411-1.757 12.8148-5.0752 17.8008-9.4922.68-.603 4.5991-5.2346 5.7871-5.0996 1.733.197-2.402 2.5354-3.707 3.6914-1.792 1.587-12.9611 13.0988-12.0371 14.2598.379.476 1.1578-.388 1.7168-.629 3.1397-1.3503 13.9028-7.996 19.0937-12.9785-1.6567 1.9755-4.4001 4.2778-4.6406 6.3965-.088.776 1.4638-.6226 2.0488-1.1406 2.073-1.836 4.028-3.4449 6.088-5.3399 4.51-4.1486 10.8637-9.291 13.5937-15.3164-.7177 1.6375-4.0453 9.2743-3.8633 9.295.858.098 4.9062-6.6692 5.4922-7.3262 2.965-3.33 6.2088-6.8624 8.6953-10.711.1156.7258.3683 1.379.7988 1.92.194.243 3.726-5.4714 3.955-5.8574 3.034-5.11 6.2762-9.3958 6.9552-15.3848.359-3.159.8047-9.502.8047-9.502s1.8422 3.745 2.3632 5.75c.339 1.307.77 5.2844.922 3.9434 1.061-9.349 1.3015-16.7051-.9005-25.8711-.051-.211.1274-2.3195.2754-2.4375.355-.282.4475.7918.6895 1.1758 2.08 3.305 5.6914 10.2402 5.6914 10.2402s2.0403-5.838 1.4003-8.174c-.989-3.607-7.673-10.2202-6.041-13.7342.029-.064 1.422 1.1686 1.5 1.2656 1.203 1.512 2.5331 3.0848 3.8711 4.5528.746.819 2.3653 3.3031 2.4903 2.2011 6.2802-10.5408-1.8021-26.6556-3.4253-25.6492 1.574-2.419 4.2152 3.1739 6.4732 1.3759' fill='#f9f9f9' stroke='#000' stroke-width='5')
    g(clip-path='url(#rainbowClip)')
      g(transform='translate(160 -160) rotate(135 180 150)' fill-rule='nonzero')
        g.corgo__face
          use(xlink:href='#rainbow-mask')
          use(xlink:href='#rainbow-mask' transform='translate(0 -460)')
    path(d='M209.5749 299.2139c-1.01-.1286-2.0959-.2731-3.045-.3809-1.1472-.13 1.1786.3314 3.045.3809zM117.4811 299.3252c3.448 1.3571 7.479 1.9192 10.8106 2.7734 1.149.294-2.2983-.5907-3.4473-.8847zM281.9518 272.9268c-.0546.1702-.1083.3332-.162.455-.0165.0371-.1846.4304-.2169.504.14-.3168.2599-.6374.379-.959z' fill='purple' stroke='#000' stroke-width='5')
    path(d='M88.5742 48.4925c-13.22-12.702-28.8574-22.7919-44.6114-32.168-7.3913-4.399-16.8888-14.0411-24.5136-13.8203-1.7596.051-3.4185.627-4.9297 1.914C2.3375 14.7943 4.6287 35.129 3.1757 51.0649c-4.118 45.1603 10.1852 74.853 44.3172 103.592-4.7515 8.6543-16.5721 20.4835-13.9747 27.8905 1.865 3.15 12.5781-8.4386 12.5781-8.4386 10.0849 8.8476 21.8906 11.061 24.9017 12.1924 15.856 5.953 29.449 15.9276 45.664 22.0156 2.376.893 14.6352 7.522 17.0762 6.414 1.083-.492 2.288-6.0902 2.75-7.3202 1.967-5.239 5.2683-9.6567 9.1543-13.2617 3.084-2.861 10.0612-5.791 14.4922-7.086 1.334-.39 3.9648-1.2949 3.9648-1.2949s-2.5286-5.6271-3.3906-8.5781c-1.719-5.882-4.3832-11.6537-5.8242-17.8457-3.103-13.321-10.5339-47.3326-27.1392-58.7627-8.8603-27.546-21.9703-35.5618-39.1713-52.0889z' fill='none' stroke='#000' stroke-width='5')
    path(d='M21.601 22.0181c-4.342 6.191-2.725 13.5888-4.127 20.7188-6.421 32.6759 5.546 50.0999 18.304 78.2009 1.421 3.131 19.278 28.432 22.596 26.926.73-.332 1.043-3.282 1.488-3.965 3.76-5.764 10.092-13.507 16.096-16.92 5.562-3.161 14.906-8.798 18.459-13.945.188-.273 1.49-1.175 1.297-1.601-1.546-3.405-11.171 1.025-11.171 1.025s.436-1.468.801-2.135c1.435-2.619 9.113-6.296 12.012-6.971.081-.019 7.14-1.507 6.368-2.133-5.595-4.533-12.899-3.017-19.023-1.228-.563.165-5.966 3.018-6.368 2.132-4.369-9.622 26.021-12.067 29.476-13.635 1.708-.776-4.143-6.265-4.801-6.674-8.22-5.115-16.605-17.6508-23.972-24.3738-14.449-13.186-24.4356-19.6152-42.0853-30.0576-4.538-1.7038-12.3458-9.6483-15.3498-5.3643z' fill='#f4d7d7' stroke='#000' stroke-width='5' stroke-linecap='butt')
    g.corgo__tongue(fill='#ff2a2a' stroke='#000' stroke-width='5')
      path(d='M159.9833 240.0494c-.474 16.418 11.343 40.775 26.014 38.779 9.579-1.303 19.114-26.612 15.311-37.485M179.7823 239.2694c-.984 6.954 1.203 14.907 3.955 20.97')
    path(d='M122.4533 236.8574c8.762 15.416 25.51 17.002 40.331 10.273 3.489-1.584 9.94-8.879 13.614-8.457 10.163 1.166 17.062 10.041 27.063 12.249 7.994 1.765 33.159-13.25 35.579-19.694' fill='#fff' stroke='#000' stroke-width='5')
    path(d='M181.2953 201.5424c-10.0228.5658-31.162 3.794-25.932 15.314 3.868 8.519 18.7808 16.2655 29.274 13.776 8.42-1.9976 18.0993-12.0276 16.021-20.428-1.6982-6.8638-12.3035-9.0606-19.363-8.662z' stroke='#000' stroke-width='5' stroke-linecap='butt')
    path(d='M319.656 191.1065c-1.2365-3.381 3.0897 10.151 4.453 4.1214 2.966-13.1166-11.9401-26.918-13.4786-30.496 0 0 5.8561-9.9945 9.5834-13.5708 14.5143-13.9265 22.3843-30.7225 27.0994-49.9747 7.3358-29.9523 9.67-45.9948 2.724-66.8336-3.148-9.4438-5.077-20.215-6.719-30.0666-3.985 0-18.5102 9.765-23.4962 12.2578-34.855 17.4276-68.762 49.3209-82.2364 88.3536-5.2803 14.9238-15.0513 19.5148-20.4663 30.0448-6.204 12.062-10.0128 18.7897-11.3108 32.4747-.31 3.272-4.1602 15.5248-3.0672 18.3508 2.045 5.286 4.1535-3.1826 18.9948 9.9698 15.347 13.6008 1.4772 21.2537 12.0232 20.5077 4.544-.321 11.311-6.25 15.677-7.939 27.2645-7.414 49.0885-24.3885 70.2197-17.2z' fill='none' stroke='#000' stroke-width='5')
    path(d='M332.2077 21.2158c-3.97 6.8469 5.168 19.8087 5.115 29.9298-.1307 24.9388-.371 52.712-13.376 73.612-3.252 5.226-7.802 9.275-10.948 14.33-1.703 2.738-6.984 9.495-9.574 10.671-.197.089-.406-.153-.61-.229-3.655-1.373-18.71-18.508-21.111-22.541-2.695-4.529-27.347-23.345-27.439-24.221-.082-.786 2.476.234 2.669.306 2.299.863 15.713 5.767 17.649 4.888 4.007-1.819-11.616-11.609-11.774-13.12-.081-.766 19.281 2.91 18.413.999-2.379-5.241-17.969-7.263-18.067-7.48-1.567-3.45 6.526-12.93 8.203-15.361 11.425-16.55 25.777-26.6287 41.229-38.449 4.204-3.2153 19.76-13.5738 19.621-13.3348z' fill='#f4d7d7' stroke='#000' stroke-width='5' stroke-linecap='butt')
    g.corgo__eyes
      g(fill-rule='nonzero' transform='translate(-160.9427 -38.6826)')
        circle(r='16.2076' cy='211.9703' cx='289.5127')
        circle(r='3.8136' cy='205.6144' cx='283.1568' fill='#fff')
      g(transform='translate(-55.4342 -38.6826)' fill-rule='nonzero')
        circle(cx='289.5127' cy='211.9703' r='16.2076')
        circle(cx='283.1568' cy='205.6144' r='3.8136' fill='#fff')
    g.corgo__shades
      path(d='M78.4551 120.6422c-9.2003-.0987-18.8902.2566-32.2304 3.0128l-20.2408 3.9134 3.2622 21.258c2.96.4148 7.045 1.4365 8.9801 4.0268 4.9865 6.675 1.6983 13.1276 2.8314 24.9155 3.7751 39.2723 16.8513 47.4915 37.1027 49.8536 10.6052 1.237 32.2534 3.2266 47.045-2.0247 13.3678-4.7458 25.7612-13.9505 34.1514-25.3885 8.8695-12.0913 9.8225-26.0545 15.328-36.6432 3.9018-7.504 10.8852-5.3515 13.088.5522 4.1718 11.1815 6.1894 23.9997 15.059 36.091 8.3902 11.438 20.7835 20.6427 34.1514 25.3885 14.7916 5.2513 36.4397 3.2617 47.045 2.0247 20.2514-2.362 33.3308-10.5813 37.1059-49.8536 1.1331-11.7879-2.1551-18.2406 2.8314-24.9155 1.9988-2.6757 6.3098-3.6914 9.2846-4.0786l3.246-21.1511-20.5291-3.9685c-21.3444-4.4099-33.3483-2.6709-48.9433-2.7666-5.7862-.0355-12.4076.162-18.5692.81-11.487 1.2079-22.867 3.3666-34.1741 5.7242-11.2912 2.3543-22.0366 8.6242-33.5684 8.4002-11.1237-.216-21.1575-7.035-32.0393-9.3526-11.4951-2.4484-20.956-4.391-34.9354-4.7719-6.776-.1846-12.783-.8454-18.5692-.8099-5.8481.0358-11.1927-.187-16.7129-.2462z')
      path(d='M89.7494 128.9306c-14.2607.2365-35.068.998-40.2612 17.3187-4.6307 21.5555-4.4116 46.3107 8.1086 64.4997 10.4555 15.1896 33.0295 12.209 49.841 11.6194 26.7162-.937 49.6728-21.7453 56.7698-47.1995 2.727-10.96 5.521-16.5352.9838-27.399-10.8193-12.6558-28.413-16.65-43.2297-18.3305-10.6278-.4329-21.4808-.6262-32.2123-.5088z' fill='#333')
      path(d='M48.4155 134.3414a5.7662 2.392 0 01-5.7367 2.392 5.7662 2.392 0 01-5.7954-2.3675 5.7662 2.392 0 015.6774-2.4163 5.7662 2.392 0 015.8535 2.3429' fill='#b3b3b3')
      path(d='M272.441 128.9306c14.2608.2365 35.068.998 40.2613 17.3187 4.6306 21.5555 4.4115 46.3107-8.1086 64.4997-10.4556 15.1896-33.0295 12.209-49.841 11.6194-26.7163-.937-49.6729-21.7453-56.7698-47.1995-2.727-10.96-5.5212-16.5352-.9839-27.399 10.8193-12.6558 28.413-16.65 43.2298-18.3305 10.6277-.4329 21.4808-.6262 32.2122-.5088z' fill='#333')
      path(d='M313.775 134.3414a5.7662 2.392 0 005.7367 2.392 5.7662 2.392 0 005.7954-2.3675 5.7662 2.392 0 00-5.6775-2.4163 5.7662 2.392 0 00-5.8535 2.3429' fill='#b3b3b3')
      path(d='M111.706 129.1104l-27.1216 93.7303c7.7536.4265 15.8063-.2259 22.8518-.473.3449-.012.6867-.0428 1.0302-.0615l26.2729-90.7855c-4.3366-.9588-8.664-1.6134-12.7769-2.0798-3.398-.1384-6.8236-.2434-10.2564-.3305zM95.2263 128.9096c-1.8273.0024-3.6561-.0005-5.478.0194-1.5285.0254-3.1593.0705-4.8108.1264l-24.9673 84.6109c2.4439 2.5824 5.3295 4.4835 8.5168 5.8636z' fill='#fff')
View Compiled
*
  box-sizing border-box
body
  background-color hsl(280, 60%, 40%)
  min-height 100vh
  display flex
  align-items center
  justify-content center

.corgo__drop
  height 50vmin

.corgo__face
  animation glisten 2s 2.5s infinite linear

.corgo__eyes
  transform-origin 50% 55%
  animation blink 4s infinite linear

.corgo__tongue
  animation wag 0.2s infinite linear

.corgo__shades
  transform-origin 50% 50%
  animation drop 0.5s 2s both ease-out

@keyframes drop
  from
    transform scale(0) translate(0, -150%)

@keyframes wag
  0%, 100%
    transform translate(0, -2px)
  50%
    transform translate(0, 0)

@keyframes blink
  0%, 24%, 26%, 100%
    transform scaleY(1)
  25%
    transform scaleY(0)

@keyframes glisten
  to
    transform translate(0, 460px)
View Compiled
document.body.addEventListener('click', () => {
  const MARKUP = document.body.innerHTML
  document.body.innerHTML = ''
  requestAnimationFrame(() => {
    document.body.innerHTML = MARKUP
  })
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.