State Machine

Binary Coded Decimal 7 Segment Display Decoder implemented with CSS with the Space Toggle trick.

Code

stateMachine.js

state-machine.css

const StateMachine = () => {
  return (
    <div className="bcd7sdd">
      <input id="A" type="checkbox" />
      <input id="B" type="checkbox" />
      <input id="C" type="checkbox" />
      <input id="D" type="checkbox" />
      <span className="empty"></span>
      <div className="ssdd">
        <svg viewBox="0 0 340 552" xmlns="http://www.w3.org/2000/svg">
          <line x1="6" y1="539" x2="6" y2="83" className="line-a-in" />
          <line x1="6" y1="83" x2="314" y2="83" className="line-a-in" />
          <line x1="314" y1="83" x2="314" y2="69" className="line-a-in" />
          <line x1="314" y1="69" x2="354" y2="69" className="line-a-in" />
          <line x1="6" y1="422" x2="288" y2="422" className="line-a-in" />
          <line x1="288" y1="422" x2="288" y2="387" className="line-a-in" />
          <line x1="288" y1="387" x2="368" y2="387" className="line-a-in" />
          <line x1="6" y1="218" x2="310" y2="218" className="line-a-in" />
          <line x1="310" y1="218" x2="310" y2="232" className="line-a-in" />
          <path d="M 361 429 c 40 10, 40 30, 0 40 c 10 -10, 10 -30, 0 -40" stroke="white" strokeWidth="2" fill="black" />

Mandala Introduction