CSS B2EMO from Andor.

#css #art

The new Star Wars series Andor introduced us to a new droid, B2EMO or Bee. We haven't seen too much of Bee yet. I wanted to make the new droid with CSS and HTML.

There's not a lot of images or products of him yet but I found a few online. In CSS terms this is a simple set of stacking rectangles.

FRAME

The frame is a large div with a white border. Inside the frame are the divs that make the droid's body.

<body>

<div class="flex-container">
<div class="main">
  <div class="outer_frame">
    <div class="droid"> </div>
  </div>
</div>
</div>
</body>

.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  background: var(--Black);
      justify-content: center;
  align-items: center; 
  position: relative;
}


.main {
   height: 100%;
   width: 100%;
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.outer_frame {
  width: 950px;
  height: 330px;
  border: 4px white solid;
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: row;
  background-color: #333;
}

BODY

The red is the outer shell which expands and contracts the gray is his interior. I called the outer shell, plates and the insides are I named insides.

The top is trapezoid with the same colors as a plate. CSS trapezoids are made out of a square built using borders. Three sides are transparent and the side you want to show has a color.

        <div class="droid">
            <div class="top"></div>
            <div class="inside"></div>
            <div class="plates torso1"></div>
            <div class="inside2"></div>
            <div class="plates torso2"></div>
            <div class="inside2"> </div>        
            <div class="plates bottom"></div>       
    </div>

.top {
    border-bottom: 35px solid var(--DarkRed);
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
        filter: drop-shadow(0 0 .5rem black);
    border-radius: 4%;
}



    .inside {
        background: linear-gradient(to right,
        var(--Gray) 33%, 
        var(--DarkGray)
        );
        height: 36px;
        width: 160px;
        border-bottom: 2px solid var(--DarkGray);
        border-right: 1px solid var(--DarkGray);
        border-left: 1px solid var(--DarkGray);
        margin-left: 20px;
        z-index: 11;
    }

        .inside2 {
        background: linear-gradient(to right,
        var(--Gray) 33%, 
        var(--DarkGray)
        );
        height: 10px;
        width: 160px;
        border: 2px solid var(--DarkGray);
        margin-left: 20px;
    }

The body is made of rectangles. alternating between plate divs and insides divs. The feet are more rectangles.

Wrap up

This was a quick build to see if I could make something that was just released. The show first streamed a week ago so I feel good that I made something in a short time.

-$JarvisScript git push

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More