<div class="wrapper">
<div class="svg-container">
  <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
    
    <defs>
      <marker id="arrow" markerWidth="4" markerHeight="10" viewBox="-2 -4 4 4" refX="0" refY="0" markerUnits="strokeWidth" orient="auto">
        <polyline points="2,-2 0,0 2,2" stroke="#443c3d" stroke-width="0.75px" fill="none"/>
      </marker>
  </defs>
 
    
    <g class="box-group">
      <g transform="translate(-5)">
	      <circle fill="#000" cx="55" cy="50" r="45" opacity="1" />
        <text x="28" y="58" font-family="Open Sans Condensed" font-size="26" stroke="none" fill="#f5f3e7" font-weight="100" style="text-transform:uppercase; letter-spacing: 1px">Start</text>
        <line x1="102" x2="135" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
      </g>
        
      <line x1="100" x2="136" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />

      <g transform="translate(136)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #1</tspan>
      </text>
      </g>

      <line x1="230" x2="268" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
      
      <g transform="translate(268)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #2</tspan>
      </text>
      </g>

      <line x1="362" x2="400" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
      
      <g transform="translate(400)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #3</tspan>
      </text>
      </g>
    </g>
    
    <line x1="450" x2="450" y1="77" y2="124" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
    
    <g class="box-group" transform="translate(0,100)">
      <g transform="translate(5)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #7</tspan>
      </text>
      </g>
        
      <line x1="100" x2="136" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />

      <g transform="translate(136)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #6</tspan>
      </text>
      </g>

      <line x1="230" x2="268" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
      
      <g transform="translate(268)">
        <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" fill="#72508d" transform="translate(-12,-10)"/>
      <rect fill="#72508d" stroke="#72508d" stroke-width="0" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#fff" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #5</tspan>
      </text>
      </g>

      <line x1="362" x2="400" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" marker-start="url(#arrow)"/>
      
      <g transform="translate(400)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #4</tspan>
      </text>
      </g>
    </g>
    
    <line x1="50" x2="50" y1="177" y2="224" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
    
    <g class="box-group" transform="translate(0,200)">
      <g transform="translate(5)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #8</tspan>
      </text>
      </g>
        
      <line x1="100" x2="136" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />

      <g transform="translate(136)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #9</tspan>
      </text>
      </g>

      <line x1="230" x2="268" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
      
      <g transform="translate(268)">
      <rect fill="#66cc00" x="2" y="25" rx="3" ry="3" width="90" height="50" />
      <text x="16" y="47" font-family="Open Sans Condensed" font-size="14" stroke="none" fill="#f5f3e7" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Workflow
        <tspan x="26" dy="17">Step #10</tspan>
      </text>
      </g>

      <line x1="362" x2="400" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="2,1" />
      
      <g transform="translate(392)">
	      <circle fill="#000" cx="55" cy="50" r="45" opacity="1" />
        <text x="37" y="58" font-family="Open Sans Condensed" font-size="26" stroke="none" fill="#f5f3e7" font-weight="100" style="text-transform:uppercase; letter-spacing: 1px">End</text>
      </g>
    </g>
  
	</svg>
</div>
</div>

body {
  background: #f5f3e7;
}

.wrapper {
  padding: 50px 100px;
}

.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle; 
	overflow: hidden; 
  background: #f5f3e7;
}

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

// line {
//   //position: relative;
//   z-index: -1;
// }

// rect {
//   //position: relative;
//   z-index: 1;
// }

var svg = document.getElementsByTagName("svg");

var rect = document.getElementsByTagName("rect");

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', '#000');
text.textContent = 'Hello, I am a blah blah blah blah blah';