With Just HTML and CSS

[x32x01]

Just HTML & CSS
HTML and CSS allow you to create stunning visuals on web pages. By using elements like div, and properties like width, height, and border-radius, you can design shapes like circles, squares, and triangles

<div class="pucca">
  <div class="heart"></div>
  <div class="arm"></div>
  <div class="arm"></div>
  <div class="hair"></div>
  <div class="hair"></div>
  <div class="bow"></div>
  <div class="bow"></div>
  <div class="hand"></div>
  <div class="hand"></div>
  <div class="legs"></div>
  <div class="legs"></div>
  <div class="body"></div>
  <div class="body2"></div>
  <div class="face">
    <div class="mouth"></div>
    <div class="cheek"></div>
    <div class="eye"></div>
    <div class="eye"></div>
    <div class="eyebrow"></div>
    <div class="eyebrow"></div>
  </div>
  <div class="star"></div>
</div>

body {
  background: pink;
}

div {
  position: absolute;
  box-sizing: border-box;
}

.pucca {
  position: absolute;
  width: 80vmin;
  height: 80vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.face {
  transform: rotate(10deg);
  background: blanchedalmond;
  width: 50%;
  height: 40%;
  border-radius: 100% 100% 80% 80% / 100% 100% 80% 80%;
  left: 25%;
  top: 34%;
  border: 8px solid black;
  box-shadow: inset 0 4vmin, inset 2vmin 2vmin, inset -2vmin 2vmin;
}

.hair {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  top: 35%;
  left: 15%;
  background: black;
}

.hair + .hair {
  top: 45%;
  left: auto;
  right: 15%;
}

.bow {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  top: 38%;
  left: 24%;
  background: crimson;
}

.bow + .bow {
  top: 45%;
  left: auto;
  right: 23.5%;
}

.cheek {
  width: 4vmin;
  height: 4vmin;
  background: #FFCCA5;
  border-radius: 50%;
  top: 77%;
  left: 20%;
  box-shadow: 18vmin 0 #FFCCA5;
}

.mouth {
  width: 6vmin;
  height: 6vmin;
  border: 5px solid black;
  border-radius: 30px;
  top: 70%;
  left: 43%;
  clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
}

.eye {
  width: 28%;
  border-top: 5px solid black;
  transform: rotate(10deg);
  top: 61%;
  left: 9%;
}

.eye + .eye {
  transform:  rotate(-10deg);
  left: auto;
  right: 9%;
}

.eyebrow {
  width: 40%;
  height: 40%;
  border: 5px solid transparent;
  border-top: 5px solid black;
  border-radius: 50%;
  top: 28%;
  transform: rotate(-10deg);
}

.eyebrow + .eyebrow {
  transform: rotate(10deg);
  left: auto;
  right: 1%;
}

.hand {
  width: 10%;
  height: 15%;
  border-radius: 100%/50%;
  transform: rotate(-44deg);
  top: 73%;
  left: 43%;
  background: blanchedalmond;
  z-index: 1;
  border: 5px solid black;
}

.hand + .hand {
  transform: rotate(44deg);
  left: auto;
  z-index:2;
  right: 42%;
}

.arm {
  width: 10%;
  height: 15%;
  border-radius: 100%/50%;
  transform: rotate(-44deg);
  top: 70%;
  left: 40%;
  border: 5px solid black;
  background: crimson;
  z-index:2;
}

.arm + .arm {
  transform: rotate(44deg);
  left: auto;
  right: 39%;
  z-index:3;
}

.body {
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 50%;
  border-bottom: 100px solid crimson;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.body2 {
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  height: 60%;
  border-bottom: 130px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  z-index: -1;
}



.legs {
  transform: rotate(-30deg);
  width: 10%;
  height: 20%;
  background: black;
  border-radius: 100%/50%;
  bottom: 0%;
  left: 40%;
}

.legs + .legs {
  transform: rotate(-30deg);
  left: auto;
  right: 40%;
}

.heart {
  transform: rotate(20deg);
  width: 100px;
  height: 90px;
  left: 45%;
  top: 10%;
}

.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}

.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}