CodePen Embed - SVG Org Chart

<svg class="org-chart-team" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-800 -550 1600 1200" overflow="visible">
  <defs><g id="b"><circle cx="100" cy="50" r="48" stroke-width="4" stroke="var(--borderColor)" fill="#12192c"/><circle cx="100" cy="50" r="40" fill="currentColor"/><clipPath id="a"><circle cx="94.5" cy="47.9" r="40"/></clipPath><g clip-path="url(#a)" transform="translate(5.5 2)"><path class="st3" d="M110.5 45.6H78.6c-4 0-7.2 1.9-7.3 4.3l-.8 26.6h48.1l-.8-26.6c-.1-2.5-3.4-4.3-7.3-4.3"/><path class="st4" d="M121 86.9l-8.3 1.3C100.4 90 88 90 75.8 88.1l-7.7-1.2v-14c0-4 3.2-7.2 7.2-7.2h38.5c4 0 7.2 3.2 7.2 7.2v14z"/><path class="st3" d="M78.4 47.3h-.6c-.7 0-1.2-.6-1.2-1.2V23.2c0-.7.6-1.2 1.2-1.2h.6c.7 0 1.2.6 1.2 1.2v22.9c0 .7-.5 1.2-1.2 1.2z"/><circle class="st4" cx="78.1" cy="20.7" r="2.8"/><circle class="st4" cx="94.5" cy="51.4" r="20.3"/><path d="M111.1 53.1c0 8-7.4 11.2-16.5 11.2S78 61 78 53.1s7.4-14.4 16.5-14.4 16.6 6.4 16.6 14.4z" fill="#13192d" stroke="#12192c" stroke-width="1.5" /><path fill="none" stroke="#12192c" stroke-width="1.5" stroke-linecap="round" d="M112.5 88V76.9"/><path fill="none" stroke="#12192c" stroke-width="1.5" stroke-linecap="round" d="M76.3 87.9v-11"/></g></g></defs>
  <g class="ceo" transform="translate(-100 -500)"><use xlink:href="#b"/><text transform="translate(78 130)" >CEO</text><text transform="translate(50 150)" >Name Surname</text></g>
  <path class="line green" d="M0-320v25M-600-270v-25h400v25M-200-295h400v25M200 -295h400v25"/>
  <g class="coo" transform="translate(-700 -250)"><use xlink:href="#b"/><text transform="translate(76 130)" >COO</text><text transform="translate(50 150)">Name Surname</text></g>
  <path class="line green" d="M-600 -70v25M-700 -20v-25h200v25"/>
  <g class="adm" transform="translate(-600 0)"><use xlink:href="#b"/><text transform="translate(24 130)">Administrative</text></g>
  <g class="hr" transform="translate(-800 0)"><use xlink:href="#b"/><text transform="translate(84 130)">HR</text></g>
  <g class="ciso" transform="translate(-300 -250)"><use xlink:href="#b"/><text transform="translate(74 130)" >CISO</text><text transform="translate(50 150)">Name Surname</text></g>
  <path class="line green" d="M-200 -70v50"/>
  <g class="it" transform="translate(-300 0)"><use xlink:href="#b"/><text transform="translate(90 130)">IT</text></g> 
  <g class="cro" transform="translate(500 -250)"><use xlink:href="#b"/><text transform="translate(78 130)" >CRO</text><text transform="translate(50 150)">Name Surname</text></g>
  <path class="line green" d="M600 -70v50"/>
  <g class="sm" transform="translate(500 0)"><use xlink:href="#b"/><text transform="translate(22 130)">Sales Manager</text></g>
  <g class="cto" transform="translate(100 -250)"><use xlink:href="#b"/><text transform="translate(80 130)" >CTO</text><text transform="translate(48 150)">Name Surname</text></g>
  <path class="line green" d="M200 -70v25M100 -20v-25h200v25"/>
  <g class="hu" transform="translate(200 0)"><use xlink:href="#b"/><text transform="translate(42 130)">Head of UX</text></g>
  <g class="am"><use xlink:href="#b"/><text transform="translate(6 130)">Account Manager</text></g>
  <path class="line am-tl" d="M100 150v25M0 200v-25h100"/>
  <path class="line am-pl" d="M100 150v25M100 175h100v25"/>
  <g class="tl" transform="translate(-100 210)"><use xlink:href="#b"/><text transform="translate(32 130)">Tech Leader</text></g>
  <path class="line pl-do" d="M100 260h40m-40 0v115h-200v25"/>
  <path class="line pl-dev" d="M100 260h40m-40 0v140"/>
  <path class="line pl-ui" d="M100 260h40m-40 0v115h200v25"/>
  <path class="line tl-do" d="M60 260h40v115h-200v25"/>
  <path class="line tl-dev" d="M60 260h40v140"/>
  <path class="line tl-ui" d="M60 260h40v115h200v25"/>
  <g class="pl" transform="translate(100 210)"><use xlink:href="#b"/><text transform="translate(26 130)">Project Leader</text></g>
  <g class="do" transform="translate(-200 410)"><use xlink:href="#b"/><text transform="translate(60 130)">DevOps</text></g>
  <g class="dev" transform="translate(0 410)"><use xlink:href="#b"/><text transform="translate(50 130)">Developer</text></g>
  <g class="ui" transform="translate(200 410)"><use xlink:href="#b"/><text transform="translate(20 130)">UI/UX Developer</text></g></svg>

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap');

body { 
  background-color: #1f2740; 
  margin: 0 auto;
  max-width: 900px;
}
svg { color: #ffa4a4; }
.st3,.st4{
  fill:#ffcb2f;
  stroke:#12192c;
  stroke-width:1.5;
}
.st4 { fill:#69b2b1; }
text {
  fill: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.5rem;
}
text + text { font-size: 1rem;}
.line {
  fill:none;
  stroke:#f65a6d;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.line.green { stroke: #69b3b2; }
.ceo { --borderColor: #ffcb2f; }
.coo, .ciso, .cto, .cro { --borderColor: #69b3b2; }
.am, .tl, .pl, .dev, .ui, .do { color: #f65a6d; }

This Pen is owned by Mariana Beldi on CodePen.

See more by @marianab on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.