Back to Components
No, YOU Hang Up First! — A Playful SVG Animation Challenge
Component

No, YOU Hang Up First! — A Playful SVG Animation Challenge

CodewithLord
October 4, 2025

This creative web animation combines HTML and SVG to bring a fun and expressive design to life — inspired by the CodePen October 2025 “Mask” Challenge.

🧠 Description

This creative web animation combines HTML and SVG to bring a fun and expressive design to life — inspired by the CodePen October 2025 “Mask” Challenge. Using vector graphics, clever path shaping, and smooth text effects, the project delivers a humorous “No, YOU hang up first!” theme with a hand-drawn style. The SVG structure represents illustrated elements like a cloak, face, and phone receiver, while the text adds a lighthearted tone reminiscent of cartoon-style love calls.


💻 HTML Code


1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>CodewithLord - Mask Hangup Page</title>
7    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Chewy&amp;display=swap''><link rel="stylesheet" href="./style.css">
8
9  </head>
10    
11  <body>
12  <div class="container">
13	<h1>No, <span class="you">YOU</span> <br/>hang up first!</h1>
14	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 777.59 528.7"><g id="body"><path id="cloak" d="M237.02.01c16.49.34,24.33,3.6,51.74,22.24,19.8,13.46,32.68,14.67,45.46,25.63,2.98,2.55,10.47,14.33,6.77,24.18-.49,1.3-2.56,6.22-7.25,7.74-4.83,1.56-10.76-1.03-13.54-4.84-2.1-2.87-1.51-5.22-4.35-7.74-1.54-1.37-5.8-2.42-5.8-2.42,0,0,10.01,19.57,14.02,42.07,5.1,28.6-.48,54.16-.48,54.16,0,0,18.96,5.59,39.65,19.34,20,13.29,16.84,24.84,46.91,56.58,11.65,12.3,24.66,21.76,24.66,21.76,0,0,42.51-20.53,81.24-20.31,20.13.11,35.81,8.35,59.48,20.79,22.67,11.92,20.38,16.66,42.56,29.01,30.72,17.11,37.21,9.92,65.28,26.6,20.3,12.06,35.12,23.39,46.37,35.11,17,17.69,33.08,4.51,39.1,37.59,3.37,18.51-69.13,18.27-139.15,23.53-51.14,3.84-95.75,4.35-95.75,4.35-42.81.49-47.57-1.44-71.09,1.45-38.59,4.74-42.16,5.46-70.46,8.45-23.56,2.49-47.05-1.68-47.05-1.68,0,0-8.14,19.27-26.6,30.95-12.96,8.21-12.28,4.96-62.38,27.56-4.19,1.89-19.18,8.7-37.72,9.19-5.14.14-10.08-.23-14.99-2.9-6.97-3.79-10.22-10.25-13.54-17.89-11.06-25.43-14.99-44.49-14.99-44.49-5.09-24.69-7.25-31.92-7.25-31.92,0,0-20.14,7.37-59,28.53-27.27,14.85-37,17.23-43.52,18.38-9.34,1.63-28.5,4.71-45.94-5.8-4.03-2.43-11.98-7.36-16.44-16.93-4.04-8.66-3.71-17.91-.48-30.95,3.21-12.96,9.66-31.16,32.4-64.32,13.61-19.85,20.24-27.48,31.43-39.65s25.79-23.13,45.94-28.53c12.42-3.33,23.21-7.74,23.21-7.74,0,0-.77-19.53,7.25-35.3,4.75-9.35,9.48-9.32,10.16-16.44.81-8.63-4.18-10.59-6.43-23.82-1.53-8.98-1.43-11.58-3.96-19.2-2.57-7.75-5.66-7.19-6.3-11.29-1.77-11.3,1.16-23.22,4.25-41.62,2.88-17.17,5.16-37.56,17.76-53.5C165.04,37.3,196.97-.8,237.02.01Z"/><g id="legs"><path id="front-leg" d="M631.25,158.7c14.46,16.12,3.26,47.31,9.02,86.46,1.19,8.06.76.59,21.05,62.4,15.67,47.72,17.13,55.85,18.04,63.91,3.26,28.82,54.67,39.69,73.68,24.06,9.06-7.45,21.31-17.52,24.06-33.83,1.95-11.57-2.18-20.9-10.53-39.1-6.95-15.15-14.82-28.25-32.33-53.38-19.64-28.18-17.89-23.41-27.07-37.59-7.38-11.4-21.54-34.63-33.08-66.16-7.02-19.18-10.5-28.95-9.02-38.34,1.52-9.69,5.75-15.38,30.07-45.11,23.13-28.27,30.92-37.32,27.82-45.86-2.55-7.02-11.15-10.14-14.29-11.28-11.9-4.32-22.86.5-28.57,3.01-18.15,7.98-27.31,23.92-31.58,31.58-8.66,15.55-3.52,17.21-11.28,27.07-9.7,12.33-20.96,13.8-27.82,28.57-2.05,4.42-2.71,7.88-2.26,11.28.78,5.83,4.54,9.32,9.77,15.04,5.05,5.52,9.29,11.73,14.29,17.29Z"/><path id="back-leg" d="M569.68,202.96c17.57,9.86,17.05,40.69,33.87,73.45,3.46,6.74.84.3,37.25,48.65,28.11,37.34,31.84,44.06,35.05,50.88,11.51,24.41,60.05,18.56,72.11-.9,5.75-9.28,13.52-21.82,11.05-37.01-1.75-10.77-8.19-17.75-20.99-31.28-10.66-11.26-21.52-20.44-44.48-37.32-25.74-18.93-22.77-15.25-35.11-25-9.91-7.83-29.36-24.05-48.97-48.36-11.93-14.79-17.93-22.36-19.44-31.07-1.57-8.99.46-15.27,12.96-48.75,11.89-31.83,16.04-42.14,10.75-48.73-4.35-5.42-12.86-5.59-15.96-5.65-11.78-.24-19.98,7.29-24.26,11.21-13.6,12.47-16.88,29.25-18.35,37.28-2.97,16.29,2.06,16.22-1.82,27.22-4.85,13.77-14.32,18.44-15.94,33.5-.48,4.51-.03,7.75,1.39,10.61,2.44,4.9,6.79,6.85,13.12,10.31,6.1,3.34,11.7,7.54,17.77,10.95Z"/></g><g id="highlights"><path class="cls-8" d="M269.89,265.37c1.47-11.45,5.18-29.35,15.58-48.84,9.89-18.54,21.92-31.17,30.31-38.74"/><path class="cls-8" d="M250.94,227.06c5.46-7.93,11.78-18.76,16.84-32.42,4.11-11.08,6.34-21.18,7.58-29.47"/><path class="cls-8" d="M348.14,420.67c9.13-18.98,15.3-47.06,22.38-76.98,6.94-29.33,9.26-55.42,9.68-76.21"/><path class="cls-8" d="M254.31,344.53c6.94,2.33,17.98,7,29.05,16.42,10.53,8.96,16.76,18.54,20.21,24.84"/><path class="cls-8" d="M250.94,369.37c3.26.62,7.04,1.74,10.95,3.79,14.35,7.53,19.59,21.93,21.05,26.53"/><path class="cls-8" d="M479.5,284.17c-6.36-1.4-14.87-3.99-24.05-9.02-11.49-6.29-15.65-10.82-20.52-16.29"/><path class="cls-8" d="M601.94,277.9c7.42,7.12,19.22,13.17,31.73,19.93,12.27,6.62,23.61,10.16,32.81,12.11"/></g></g><g id="Layer_3"><g id="face"><path class="cls-8" d="M218.52,24.31c15.47,1.4,31.33,14.04,37.75,26.8,17.57,34.9,23.07,58,22.4,90.62-.17,8.45-7.84,16.16-15.52,18.8-11.71,4.03-24.53-6.79-24.53-6.79,0,0,.28,5.41,3.48,8,5.17,4.19,13.4,4.86,13.4,4.86,0,0-8.69,24.1-18.4,51.37-8.16,22.91-9.14,30.01-18.8,51.57-6.07,13.56-13.97,13.28-19.15,12.76-9.1-.91-13.13-13.83-13.45-16.39-1.38-10.87-2.7-19.53-3.45-24.15-2.59-15.87-4.85-34.74-8.45-48.64-6.04-23.27-9.54-36.98-9.54-36.98,0,0,3.87-.65,6.83-3.22,2.12-1.84,3.22-5.23,3.22-5.23,0,0-5.88,4.17-12.46,4.02-6.08-.14-10.53-4.82-12.06-6.43-6.73-7.08-7.17-16.91-4.97-25.47,2.29-8.92,7.03-6.67,10.18-17.59,3.28-11.38,1.68-19.93,6.21-30.53,8.11-18.97,18.43-30.36,20.7-32.26,4.79-4.01,18.43-16.78,36.62-15.13Z"/><path d="M187.37,61.46c4.72-1.81,8.99.37,9.63.71.59.31,3.96,2.1,3.82,4.25-.03.5-.27,1.25-.85,1.56-.55.29-1.21.07-2.27-.42-1.79-.85-2.77-1.61-3.4-1.98-2.18-1.31-5.15-1.09-7.08-.28-2.73,1.14-3.37,2.94-4.67,4.81-1.13,1.62-1.49,3.88-3.26,5.81-.34.37-.92.95-1.56.85-.81-.13-1.23-1.3-1.27-1.42-.27-.76.33-1.88,4.25-7.79,2.68-4.05,4.72-5.35,6.66-6.09Z"/><path d="M216.68,68.4c.41.53,1.5.34,1.84.28,1.83-.32,2.37-1.88,3.82-2.97,2.58-1.95,6.24-1.06,6.51-.99,3.91,1.01,5.87,5.27,6.51,6.66,1.27,2.76,2.47,7.56,4.11,9.49.61.71,1.11.84,1.42.85.79.03,1.4-.67,1.56-.85,1.89-2.16-2.41-10.25-2.69-10.76-3.23-5.99-4.87-9.02-8.64-10.34-.31-.11-4.69-1.56-8.92.71-3.93,2.11-6.44,6.75-5.52,7.93Z"/><path d="M192.46,79.45c4.49.21,7.46,6.66,7.65,7.08,5.79,12.97-8.19,29.99-11.47,33.99-3.75,4.57-9.39,11.24-18.27,12.75-2.43.41-7.61,1.29-11.33-1.98-3.64-3.21-3.42-8.23-3.4-8.64.06-1.02.4-4.13,6.23-10.34,4.93-5.24,6.26-4.69,10.2-8.78,4.42-4.59,3.54-6.1,9.35-14.02,4.82-6.57,7.57-10.22,11.05-10.05Z"/><path d="M221.78,80.44c.72-.1,3.21-.32,7.65,3.54,7.95,6.92,5.59,12.54,11.75,20.96,6.08,8.3,12.08,7.91,18.55,18.27,1.37,2.19,2.95,5.16,2.55,8.78-.39,3.51-2.53,6.72-4.67,8.21-7.81,5.44-27.15-3.86-37.39-17.99-1.85-2.54-10.03-13.83-7.65-27.19.84-4.7,3.72-13.78,9.21-14.59Z"/><path d="M201.1,130.43c3.15.05,5.45,2.96,10.05,8.78,3.45,4.36,3.99,6.5,3.82,8.36-.04.41-.29,3.17-2.12,4.11-.44.22-1.3.52-5.24-.85-4.29-1.49-4.67-2.33-6.8-2.41-1.57-.06-2.88.35-4.96.99-2.71.84-3.53,1.6-4.96,1.27-1.33-.3-2.44-1.36-2.97-2.41-1.89-3.73,2.58-9.29,4.11-11.19,2.76-3.43,5.4-6.71,9.06-6.66Z"/><path d="M202.84,166.92c1.98-.08,5.46-.23,9.11,1.58,7.59,3.76,9.62,12.86,10.51,16.81.78,3.51,1.12,7.46-.18,17.51-1.53,11.84-2.89,13.19-5.43,26.97-1.63,8.84-4.4,17.5-5.25,26.44-.15,1.59-.6,6.67-4.2,10.86-.9,1.05-3.61,4.2-6.65,3.85-1.55-.18-4.08-1.37-6.65-8.05-4.51-11.69-1.23-19.59-1.75-32.57-.57-14.19-4.88-14.8-7.18-38-.9-9.12-.79-14.6,2.8-18.91,4.95-5.94,13.84-6.43,14.88-6.48Z"/></g><g id="phone_receiver"><path class="cls-7" d="M97.28,154.1c-.92-10.29,3.91-21.76,9-30.75,2-3.54,4.26-6.97,7.09-9.88,2.52-2.59,5.49-4.75,8.71-6.4,5.03-2.57,10.7-3.89,16.34-3.8.88.01,1.81.08,2.56.54,1.78,1.1,1.64,3.68,1.28,5.74-.84,4.84-1.67,9.67-2.51,14.51-.72,4.14-1.43,8.41-.52,12.51.86,3.88,3.11,7.28,4.89,10.83.73,1.47,1.4,3.01,1.55,4.64s-.31,3.4-1.52,4.5c-1.43,1.3-3.56,1.43-5.48,1.22-1.92-.21-3.85-.69-5.76-.36-2.26.39-4.17,1.86-5.87,3.41-.35.31-1.43,1.42-1.43,1.42,0,0-1.12-.91-1.73-1.29-6.2-3.83-13.29-6.2-20.54-6.88-1.41-.13-2.5.08-4.14-.12l-1.94.15Z"/><path d="M98.78,154.1c-.78-9.54,2.93-18.98,7.3-27.26,2.21-4.19,4.65-8.35,7.9-11.83s7.56-6.38,12.17-8.1c2.23-.83,4.55-1.44,6.89-1.79,1.19-.18,2.39-.28,3.59-.32,1.03-.04,2.68-.3,3.58.32,1.45.98.62,3.91.38,5.26-.46,2.66-.92,5.32-1.38,7.98-.87,5.05-2.22,10.32-1.87,15.47s2.81,9.19,5.07,13.56c1.12,2.15,2.72,5.22,1.15,7.56-1.48,2.2-4.96,1.32-7.11,1.04-2.76-.36-5.26,0-7.63,1.52-1.59,1.03-2.96,2.33-4.28,3.68h2.12c-4.21-3.42-9.58-5.63-14.77-7.06-4.76-1.31-9.71-1.9-14.63-1.52-1.91.15-1.93,3.15,0,3,4.52-.35,9.02.13,13.41,1.3,4.8,1.27,9.97,3.24,13.87,6.4.62.51,1.51.63,2.12,0,1.23-1.26,2.5-2.51,4.02-3.43,2.59-1.56,5.14-.89,7.97-.6,2.27.23,4.8-.04,6.54-1.66s2.22-4.13,1.86-6.4c-.43-2.69-1.93-5.13-3.2-7.5s-2.52-4.71-3.13-7.32c-1.31-5.53.4-11.54,1.34-17,.5-2.9,1-5.8,1.5-8.71.36-2.07.77-4.37-.21-6.34-1.1-2.21-3.37-2.58-5.62-2.57-2.66,0-5.33.32-7.92.91-5.2,1.17-10.11,3.53-14.3,6.83s-7.26,7.45-9.9,11.95c-5.68,9.66-10.8,21.18-9.86,32.64.16,1.91,3.16,1.93,3,0Z"/><path class="cls-7" d="M109.36,258.26c8.55,6.69,17.4,9.8,27.55,9.93,1.94.03,3.89-.09,5.81-.44,2.61-.48,5.11-1.4,7.59-2.31,4.15-1.52,8.54-3.23,11.15-6.79,1.08-1.48,1.8-3.22,2.07-5.04.34-2.3-.04-4.63-.42-6.92-.56-3.36-1.14-6.72-1.76-10.08-.82-4.44-1.74-8.91-3.69-12.98s-5.02-7.76-9.15-9.58c-3.03-1.33-6.4-1.59-9.67-2.09-1.68-.26-3.41-.58-5.07-.19-2.8.67-4.71,3.17-6.5,5.42s-4.06,4.59-6.94,4.65c-2.02.05-3.9-1.08-5.41-2.42s-2.79-2.95-4.38-4.2c-3.57-2.81-8.66-3.43-12.88-1.74-.67.27-1.49.73-1.84,1.37-.29.52-.17.93-.17,1.53,0,2.42,0,4.94.33,7.63,0,0,5.36,27.98,13.36,34.24Z"/><path d="M108.3,259.33c6.56,5.1,14.03,8.72,22.31,9.88,4.43.62,9.03.79,13.42-.19,4.12-.92,8.35-2.51,12.15-4.36s6.79-4.47,8.23-8.38c1.6-4.35.3-9.18-.45-13.57-1.47-8.58-2.55-18.1-8.34-25.02-2.63-3.15-6.12-5.25-10.11-6.15-2.28-.52-4.63-.75-6.94-1.1-2.17-.33-4.33-.54-6.41.35-3.69,1.58-5.4,5.37-8.27,7.92-1.44,1.28-3.2,2.07-5.12,1.42-2.02-.69-3.49-2.39-4.94-3.87-2.9-2.96-6.24-4.91-10.44-5.16-3.11-.18-9.15.6-9.24,4.7-.1,4.33.3,8.41,1.25,12.6,1.12,4.91,2.42,9.8,4.03,14.57s3.59,10.16,6.87,14.3c.6.75,1.24,1.46,2,2.06,1.49,1.19,3.63-.92,2.12-2.12-3.29-2.63-5.1-7.1-6.6-10.91-1.84-4.7-3.27-9.57-4.51-14.46-.68-2.67-1.43-5.4-1.85-8.13-.21-1.32-.23-2.71-.26-4.04-.03-.95-.02-1.89-.03-2.84,0-.38-.15-1,.05-1.31s.74-.52,1.06-.65c3.25-1.35,7.23-.99,10.23.79,3.38,2.01,5.28,5.76,9.08,7.21s7.04-.47,9.5-3.13c2.28-2.47,4.27-6.43,8.05-6.62,2.12-.11,4.35.45,6.44.75s4.22.66,6.17,1.49c7.37,3.16,10.11,11.57,11.59,18.78.9,4.37,1.63,8.79,2.35,13.19s.75,8.35-2.43,11.59c-2.58,2.63-6.2,3.92-9.58,5.17-4.28,1.57-8.39,2.69-12.99,2.61-7.54-.13-14.81-2.16-21.27-6.05-1.74-1.04-3.41-2.2-5.01-3.44-1.51-1.17-3.65.94-2.12,2.12Z"/><path d="M127.52,104.26c-1.11,2.37-2.33,4.69-3.25,7.15-1.22,3.25-1.86,6.67-2.15,10.12-.46,5.39-.12,10.89.58,16.25.63,4.82,1.75,9.69,4.02,14.02,1.52,2.89,3.67,5.66,6.77,6.92,1.79.72,2.57-2.18.8-2.89.23.09-.34-.17-.42-.22-.21-.11-.41-.24-.6-.37-.41-.28-.78-.61-1.19-1.02-1.01-1.02-1.81-2.2-2.51-3.45-2.12-3.82-3.16-8.21-3.8-12.5-1.21-8.18-1.65-17.23,1.08-25.18.87-2.53,2.12-4.88,3.26-7.31.82-1.74-1.77-3.26-2.59-1.51h0Z"/><path class="cls-4" d="M136.8,268.73c-3.04-1.97-14-9.59-17.02-23.57-1.34-6.22-.33-12.77-.33-12.77.46-3.25,2.29-9.75,2.99-11.68"/><path d="M153.16,265.13c-7.86-3.33-13.87-10.83-15.78-19.16-1.97-8.18-2.55-16.81-.59-25.03.27,4.18.6,8.27,1.15,12.32,2.06,13.57,4.15,22.65,15.21,31.87h0Z"/></g><g id="phone_hand"><path class="cls-8" d="M120.81,266.32c-2.78-1.15-4.01-3.06-5.75-5.25-1.88-2.36-4.1-4.46-6.18-6.67-.98-1.04-1.5-2.17-1.68-3.28-.63-.81-1.27-1.6-1.96-2.38-1.2-1.06-2.18-2.22-3.23-3.61-.81-1.08-1.14-2.18-1.12-3.23-.58-.61-1.04-1.34-1.33-2.2-.49-1.46-.85-2.94-1.31-4.4-.39-1.23-.41-2.34-.15-3.3-.89-2.45-.83-4.99-.96-7.59-.17-3.39-.75-6.67-.31-10.06.03-.21.07-.42.11-.62h-16.21v53.7h40.25v-1.04c-.06-.02-.11-.04-.17-.06Z"/><path class="cls-8" d="M81.72,169.14c.68-15.42,8.22-20.86,18.15-23.36,2.48-.62,7-.57,9.53-.23,3.67.5,7.11,1.48,10.28,3.41,2.29,1.39,4.64,4,6.28,6.12,3.44,4.44,3.55,11.7,3.15,17.3"/><path d="M83.22,169.14c.23-4.8,1.14-9.72,3.86-13.77,2.02-3.01,5.02-5.17,8.32-6.56,4.26-1.8,8.67-2.32,13.27-1.84,2.98.31,6.02,1.09,8.7,2.43s4.88,3.49,6.81,5.85c3.88,4.73,3.82,11.33,3.42,17.13-.13,1.93,2.87,1.92,3,0,.39-5.71.42-12.39-2.86-17.36-1.74-2.63-4.11-5.15-6.7-6.95-2.79-1.94-6.2-3.07-9.51-3.69-9.17-1.69-19.98.41-26.03,8.08-3.74,4.74-5,10.77-5.29,16.68-.09,1.93,2.91,1.93,3,0h0Z"/><path class="cls-8" d="M72.36,188.01c.86-19.52,10.4-26.39,22.96-29.56,3.13-.79,8.85-.72,12.05-.29,4.65.63,8.99,1.87,13,4.31,2.89,1.76,5.88,5.07,7.95,7.74,4.35,5.62,4.49,14.81,3.99,21.89"/><path d="M73.86,188.01c.29-6.09,1.44-12.35,4.86-17.51,2.61-3.95,6.51-6.78,10.84-8.6,2.28-.96,4.74-1.79,7.18-2.21,3.17-.55,6.58-.46,9.77-.13,3.84.4,7.76,1.41,11.22,3.15s6.23,4.48,8.7,7.5c4.95,6.06,4.92,14.47,4.4,21.9-.13,1.93,2.87,1.92,3,0,.49-7.09.53-15.29-3.4-21.52-2.1-3.33-5.12-6.49-8.31-8.77-3.42-2.45-7.65-3.88-11.74-4.68-6.66-1.3-13.46-1.1-19.87,1.2-4.97,1.78-9.62,4.54-12.95,8.71-4.73,5.94-6.33,13.53-6.68,20.97-.09,1.93,2.91,1.93,3,0h0Z"/><path class="cls-8" d="M69.2,207.5c-2.14-3.8-3.09-10.95-1.29-14.92s4.96-7.18,8.42-9.82c8.39-6.42,18.93-9.97,29.49-9.95,3.96,0,7.99.52,11.58,2.19,5.23,2.43,9.07,7.04,12.72,11.5,2.2,2.68,4.47,5.54,5.02,8.97.92,5.72-3.16,10.91-6.97,15.26"/><path d="M70.5,206.74c-1.45-2.65-2.03-5.84-2.03-8.83,0-3.36,1.21-6.13,3.3-8.74,4.56-5.7,11.49-9.75,18.3-12.15s15.06-3.67,22.37-2.09,12.5,7.5,17.16,13.27c2.59,3.21,4.95,6.84,3.92,11.14-.95,3.99-3.76,7.3-6.4,10.32-1.26,1.45.85,3.58,2.12,2.12,2.67-3.06,5.32-6.29,6.72-10.15s.83-7.97-1.3-11.52-4.92-6.64-7.65-9.57-6-5.69-9.83-7.28c-7.73-3.2-17.23-2.28-25.09-.04s-15.64,6.42-21.23,12.43c-2.89,3.11-5.06,6.7-5.35,11-.26,3.9.53,8.15,2.41,11.59.93,1.69,3.52.18,2.59-1.51h0Z"/><path class="cls-8" d="M80.77,261.16l-13.21-36.58c-.99-2.74-1.99-5.56-1.87-8.46.28-6.74,6.28-11.64,11.78-15.54,6.81-4.83,13.91-9.68,22.07-11.46s17.69.19,22.64,6.92c1.36,1.86,2.32,3.97,3.2,6.1,2.38,5.71,3.93,13.23-.73,17.29-3.46,3.01-9.57,2.06-11.95-1.86-1.01-1.66-1.42-3.71-2.8-5.06-2.61-2.55-6.92-1.33-10.3.06-3.7,1.52-7.41,3.04-11.11,4.55"/><path d="M82.21,260.76l-7.45-20.63-3.73-10.32c-1.17-3.23-2.54-6.46-3.38-9.8-.71-2.82-.61-5.64.71-8.26,1.22-2.42,3.09-4.41,5.11-6.19,2.17-1.91,4.55-3.56,6.92-5.22,2.66-1.85,5.35-3.65,8.18-5.24,5.09-2.87,10.71-5.08,16.63-5.12,5.05-.03,10.37,1.44,14.08,5.01,2.11,2.03,3.44,4.64,4.56,7.31.99,2.36,1.83,4.85,2.17,7.39.31,2.32.24,4.88-.98,6.95s-3.23,3.08-5.53,3.05c-2.52-.04-4.74-1.33-5.89-3.58-.74-1.45-1.21-2.99-2.28-4.26-.94-1.11-2.26-1.89-3.68-2.17-2.88-.57-5.81.35-8.46,1.41-3.71,1.5-7.41,3.04-11.11,4.55-1.76.72-.99,3.63.8,2.89,3.56-1.46,7.11-2.92,10.67-4.37,2.36-.96,5.52-2.37,8.07-1.39,1.38.53,2.02,1.78,2.6,3.06.61,1.35,1.16,2.65,2.15,3.77,1.71,1.92,4.29,2.95,6.82,3.07,5.65.28,9.48-4.27,9.92-9.59.22-2.7-.31-5.47-1.09-8.04-.91-2.99-2.16-6.06-3.83-8.71-3.03-4.81-8.11-7.8-13.63-8.85-6.01-1.14-12.05-.15-17.66,2.16-6.27,2.59-11.94,6.5-17.4,10.49-4.54,3.32-9.41,7.39-10.89,13.08-.96,3.7-.06,7.36,1.18,10.88,1.49,4.21,3.03,8.39,4.55,12.59l8.98,24.85c.65,1.8,3.55,1.02,2.89-.8h0Z"/><path class="cls-8" d="M120.14,266.57c-2.73,11.68-5.79,24.09-8.51,35.78-6.1,26.11-12.23,52.34-22.22,77.23-3.57,8.89-7.65,17.63-13.12,25.49-2.85,4.1-6.81,8.3-11.8,8.13-4.94-.16-8.62-4.55-11.03-8.87-8.62-15.45-9.45-34.24-6.15-51.62s10.41-33.75,17.04-50.15c5.53-13.7,11.42-26.88,16.33-40.82"/><path d="M118.7,266.17c-2.5,10.72-5.13,21.4-7.65,32.11s-4.96,21.31-7.65,31.92-5.64,21.16-9.08,31.55-7.13,20.37-11.94,29.99c-2.28,4.56-4.82,9.04-7.81,13.18-2.38,3.28-5.83,7.01-10.25,6.77s-7.4-4.36-9.37-7.79c-2.41-4.2-4.19-8.75-5.46-13.42-5.38-19.8-1.2-40.53,5.38-59.49,7.2-20.73,16.61-40.62,24.42-61.11.98-2.57,1.93-5.15,2.84-7.74.64-1.82-2.25-2.61-2.89-.8-7.6,21.51-17.42,42.16-25.36,63.54-7.28,19.61-12.49,40.73-8.38,61.67.97,4.95,2.5,9.78,4.59,14.38,1.86,4.09,4.15,8.33,7.75,11.16s8.2,3.4,12.29,1.16,6.91-6.42,9.38-10.27c5.9-9.22,10.14-19.43,13.94-29.66s7.23-21.33,10.19-32.19c5.96-21.87,10.82-44.05,16.07-66.1.64-2.69,1.28-5.37,1.9-8.06.44-1.88-2.45-2.68-2.89-.8h0Z"/><path d="M95.36,214.55c.29,7.88.63,15.95,3.46,23.4,2.56,6.72,6.72,12.63,11.37,18.07,2.7,3.16,5.57,6.16,8.45,9.16,1.34,1.4,3.46-.73,2.12-2.12-6.15-6.4-12.4-12.93-16.67-20.79-2.2-4.05-3.68-8.37-4.49-12.9-.88-4.88-1.05-9.86-1.23-14.81-.07-1.92-3.07-1.93-3,0h0Z"/></g><g id="point_hand"><path class="cls-2" d="M208.47,443.03s2.48-9.48-1.5-24.26c-2.5-9.28-2.61-11.48-7.18-17.2-1.99-2.49-7.65-5.82-7.65-5.82,0,0-26.66-3.27-33.21-2.75-30.9,2.43-28.23-.35-37.67,3.05-2.57.92-11.53,5.89-29.41,18.32-26.91,18.7-29.03,21.3-32.33,28.2-.95,1.98-2.76,5.9-1.03,8.46,1.39,2.06,4.4,2.24,5.98,2.32,5.94.29,10.77-2.64,14.95-5.53,8.95-6.2,10.18-8.97,18.46-15.28,7.89-6.01,16.07-9,16.07-9,0,0-4.29,4.12-5.98,11.03-.35,1.44-1.99,8.12,1.36,11.5,2.78,2.8,10.04,3.58,10.04,3.58,0,0,1.79,4.82,4.82,7.33,4.14,3.44,12.53,3.53,12.53,3.53,0,0,2.66,6.51,6.22,7.97,4,1.64,10.27-.1,10.27-.1,0,0,.64,3.78,2.67,5.9,2.54,2.66,7.68,2.25,10.95.99,5.59-2.16,7.97-7.71,8.72-9.46,3.3-7.71,3.27-15.39,3.27-15.39,0,0,6.56-.03,11.68-3.5,3.84-2.6,6.43-6.27,6.43-6.27l11.56,2.38Z"/><path d="M123.54,409.92c-4.31,4.34-7.89,9.33-11.81,14.01-.52.62-.61,1.51,0,2.12.53.53,1.6.62,2.12,0,3.92-4.68,7.5-9.67,11.81-14.01,1.36-1.37-.76-3.49-2.12-2.12h0Z"/><path d="M135.51,419.94c-5.13,4.23-9.69,9.46-12.56,15.5-1.22,2.57-2.27,5.23-3.14,7.93-.61,1.9-1.48,4.22-1.25,6.25.21,1.9,3.22,1.92,3,0-.2-1.78.61-3.79,1.15-5.45.82-2.55,1.8-5.07,2.96-7.49,2.77-5.72,7.09-10.59,11.96-14.62,1.49-1.23-.64-3.34-2.12-2.12h0Z"/><path d="M146.5,432.35c-3.56,3.68-6.26,8.19-8.42,12.81-2.34,4.99-2.98,10.31-3.63,15.72-.23,1.91,2.77,1.9,3,0,.6-5,1.19-10.02,3.41-14.6,2.06-4.24,4.47-8.4,7.77-11.81,1.34-1.39-.78-3.51-2.12-2.12h0Z"/><path d="M170.84,460.82c.14-.52.3-1.04.47-1.56.09-.27.19-.55.3-.82.05-.14.11-.28.16-.41.06-.15.06-.14-.02.05.03-.07.06-.14.09-.21.23-.53.49-1.04.78-1.54.16-.27.32-.54.49-.8.09-.13.18-.26.27-.39.05-.06.09-.13.14-.19-.12.15-.12.16-.02.02.4-.49.83-.95,1.31-1.36.05-.04.46-.36.16-.14.1-.07.19-.14.29-.21.27-.18.54-.35.83-.5.15-.08.29-.15.44-.22.16-.07.15-.07-.01,0,.08-.03.16-.06.24-.09.33-.12.66-.22,1-.3.18-.04.35-.07.53-.11.18-.03.18-.03.01,0,.09-.01.19-.02.28-.03.39-.04.78-.05,1.18-.04.81.01,1.5-.7,1.5-1.5s-.69-1.49-1.5-1.5c-2.62-.04-5.08.81-7.06,2.52-1.71,1.47-2.86,3.47-3.72,5.53-.41.98-.74,1.98-1.02,3-.51,1.86,2.38,2.66,2.89.8h0Z"/><path d="M160.07,442.04c-4.4,2.89-7.17,7.74-8.75,12.66-.88,2.72-1.24,5.52-.9,8.37.24,2.06.89,3.98,1.29,6,.38,1.89,3.27,1.09,2.89-.8-.33-1.64-.88-3.22-1.14-4.87-.4-2.56-.13-5.08.63-7.55,1.32-4.26,3.67-8.71,7.49-11.23,1.61-1.06.11-3.66-1.51-2.59h0Z"/></g><g id="_cord"><path class="cls-7" d="M133.46,268.89c-5.83,12.87-10.08,30.04-4.26,43.68,4.29,10.07,18.59,18.39,28.17,9.51,6.53-6.06,4.87-19.69-4.61-21.79-5.27-1.17-10.58,2.02-13.14,6.54-3.25,5.73-1.92,12.87,1.18,18.36,6.32,11.19,20.24,16.62,32.11,11.04,5.09-2.39,9.75-6.97,10.52-12.76.67-5.04-2.41-9.96-7.78-10.27-12.96-.75-15.3,16.24-10.37,24.86,6.18,10.81,22.52,13.96,32.83,7.3,4.25-2.74,6.98-8.07,5.02-13.06s-7.53-6.36-12.18-4.39c-12.01,5.09-8.68,21.58-.73,28.61,8.63,7.64,27.76,13.95,36.21,2.99,7.3-9.47-5.06-23.27-13.71-13.72-4.37,4.83-6.43,12.5-7.22,18.78-.74,5.81-1.03,14.02,2.58,19.06,3.96,5.54,13.32,6.23,19.44,7.46,4.88.99,12.19,2.95,14.61-3.1,1.57-3.95-.54-9.05-4.32-10.89-5.66-2.77-11.99,1.06-15.39,5.59-7.79,10.37-5.83,25.73,4.38,33.7,8.01,6.25,25.54,8.95,29.8-3.45,3.89-11.3-11.19-16.08-18.76-10.23-9.75,7.54-12.57,26.09-7.89,36.95,4.05,9.39,17.44,15.52,26.14,8.16,3.62-3.07,5.8-8.86,2.82-13.1-3.29-4.67-9.66-3.7-13.85-.84-9.1,6.21-11.98,19.72-6.13,29.07s19.38,12.94,28.79,7.24c3.7-2.24,6.27-7.2,2.79-10.84-3.19-3.34-9.09-2.29-12.53.04-8.9,6.03-11.44,19.47-7.1,28.89s15.86,13.39,25.67,9.73c4.48-1.67,8.52-4.77,10.77-9.06,2.01-3.83,3.1-10.14-1.76-12.31-5.24-2.34-9.5,3.62-9.77,8.23-.36,6.17,3.58,11.54,9.01,14.11,11.66,5.51,25.7-.83,32.47-10.92,2.98-4.44,5.47-10.91,3.9-16.28-1.37-4.69-6.29-6.71-10.6-4.49-12.98,6.69,1.26,22.56,9.18,26.27,10.81,5.08,23.89,1.92,28.77-9.61,2.04-4.8,2.21-10.51-.49-15.11s-7.78-6.86-12.33-3.53c-4.06,2.98-5.38,8.74-2.99,13.17,2.93,5.44,9.33,8.05,15.01,9.48,11.73,2.95,26.44.68,30.81-12.25,1.68-4.98,1.29-10.75-2.05-14.96-3.03-3.81-8.09-5.03-10.89-.35-5.67,9.48.83,22.59,10.2,26.71,11.09,4.88,23.56-2.96,27.32-13.7,1.78-5.08,1.64-11.39-2.04-15.63-3.2-3.68-8.62-4.13-12.11-.57-9.86,10.05,5.68,20.57,14.69,21.79,5.95.81,12.18-.32,17.42-3.29s9.78-11.17,16.19-10.7c3.85.28,3.83-5.72,0-6-5.26-.38-9.14,2.73-12.76,6.18-5.21,4.97-10.76,8.44-18.27,8.05-3.31-.17-6.67-1.08-9.49-2.86-1.36-.86-2.71-1.89-3.55-3.28-.95-1.58-1.82-5.8,1.07-6.37,2-.39,3.43,2.69,3.78,4.17.37,1.6.23,3.39-.13,4.97-.73,3.25-2.58,6.24-5.01,8.49-5.09,4.7-12.69,5.86-18.14,1.05-2.1-1.85-3.7-4.31-4.52-6.99-.37-1.2-1.54-8.57.53-9,.91-.19,2.26,3.21,2.43,3.82.4,1.42.41,2.99.19,4.44-.47,3.08-2.16,6.06-4.57,8.02-6,4.88-14.9,3.97-21.78,1.82-3.16-.99-7.05-2.46-8.71-5.54-.76-1.41-1.41-3.9.25-5.14,2.19-1.64,4.54.9,5.16,3.12,1.63,5.86-2.35,12.57-7.7,14.93-6.57,2.89-14.36.06-19.37-4.57-2.14-1.97-7.28-7.85-4.28-10.75,1.93-1.87,3.33.98,3.07,2.96-.24,1.87-.83,3.75-1.64,5.46-2.76,5.82-8.13,10.41-14.33,12.16-3.31.93-6.82,1.05-10.15.11-3.73-1.05-9.18-5.36-7.45-9.99.14-.37,1.06-1.38.92-.24-.1.83-.56,1.61-.96,2.33-.58,1.06-1.33,1.97-2.19,2.81-1.89,1.82-4.33,3.05-6.86,3.7-5.05,1.29-10.64.29-14.23-3.67-3.89-4.29-4.64-10.84-3-16.24.87-2.87,2.38-5.62,4.61-7.66,1.02-.93,2.2-1.82,3.63-1.95,2.38-.22,2.19.74.34,1.95-4.93,3.26-12.72,1.33-16.99-2.07-4.88-3.89-6.41-10.45-4.54-16.31.96-3.01,2.71-5.81,5.27-7.71,1.49-1.1,3.69-2.46,5.39-1.24,1.86,1.33.53,3.92-1,5.23-4.76,4.1-12.73.78-15.73-3.81-4.11-6.29-2.96-14.83-.95-21.63,1.47-4.98,6.92-16.05,13.81-10.93,3.94,2.93-.07,7-3.32,8.23s-6.96.77-10.14-.36c-6.95-2.48-12-8.83-12.35-16.27-.16-3.5.59-7.12,2.31-10.19.99-1.78,2.35-3.56,4.05-4.71,1.27-.86,7.57-2.35,6.68,1.41-.65,2.72-10.23-.19-11.9-.57-3.76-.85-9.7-1.4-11.94-4.72-3.74-5.54-1.58-16.25.42-22.05.89-2.59,3.28-10.09,7.39-8.69,2.42.82,2.64,4.24,1.66,6.1-1.42,2.7-4.75,4.04-7.63,4.25-6.89.52-15.66-2.83-20.72-7.49-2.52-2.32-4.26-5.27-4.76-8.68s.48-9.02,4.6-9.89c2.3-.49,4.3,1.37,3.83,3.76-.34,1.76-2.23,3.11-3.69,3.9-3.29,1.78-7.52,2.14-11.16,1.69-7.49-.92-14.1-6.44-14.15-14.38-.02-3.24,1.3-7.29,4.66-8.48,6.14-2.17,4.02,5.48,1.49,8.05-5.31,5.38-13.92,6.05-20.41,2.6s-13.32-12.67-9.62-20.24,12.08-3.11,10.47,4.13-10.93,6.05-15.49,2.63c-6.29-4.71-7.3-13.56-6.98-20.85.37-8.34,2.51-16.53,5.95-24.11,1.58-3.49-3.59-6.54-5.18-3.03h0Z"/></g><g id="phone"><path class="cls-1" d="M435.5,492.1s-6.6-23.96,7.64-43.07,73.97-57.3,73.97-57.3l7.64-28.13h10.42v16.32l11.46-4.17v-16.32h14.59l4.17,16.32,28.83,7.29,2.08-9.72h15.63l1.39,20.84,5.9-1.74,3.82-22.92,13.89,1.39,2.43,32.65s17.71,7.99,22.92,19.45,6.25,47.23,6.25,47.23c0,0-92.38,55.92-103.5,56.96s-129.54-35.08-129.54-35.08Z"/><ellipse class="cls-6" cx="533.75" cy="435.86" rx="50.67" ry="36.99" transform="translate(-116.38 207.4) rotate(-19.87)"/><ellipse class="cls-6" cx="531.88" cy="432.12" rx="15.55" ry="11.35" transform="translate(-115.22 206.54) rotate(-19.87)"/><ellipse class="cls-5" cx="561.31" cy="418.25" rx="5.59" ry="4.08" transform="translate(-108.75 215.72) rotate(-19.87)"/><ellipse class="cls-5" cx="545.48" cy="410.71" rx="5.59" ry="4.08" transform="translate(-107.13 209.89) rotate(-19.87)"/><ellipse class="cls-5" cx="526.3" cy="410.78" rx="5.59" ry="4.08" transform="translate(-108.3 203.37) rotate(-19.87)"/><ellipse class="cls-5" cx="508.6" cy="419.93" rx="5.59" ry="4.08" transform="translate(-112.46 197.9) rotate(-19.87)"/><ellipse class="cls-5" cx="500.73" cy="433.63" rx="5.59" ry="4.08" transform="translate(-117.59 196.04) rotate(-19.87)"/><ellipse class="cls-5" cx="501.66" cy="448.86" rx="5.59" ry="4.08" transform="translate(-122.71 197.27) rotate(-19.87)"/><ellipse class="cls-5" cx="517.23" cy="456.91" rx="5.59" ry="4.08" transform="translate(-124.52 203.04) rotate(-19.87)"/><ellipse class="cls-5" cx="536.43" cy="457.55" rx="5.59" ry="4.08" transform="translate(-123.59 209.6) rotate(-19.87)"/><path class="cls-8" d="M557.44,463.96c-1.07-3.24-3.02-6.09-4.51-9.16s-1.58-9.87-1.58-9.87c0,0,2.03,2.8,2.92,4.33,2.54,4.37,9.08,7.23,13.98,8.42-3.26,2.34-6.41,5.17-10.23,6.41"/><path d="M558.88,463.56c-.78-2.28-1.91-4.4-3.07-6.5-.91-1.66-1.82-3.23-2.23-5.09-.52-2.29-.7-4.69-.74-7.04l-2.8.76c1.96,2.71,3.49,5.84,6.13,7.97,3.36,2.71,7.5,4.44,11.67,5.47l-.36-2.74c-3.14,2.27-6.15,5-9.87,6.26-1.82.62-1.04,3.51.8,2.89,4.02-1.36,7.2-4.12,10.59-6.56.98-.71.99-2.41-.36-2.74-3.72-.91-7.58-2.39-10.55-4.87-2.33-1.94-3.69-4.76-5.45-7.19-.82-1.13-2.82-.84-2.8.76.04,2.54.27,5.12.79,7.6.91,4.28,3.96,7.71,5.35,11.82.62,1.82,3.52,1.04,2.89-.8h0Z"/><path class="cls-3" d="M452.52,469.18c12.28,4.94,26.2,9.76,41.68,13.89,22.48,6,43.07,9.17,60.78,10.77"/><path d="M568.17,490.71c3.79-7.7,9.51-14.31,14.88-20.93,9.43-11.47,18.46-23.34,26.44-35.84,5.4-9.34,4.39-20.36,4.52-30.76,1.47,10.59,3.06,22.1-2.21,32.01-5.44,9.35-11.76,18.01-18.54,26.4-8.02,10.03-17.69,18.61-25.09,29.11h0Z"/></g><path d="M535.57,383.28c3.53-1.18,6.96-2.6,10.27-4.3,3.11-1.59,6.06-3.42,9.1-5.13,1.68-.95.17-3.54-1.51-2.59-2.95,1.66-5.82,3.43-8.83,4.99-3.17,1.64-6.44,3-9.83,4.14-1.82.61-1.04,3.51.8,2.89h0Z"/><path d="M585.15,399.03c3.64-.62,7.15-1.72,10.52-3.22.74-.33.91-1.41.54-2.05-.45-.76-1.31-.87-2.05-.54-3.09,1.37-6.44,2.34-9.8,2.91-.8.14-1.25,1.12-1.05,1.85.23.85,1.04,1.18,1.85,1.05h0Z"/><path d="M613.5,397.26c5.5.41,10.19-2.89,15.17-4.63.76-.27,1.27-1.03,1.05-1.85-.2-.74-1.08-1.32-1.85-1.05-4.67,1.63-9.23,4.91-14.38,4.52-.81-.06-1.5.73-1.5,1.5,0,.86.69,1.44,1.5,1.5h0Z"/><path d="M596.44,394.43c.42-6.56,1.66-13.11,2.71-19.6.13-.81-.21-1.61-1.05-1.85-.71-.2-1.72.25-1.85,1.05-1.09,6.74-2.38,13.57-2.82,20.39-.12,1.93,2.88,1.92,3,0h0Z"/></g></svg></div>
15    
16  </body>
17  
18</html>
19

