Ugly Sweater CSS: Winter Wampa Land.

It's cold so I made a Wampa. This is based on the version of the Wampa is from the animated Forces of Destiny series. I had to more creative on this one. I don't have a Wampa on my shelf to use as reference so I had to build it. The other sweater builds were based on some LEGO figures. This one was sketched from a screen grab.

The head is made from a circle and a triangle. For lack of a better word I called the triangle beard. The blue V, or beardPart, is a blue triangle that is covered up by a white triangle.

.wampa {
    background-color: #fff;
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: visible;
    flex-direction: column;

    border-top-right-radius: 40%;
    border-top-left-radius: 45%;
    border-bottom-right-radius: 48%;
    border-bottom-left-radius: 48%; 
    border: 6px dashed #fff;
    margin-bottom: 80px;
    justify-content: space-between;
    z-index: 0;
}
.beard {
    border-top:100px solid white;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent; 
    margin-top: 156px;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}

.beardPart {
    position: relative;
    margin:0 auto;
    margin-top: -170px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-top: 67px solid #6eb7d7;
    height: 0;
    width: 0;
}
.beardPart:before {
    border-top: 54px solid white;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    content: "";
    left: -50px;
    margin-top: -68px;
    position: absolute;
}

I modified the mouth from Halloween alien. The major change to the mouth is the border. The border color changes for each side. Reminder the mouth is a rectangle that been modified with border radius, so the browser still thinks it has four sides. The top is white to help contrast from the face. The sides are blue to match the mouth, The bottom is black.

.mouth {
    width: 120px;
    height: 60px;
    background: #6eb7d7;
    border-radius: 100px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: -29px;
    margin-left: -138px;

    border: 4px solid white;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%;
    border-bottom-color: #000000;
    border-left-color: #6eb7d7;
    border-right-color: #6eb7d7;
    z-index: 8; 
}

The face is an oval. The nostrils are made from a black circles inside slightly larger white circles.

      <div class="nostrils">
    <div class="nostrilsInside"></div>
      </div>
    <div class="nostrils">
     <div class="nostrilsInside"></div>
     </div>

.nostrils {
    width: 25px;
    height: 25px;
    background-color: white;
    border: solid 2px black;
    border-radius: 50%;
    margin-top: -90px;
    margin-left: -63px;
    z-index: 7;
    display: flex;
    justify-content: center;
}

.nostrilsInside {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    margin-top: 3px;
    z-index: 4;
}

For the eyes I played with the border-radius on the corners to add some expression.

.eyes {
    background-color: black;
    height: 54px;
    width: 54px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    border-top-right-radius: 13%;
        border-top-left-radius: 20%;
        border-bottom-right-radius: -38%;
}


.pupil {
    background-color: white;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}

The sweater itself is almost the same. I change the background color to black and added tie fighters to the boxes on the top and bottom of the sweater.

This was challenging since I had to draw it from a image a try to reduce the detail and still represent the original creation.

Have you ever made something cool with CSS? Share it.

-$JarvisScript git push