SevenSegment.svelte

<script lang="ts">
  interface Props {
    digits: number[],
  }

  let { digits }: Props = $props();

  // in bitfield order, LSB to MSB
  const segments = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'dp'];
  // in render order, line by line, as [class, name]
  const order = [
    ['horiz', 'a'],
    ['vert', 'f'],
    ['vert', 'b'],
    ['horiz', 'g'],
    ['vert', 'e'],
    ['vert', 'c'],
    ['horiz', 'd'],
    ['', 'dp'],
  ];
</script>

<style lang="scss">
  @use 'sass:math';

  $seg-long: 50px;
  $seg-short: 10px;
  $seg-space: 5px;

  $color-bg: #222;
  $color-off: #444;
  $color-on: #f00;

  $seg-corner: 0.5 * $seg-short;
  $seg-diag: math.div($seg-space, math.sqrt(2));

  .display {
    display: inline-block;
    background-color: $color-bg;
    border-radius: $seg-short;
  }

  .digit {
    display: inline-block;
    margin: $seg-short;
    padding: 0;
    line-height: 0;
  }

  .digit + .digit {
    margin-left: 0;
  }

  .segment {
    position: relative;
    background: $color-off;

    margin: 0;
    padding: 0;

    &.active {
      background-color: $color-on;
    }

    &.horiz {
      display: block;
      width: $seg-long;
      height: $seg-short;
      clip-path: polygon(
        0px $seg-corner,
        $seg-corner 0px,
        ($seg-long - $seg-corner) 0px,
        $seg-long $seg-corner,
        ($seg-long - $seg-corner) $seg-short,
        $seg-corner $seg-short,
        0px $seg-corner,
      );
      margin-left: $seg-corner + $seg-diag;
      margin-right: $seg-corner + $seg-diag;
    }

    // horizontal segments under verticals
    &.d, &.g {
      top: $seg-diag - $seg-corner;
      margin-bottom: $seg-diag - $seg-corner;
    }

    &.vert {
      display: inline-block;
      width: $seg-short;
      height: $seg-long;
      clip-path: polygon(
        0px $seg-corner,
        $seg-corner 0px,
        $seg-short $seg-corner,
        $seg-short ($seg-long - $seg-corner),
        $seg-corner $seg-long,
        0px ($seg-long - $seg-corner),
        0px $seg-corner,
      );
      top: $seg-diag - $seg-corner;
      margin-bottom: $seg-diag - $seg-corner;
    }

    // vertical segments on right side
    &.b, &.c {
      left: $seg-long + 2 * $seg-diag - $seg-short;
    }

    &.dp {
      display: block;
      width: $seg-short;
      height: $seg-short;
      clip-path: circle(closest-side);

      top: -$seg-short;
      margin-bottom: -$seg-short;

      left: 2 * $seg-diag + $seg-long + 2 * $seg-short;
      margin-right: 2 * $seg-diag + $seg-long + 2 * $seg-short;
    }
  }
</style>

<div class="display">
  {#each digits as digit}
    <div class="digit">
      {#each order as ord}
        <div class={[
             'segment',
             ord[0],
             ord[1],
             (digit & (1 << segments.indexOf(ord[1]))) && 'active',
        ]}></div>
      {/each}
    </div>
  {/each}
</div>