'drawing esp with css and javascript

I'm trying to draw an ESP dynamically with javascript. I'm going to tinker with this for a long time, but I wanted to get some ideas on it.

Our components will be:

  1. container
  2. health
  3. bar lines

What I have in mind will look something like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body {
        background: transparent;
      }
      .esp-box {
        position: absolute;
        border: 2px dotted rgb(255, 165, 0, .5);
        border-left: none;
        height: 300px;
        width: 150px;
        top: 30vh;
        left: 30vh;
      }
      .esp-box .health-bar {
        height: 100%;
        background: rgb(60, 60, 60, 0.5);
        width: 5px;
      }
      .esp-box .health-bar .plus{
        height: 60%;
        background: rgb(60, 179, 113, 0.5);
        width: 5px;
      }
      .esp-box .health-bar .minus{
        height: 40%;
        background: rgb(255, 0, 0, 0.5);
        width: 5px;
      }
      .line {
        border-top: 1px dotted rgb(255, 165, 0, .5);
        position: absolute;
        top: 9%;
        left: 23%;
        width: 50vh;
        transform: skewY(-40deg);
      }
    </style>
  </head>
  <body>
    <div class="esp-box">
      <div class="health-bar">
        <div class="plus">
        </div>
        <div class="minus">
        </div>
      </div>
    </div>
    <div class="line">

    </div>
  </body>
</html>

https://jsfiddle.net/xgw4jheo/

Aim: Replacing the container and lines in a dynamic and coordinated way with messages passed to javascript.

The lifebar is really easy, but the container and lines make me think a bit. Do you think this can be done?

javascripthtmlcssreactjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions