UX Workflow Diagram

by Pete Fecteau

HTML

<div id="diagram">
  <div id="front">
    <a id="dot1" class="dot"></a>
    <a id="dot2" class="dot"></a>
    <a id="dot3" class="dot"></a>
    <a id="dot4" class="dot"></a>
    <a id="dot5" class="dot"></a>
    <a id="dot6" class="dot"></a>
    <a id="dot7" class="dot"></a>
    <a id="dot8" class="dot"></a>
  </div>
  <div id="back">
    <div id="curve1"></div>
    <div id="curve2"></div>
    <div id="curve3"></div>
    <div id="curve4"></div>
    <div id="curve5"></div>
    <div id="curve6"></div>
  </div>
</div>

CSS

html, body {margin:0;padding:0;background-color: #FFF;}
#diagram {}
#diagram #front {}
#diagram #front .dot {
  margin:0 auto;
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-color: red;
  z-index: 200;
}
#diagram #front .dot:hover {background-color: blue;}
#diagram #front #dot1 {top: 75px;left: 0;}
#diagram #front #dot2 {top: 215px;left: 150px;}
#diagram #front #dot3 {top: 385px;left: 225px;}
#diagram #front #dot4 {top: 385px;left: 475px;}
#diagram #front #dot5 {top: 215px;left: 552px;}
#diagram #front #dot6 {top: 70px;left: 475px;}
#diagram #front #dot7 {top: 70px;left: 225px;}
#diagram #front #dot8 {top: 75px;left: 700px;}
#diagram #back {}
#diagram #back #curve1 {
  margin:0 auto;
  position:absolute;
  top: 100px;
  left: 25px;
  width:150px;
  height:150px;
  border-top:2px dotted #999;
  border-right:2px dotted #999;
  border-top-right-radius:150px;
  z-index: 100;
}
#diagram #back #curve2 {
  margin:0 auto;
  position:absolute;
  top: 253px;
  left: 176px;
  width:200px;
  height:200px;
  border-bottom:2px dotted #999;
  border-left:2px dotted #999;
  border-bottom-left-radius:200px;
  z-index: 100;
}
#diagram #back #curve3 {
  margin:0 auto;
  position:absolute;
  top: 253px;
  left: 376px;
  width:200px;
  height:200px;
  border-bottom:2px dotted #999;
  border-right:2px dotted #999;
  border-bottom-right-radius:200px;
  z-index: 100;
}
#diagram #back #curve4 {
  margin:0 auto;
  position:absolute;
  top: 100px;
  left: 577px;
  width:150px;
  height:150px;
  border-top:2px dotted #999;
  border-left:2px dotted #999;
  border-top-left-radius:150px;
  z-index: 100;
}
#diagram #back #curve5 {
  margin:0 auto;
  position:absolute;
  top: 50px;
  left:376px;
  width:200px;
  height:200px;
  border-top:2px dotted #999;
  border-right:2px dotted #999;
  border-top-right-radius:200px;
  z-index: 100;
}
#diagram #back #curve6 {
  margin:0 auto;
  position:absolute;
  top: 50px;
  left:176px;
  width:200px;
 ...