CodePen

HTML

            
              <svg height="500" width="960">
  <defs>
    <marker orient="auto" markerHeight="6" markerWidth="6" refY="-1.5" refX="15" viewBox="0 -5 10 10" id="suit"><path d="M0,-5L10,0L0,5"></path></marker>
    <marker orient="auto" markerHeight="6" markerWidth="6" refY="-1.5" refX="15" viewBox="0 -5 10 10" id="licensing"><path d="M0,-5L10,0L0,5"></path></marker>
    <marker orient="auto" markerHeight="6" markerWidth="6" refY="-1.5" refX="15" viewBox="0 -5 10 10" id="resolved"><path d="M0,-5L10,0L0,5"></path></marker>
  </defs>
  <g>
    <path d="M425.3549513514856,320.962124116535A71.32200332450468,71.32200332450468 0 0,1 411.0623703624863,251.08687608911436" marker-end="url(#licensing)" class="link licensing"></path>
    <path d="M425.3549513514856,320.962124116535A70.62215831441404,70.62215831441404 0 0,1 488.2173888294503,288.7782275327597" marker-end="url(#licensing)" class="link licensing"></path>
    <path d="M552.1269082013362,249.93011429373558A65.45398666666395,65.45398666666395 0 0,1 549.0732156416574,315.31282861725373" marker-end="url(#suit)" class="link suit"></path>
    <path d="M487.62856504027,343.17457245310544A67.46644986288513,67.46644986288513 0 0,1 549.0732156416574,315.31282861725373" marker-end="url(#suit)" class="link suit"></path>
    <path d="M571.1791631430253,377.2444273446352A65.75861795888531,65.75861795888531 0 0,1 549.0732156416574,315.31282861725373" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M488.2173888294503,288.7782275327597A66.38913097571454,66.38913097571454 0 0,1 549.0732156416574,315.31282861725373" marker-end="url(#suit)" class="link suit"></path>
    <path d="M607.6084017300357,277.6695280613413A69.59444005912997,69.59444005912997 0 0,1 549.0732156416574,315.31282861725373" marker-end="url(#suit)" class="link suit"></path>
    <path d="M425.3549513514856,320.962124116535A71.51982352855518,71.51982352855518 0 0,1 355.98380187543836,338.3612269074143" marker-end="url(#suit)" class="link suit"></path>
    <path d="M425.3549513514856,320.962124116535A70.07878564437387,70.07878564437387 0 0,1 397.2181672978784,385.1443458022228" marker-end="url(#suit)" class="link suit"></path>
    <path d="M305.44509922569114,169.00052916641357A64.45260435871216,64.45260435871216 0 0,1 349.1755360955649,121.65301497833111" marker-end="url(#suit)" class="link suit"></path>
    <path d="M549.0732156416574,315.31282861725373A66.38913097571454,66.38913097571454 0 0,1 488.2173888294503,288.7782275327597" marker-end="url(#suit)" class="link suit"></path>
    <path d="M425.3549513514856,320.962124116535A72.41298387369983,72.41298387369983 0 0,1 363.1850691330716,283.83334850460244" marker-end="url(#suit)" class="link suit"></path>
    <path d="M552.1269082013362,249.93011429373558A62.02959938888496,62.02959938888496 0 0,1 607.6084017300357,277.6695280613413" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M637.389614897857,220.09087321010048A64.82454899361451,64.82454899361451 0 0,1 607.6084017300357,277.6695280613413" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M665.1909543207079,303.681095115358A63.18506139478808,63.18506139478808 0 0,1 607.6084017300357,277.6695280613413" marker-end="url(#suit)" class="link suit"></path>
    <path d="M627.4825172834269,154.08601873392848A66.74422370184921,66.74422370184921 0 0,1 637.389614897857,220.09087321010048" marker-end="url(#suit)" class="link suit"></path>
    <path d="M607.6084017300357,277.6695280613413A64.82454899361451,64.82454899361451 0 0,1 637.389614897857,220.09087321010048" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M549.0732156416574,315.31282861725373A65.75861795888531,65.75861795888531 0 0,1 571.1791631430253,377.2444273446352" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M544.2197154306764,435.59843605040993A64.28065146674005,64.28065146674005 0 0,1 571.1791631430253,377.2444273446352" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M549.0732156416574,315.31282861725373A67.46644986288513,67.46644986288513 0 0,1 487.62856504027,343.17457245310544" marker-end="url(#suit)" class="link suit"></path>
    <path d="M425.3549513514856,320.962124116535A66.11653214563485,66.11653214563485 0 0,1 487.62856504027,343.17457245310544" marker-end="url(#suit)" class="link suit"></path>
    <path d="M487.62856504027,343.17457245310544A66.11653214563485,66.11653214563485 0 0,1 425.3549513514856,320.962124116535" marker-end="url(#suit)" class="link suit"></path>
    <path d="M510.24377847697497,48.24793219070763A62.952310909411054,62.952310909411054 0 0,1 521.8950732751769,110.11262954194784" marker-end="url(#suit)" class="link suit"></path>
    <path d="M456.08374936222333,109.09783221481389A65.81914743287736,65.81914743287736 0 0,1 521.8950732751769,110.11262954194784" marker-end="url(#suit)" class="link suit"></path>
    <path d="M607.6084017300357,277.6695280613413A62.02959938888496,62.02959938888496 0 0,1 552.1269082013362,249.93011429373558" marker-end="url(#resolved)" class="link resolved"></path>
    <path d="M549.0732156416574,315.31282861725373A65.45398666666395,65.45398666666395 0 0,1 552.1269082013362,249.93011429373558" marker-end="url(#suit)" class="link suit"></path>
    <path d="M607.6084017300357,277.6695280613413A63.18506139478808,63.18506139478808 0 0,1 665.1909543207079,303.681095115358" marker-end="url(#suit)" class="link suit"></path>
    <path d="M571.1791631430253,377.2444273446352A64.28065146674005,64.28065146674005 0 0,1 544.2197154306764,435.59843605040993" marker-end="url(#suit)" class="link suit"></path>
  </g>
  <g>
    <circle transform="translate(425.3549513514856,320.962124116535)" r="6"></circle>
    <circle transform="translate(411.0623703624863,251.08687608911436)" r="6"></circle>
    <circle transform="translate(488.2173888294503,288.7782275327597)" r="6"></circle>
    <circle transform="translate(552.1269082013362,249.93011429373558)" r="6"></circle>
    <circle transform="translate(549.0732156416574,315.31282861725373)" r="6"></circle>
    <circle transform="translate(487.62856504027,343.17457245310544)" r="6"></circle>
    <circle transform="translate(571.1791631430253,377.2444273446352)" r="6"></circle>
    <circle transform="translate(607.6084017300357,277.6695280613413)" r="6"></circle>
    <circle transform="translate(355.98380187543836,338.3612269074143)" r="6"></circle>
    <circle transform="translate(397.2181672978784,385.1443458022228)" r="6"></circle>
    <circle transform="translate(305.44509922569114,169.00052916641357)" r="6"></circle>
    <circle transform="translate(349.1755360955649,121.65301497833111)" r="6"></circle>
    <circle transform="translate(363.1850691330716,283.83334850460244)" r="6"></circle>
    <circle transform="translate(637.389614897857,220.09087321010048)" r="6"></circle>
    <circle transform="translate(665.1909543207079,303.681095115358)" r="6"></circle>
    <circle transform="translate(627.4825172834269,154.08601873392848)" r="6"></circle>
    <circle transform="translate(544.2197154306764,435.59843605040993)" r="6"></circle>
    <circle transform="translate(510.24377847697497,48.24793219070763)" r="6"></circle>
    <circle transform="translate(521.8950732751769,110.11262954194784)" r="6"></circle>
    <circle transform="translate(456.08374936222333,109.09783221481389)" r="6"></circle>
  </g>
  <g>
    <g transform="translate(425.3549513514856,320.962124116535)"><text class="shadow" y=".31em" x="8">Microsoft</text><text y=".31em" x="8">Microsoft</text></g>
    <g transform="translate(411.0623703624863,251.08687608911436)"><text class="shadow" y=".31em" x="8">Amazon</text><text y=".31em" x="8">Amazon</text></g>
    <g transform="translate(488.2173888294503,288.7782275327597)"><text class="shadow" y=".31em" x="8">HTC</text><text y=".31em" x="8">HTC</text></g>
    <g transform="translate(552.1269082013362,249.93011429373558)"><text class="shadow" y=".31em" x="8">Samsung</text><text y=".31em" x="8">Samsung</text></g>
    <g transform="translate(549.0732156416574,315.31282861725373)"><text class="shadow" y=".31em" x="8">Apple</text><text y=".31em" x="8">Apple</text></g>
    <g transform="translate(487.62856504027,343.17457245310544)"><text class="shadow" y=".31em" x="8">Motorola</text><text y=".31em" x="8">Motorola</text></g>
    <g transform="translate(571.1791631430253,377.2444273446352)"><text class="shadow" y=".31em" x="8">Nokia</text><text y=".31em" x="8">Nokia</text></g>
    <g transform="translate(607.6084017300357,277.6695280613413)"><text class="shadow" y=".31em" x="8">Kodak</text><text y=".31em" x="8">Kodak</text></g>
    <g transform="translate(355.98380187543836,338.3612269074143)"><text class="shadow" y=".31em" x="8">Barnes &amp; Noble</text><text y=".31em" x="8">Barnes &amp; Noble</text></g>
    <g transform="translate(397.2181672978784,385.1443458022228)"><text class="shadow" y=".31em" x="8">Foxconn</text><text y=".31em" x="8">Foxconn</text></g>
    <g transform="translate(305.44509922569114,169.00052916641357)"><text class="shadow" y=".31em" x="8">Oracle</text><text y=".31em" x="8">Oracle</text></g>
    <g transform="translate(349.1755360955649,121.65301497833111)"><text class="shadow" y=".31em" x="8">Google</text><text y=".31em" x="8">Google</text></g>
    <g transform="translate(363.1850691330716,283.83334850460244)"><text class="shadow" y=".31em" x="8">Inventec</text><text y=".31em" x="8">Inventec</text></g>
    <g transform="translate(637.389614897857,220.09087321010048)"><text class="shadow" y=".31em" x="8">LG</text><text y=".31em" x="8">LG</text></g>
    <g transform="translate(665.1909543207079,303.681095115358)"><text class="shadow" y=".31em" x="8">RIM</text><text y=".31em" x="8">RIM</text></g>
    <g transform="translate(627.4825172834269,154.08601873392848)"><text class="shadow" y=".31em" x="8">Sony</text><text y=".31em" x="8">Sony</text></g>
    <g transform="translate(544.2197154306764,435.59843605040993)"><text class="shadow" y=".31em" x="8">Qualcomm</text><text y=".31em" x="8">Qualcomm</text></g>
    <g transform="translate(510.24377847697497,48.24793219070763)"><text class="shadow" y=".31em" x="8">Huawei</text><text y=".31em" x="8">Huawei</text></g>
    <g transform="translate(521.8950732751769,110.11262954194784)"><text class="shadow" y=".31em" x="8">ZTE</text><text y=".31em" x="8">ZTE</text></g>
    <g transform="translate(456.08374936222333,109.09783221481389)"><text class="shadow" y=".31em" x="8">Ericsson</text><text y=".31em" x="8">Ericsson</text></g>
  </g>
</svg>

            
          
!
via HTML Inspector

CSS

            
              
path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

marker#licensing {
  fill: green;
}

marker#suit {
  fill: black;
}

marker#resolved {
  fill: black;
}

path.link.licensing {
  stroke: green;
}

path.link.resolved {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................