CSS Code


1body {
2	display: flex;
3	align-items: center;
4	justify-content: center;
5	background: #6900FF;
6}
7
8.container {
9	width: 100vmin;
10	height: 100vmin;
11	display: flex;
12	flex-direction: column;
13	justify-content: center;
14	align-items: center;
15}
16
17h1 {
18	font-family: "Chewy";
19	font-size: 3.4rem;
20	text-align: center;
21	color: #B5FF00;
22}
23
24.you {
25	display: inline-block;
26	animation: you-zoom 1.5s ease-in-out alternate infinite;
27}
28
29svg {
30	width: 100%;
31}
32
33#front-leg {
34	animation: leg-kick 1s ease-in-out alternate infinite;
35	transform-origin: 90% 75%;
36}
37
38#back-leg {
39	animation: leg-kick 1s ease-in-out alternate infinite;
40	animation-delay: .5s;
41	transform-origin: 90% 75%;
42}
43
44@keyframes leg-kick {
45	100% {
46		transform: rotate(10deg);
47	}
48}
49
50@keyframes you-zoom {
51	100% {
52		transform: scale(1.5);
53	}
54}
55
56/* SVG Styles (pulled from <style> of SVG) */
57.cls-1{fill:#ff00cf;}
58.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#000;}
59.cls-1,.cls-2,.cls-4,.cls-5,.cls-6{stroke-width:3px;}
60.cls-1,.cls-3,.cls-4,.cls-5,.cls-6{stroke-miterlimit:10;}
61.cls-7{fill:#f0c;}
62.cls-8,.cls-2{fill:#fff;}
63.cls-2{stroke-linejoin:round;}
64.cls-4{stroke-linecap:round;}
65.cls-4,.cls-6{fill:none;}
66/* End SVG Styles (pulled from <style> of SVG) */
67

Love this component?

Explore more components and build amazing UIs.

View All Components