<div class="palm-tree joycon-tree">
  <div class="palm-trunk"></div>
  <div class="palm-fruit"></div>
  <div class="palm-leaves">
    <div class="palm-leaf">
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
    </div>
    <div class="palm-leaf">
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
    </div>
    <div class="palm-leaf">
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
    </div>
    <div class="palm-leaf">
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
      <div class="edges"></div>
    </div>
  </div>
</div>
body {
  width: 100vw;
  min-height: 100vh;
  background-color: #f9ccca;

  display: flex;
  justify-content: center;
  align-items: center;
}

.palm-tree {
  width: 100px;
  height: 200px;
  position: relative;
  transform: scaleX(-1);
}

.palm-tree::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  border-radius: 100%;
  left: 40px;
  bottom: -10px;
}

.palm-trunk {
  position: absolute;
  width: 30px;
  height: 100px;
  background-color: #df916a;
  border-radius: 30px;
  bottom: 0;
  left: 40%;
  transform: rotate(-10deg);
  background: linear-gradient(135deg, #d67240 25%, transparent 25%),
    linear-gradient(225deg, #d67240 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #d67240 25%, transparent 25%) -50px 0,
    linear-gradient(45deg, #d67240 25%, transparent 25%);
  background-size: 50px 50px;
  background-color: #df916a;
  border: 1px solid black;
  box-shadow: inset 0px 30px 10px #7c2020;
}

.palm-fruit {
  position: absolute;
  z-index: 2;
}

.palm-fruit::before,
.palm-fruit::after {
  content: "";
  position: absolute;
  background-color: #ffea71;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid brown;
  box-shadow: inset 3px -3px goldenrod;
}

.palm-fruit::before {
  left: 40px;
  top: 90px;
}

.palm-fruit:after {
  top: 95px;
  left: 20px;
}

.palm-leaves {
  position: absolute;
}

.palm-leaf {
  position: absolute;
  width: 90px;
  height: 40px;
  background-color: #7abe7a;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  border: 1px solid black;
  border-bottom: none;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.palm-leaf:nth-child(1) {
  transform: rotate(-20deg);
  left: 30px;
  top: 50px;
  animation: rotateLeaf1 3s ease infinite;
}

.palm-leaf:nth-child(2) {
  transform: rotate(20deg);
  left: -40px;
  top: 50px;
  animation: rotateLeaf2 3s ease infinite;
}

.palm-leaf:nth-child(3) {
  transform: rotate(-30deg);
  left: -40px;
  top: 90px;
  width: 80px;
  height: 40px;
  animation: rotateLeaf3 3s ease infinite;
}

.palm-leaf:nth-child(4) {
  transform: rotate(20deg);
  left: 40px;
  top: 75px;
  width: 80px;
  height: 40px;
  border-top: none;
  animation: rotateLeaf2 3s ease infinite;
}

@keyframes rotateLeaf1 {
  50% {
    transform: rotate(-25deg);
  }
}
@keyframes rotateLeaf2 {
  50% {
    transform: rotate(25deg);
  }
}
@keyframes rotateLeaf3 {
  50% {
    transform: rotate(-35deg);
  }
}

.edges {
  flex: 1 1 0;
  height: 14px;
  width: 100%;
  margin-top: 29px;
  border-radius: 100%;
  background-color: #7abe7a;
  border-bottom: 2px solid black;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.