<svg version="1.1" id="flowchart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 350 350" style="enable-background:new 0 0 350 350;" xml:space="preserve">
<g id="liebstJava">
	<text transform="matrix(1 0 0 1 76.0012 110.9946)" class="question">Du liebst Java?</text>
	<g class="liebstJava-yes yes">
		<text transform="matrix(1 0 0 1 112.9297 227.8457)">ja</text>
	</g>
    <g class="liebstJava-no no">
		<text transform="matrix(1 0 0 1 208.2712 228.69)">nein</text>
	</g>
</g>
<g id="duWeisst">
	<g class="duWeisst-no no">
		<text transform="matrix(1 0 0 1 745.3185 544.3773)">nein</text>
	</g>
	<text transform="matrix(1 0 0 1 580.0493 376.8819)" class="question"><tspan x="0" y="0">Du weißt aber schon,</tspan><tspan x="6.6" y="26.4">was Java ist, oder?</tspan></text>
</g>
<g id="javaIst">
	 <g class="javaIst-yes yes">
		<text transform="matrix(1 0 0 1 1302.9327 682.3483)">Achso!</text>
	</g>
	<text transform="matrix(1 0 0 1 1100.1355 515.6971)" class="question"><tspan x="0" y="0">Java ist eine Programmiersprache,  </tspan><tspan x="-19.8" y="26.4">mit der vor allem Webanwendungen und  </tspan><tspan x="59.4" y="52.8">Apps programmiert werden.</tspan></text>
</g>
<g id="DuhastBock">
	<g class="DuhastBock-yes yes">
		<text transform="matrix(1 0 0 1 957.7422 1188.1733)">ja</text>
	</g>
	<g class="DuhastBock-no no">
		<text transform="matrix(1 0 0 1 1053.0837 1189.0176)">nein</text>
	</g>
	<text transform="matrix(1 0 0 1 782.2161 1000.9539)" class="question"><tspan x="0" y="0">Du hast Bock, die Programmiersprache</tspan><tspan x="33" y="26.4">zu lernen und eine Karriere als</tspan><tspan x="39.6" y="52.8">Java-Entwickler*in zu starten?</tspan></text>
</g>
<g id="bugfixing">
	<g class="bugfixing-yes yes">
		<text transform="matrix(1 0 0 1 -342.064 573.5331)">ja</text>
	</g>
	<g class="bugfixing-no no">
		<text transform="matrix(1 0 0 1 -246.7224 574.3773)">nein</text>
	</g>
	<text transform="matrix(1 0 0 1 -392.1919 406.8819)" class="question"><tspan x="0" y="0">Bugfixing ist wie</tspan><tspan x="6.6" y="26.4">Kaffeekochen für</tspan><tspan x="79.2" y="52.8">Dich?</tspan></text>
</g>
<g id="releaseTag">
	<g class="releaseTag-yes yes">
		<text transform="matrix(1 0 0 1 -799.8245 937.716)">ja</text>
	</g>
	<g class="releaseTag-no no">
		<text transform="matrix(1 0 0 1 -704.483 938.5602)">nein</text>
	</g>
	<text transform="matrix(1 0 0 1 -823.553 771.0648)" class="question"><tspan x="0" y="0">Du hättest am</tspan><tspan x="-33" y="26.4">liebsten jeden Tag</tspan><tspan x="6.6" y="52.8">Release-Tag?</tspan></text>
</g>
<g id="beherrschtJava">
	<g class="beherrschtJava-yes yes">
		<text transform="matrix(1 0 0 1 -76.1562 1040.3214)">ja</text>
	</g>
	<g class="beherrschtJava-no no">
		<text transform="matrix(1 0 0 1 19.1854 1041.1656)">nein</text>
	</g>
	<text transform="matrix(1 0 0 1 -165.8837 873.6702)" class="question"><tspan x="0" y="0">Aber Du beherrscht Java</tspan><tspan x="-26.4" y="26.4">und hast Bock darauf, Deine</tspan><tspan x="-59.4" y="52.8">Karriere als Java-Entwickler*in </tspan><tspan x="-99" y="79.2">zu starten oder sie weiter auszubauen?</tspan></text>
</g>
<g id="changeRequest">
	<g class="changeRequest-yes yes">
		<text transform="matrix(1 0 0 1 -799.8245 1393.4949)">ja</text>
	</g>
	<g class="changeRequest-no no">
		<text transform="matrix(1 0 0 1 -704.483 1394.3391)">nein</text>
	</g>
	<text transform="matrix(1 0 0 1 -830.1526 1226.8436)" class="question"><tspan x="0" y="0">Deine Karriere</tspan><tspan x="-6.6" y="26.4">braucht einenen</tspan><tspan x="-6.6" y="52.8">Change-Request?</tspan></text>
</g>
<g id="schade">
	<text transform="matrix(1 0 0 1 1608.9404 1099.804)" class="question"><tspan x="0" y="0">Schade – macht aber nichts!</tspan><tspan x="-33" y="26.4">Denn wir haben auch viele andere</tspan><tspan x="-39.6" y="52.8">tolle Jobs für Dich, bei denen Du</tspan><tspan x="-13.2" y="79.2">nicht programmieren musst ;-)</tspan><tspan x="-92.4" y="105.6"><a href="#">Hier</a> geht es zu unseren Stellenangeboten.</tspan><tspan x="26.4" y="158.4">PS: Wie hast Du es auf  </tspan><tspan x="-6.6" y="184.8">diese Seite hier geschafft?!</tspan></text>
</g>
<g id="nochnicht">
	<text transform="matrix(1 0 0 1 -188.116 1517.1)" class="question"><tspan x="0" y="0">Noch nicht! </tspan><tspan x="-79.2" y="26.4">Schau Dir <a href="#">hier</a> an, was  </tspan><tspan x="-72.6" y="52.8">Dir ansonsten entgeht!</tspan></text>
</g>
<g id="graduateProgram">
	<text transform="matrix(1 0 0 1 648.3401 1517.1)" class="question"><tspan x="0" y="0">Dann ist unser Graduate Program Java / Web Development  </tspan><tspan x="171.6" y="26.4">genau das Richtige für Dich!</tspan><tspan x="151.8" y="52.8"><a href="#">Hier</a> findest Du mehr Infos dazu.</tspan></text>
</g>
<g id="match">
	<text transform="matrix(1 0 0 1 -880.2354 1912.6318)" class="question"><tspan x="0" y="0">It´s a match!</tspan><tspan x="-33" y="26.4">Für mehr Infos zu </tspan><tspan x="-26.4" y="52.8">Deinem neuen Job </tspan><tspan x="-52.8" y="79.2">geht es <a href="#">hier</a> entlang!</tspan></text>
</g>
<path class="st3" d="M98.6,227.2c0,0-361.1-10.1-361.1,136.1"/>
<line class="st3" x1="-791.9" y1="961.5" x2="-791.9" y2="1194.3"/>
<line class="st3" x1="-790.9" y1="1416.2" x2="-790.9" y2="1871"/>
<path class="st3" d="M-200.4,570.5c0,0,179.3-3,179.3,261.6"/>
<path class="st3" d="M-360.2,572c0,0-372.1-21.6-372.1,170.4"/>
<line class="st3" x1="-662.1" y1="936.1" x2="-308.4" y2="936.1"/>
<line class="st3" x1="-75.5" y1="1056" x2="-666.1" y2="1911.1"/>
<path class="st3" d="M-677,1409.7c0,0,106,126.8,378.5,126.8"/>
<line class="st3" x1="221.8" y1="245" x2="44.1" y2="841.9"/>
<path class="st3" d="M60.3,1040.9c160.6,33.2,296.4-57.3,320.8-221.6c20.2-136.3-40.4-445.4,176.7-445.4"/>
<line class="st3" x1="796.3" y1="540.4" x2="1055.2" y2="540.4"/>
<path class="st3" d="M1279.6,678.4c0,0-284.3-18.3-284.3,273.1"/>
<line class="st3" x1="1108" y1="1185" x2="1488.7" y2="1185"/>
<line class="st3" x1="965.9" y1="1209.4" x2="965.9" y2="1464.2"/>
</svg>

body {
  background: #000000;
  color: #ffffff;
  fill: #ffffff;
  font-family:'PTMono-Regular';
}

svg {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  color: #ffffff;
}

.yes, .no, #movie, #animation, #fragment, #video-2 {
  cursor: pointer;
}

#flowchart path, #flowchart line {
  fill:none;
  stroke: #676767;
  stroke-dasharray: 5;
  stroke-linecap: round;
}

#flowchart a {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: white;
}

#flowchart .question {
  font-size: 24px;
}
var graphic = document.getElementById("flowchart");

function moveChart(origin, end) {
  $(origin).on("click", function() {
    var moveTo = document.getElementById(end);
    var s = moveTo.getBBox();
    var amt = 75;
    newView = "" + (s.x - amt) + " " + (s.y - amt) + " " + (s.width + amt*2) + " " + (s.height + amt*2);
    TweenMax.to(graphic, 1.5, {
        attr: { viewBox: newView },
        ease:Circ.easeOut
      });
  });
}

//USED ONLY FOR TWO PART ANSWERS
function moveTwice(origin, mid, end) {
  $(origin).on("click", function() {
    var moveMid = document.getElementById(mid);
    var moveEnd = document.getElementById(end);
    var endRect = "#" + end + " path";
    var m = moveMid.getBBox();
    var e = moveEnd.getBBox();
    var amt = 75;
    midView = "" + (m.x - amt) + " " + (m.y - amt) + " " + (m.width + amt*2) + " " + (m.height + amt*2);
    endView = "" + (e.x - amt) + " " + (e.y - amt) + " " + (e.width + amt*2) + " " + (e.height + amt*2);
    var tl = new TimelineLite();
    tl.to(graphic, 1.5, {
        attr: { viewBox: midView },
        ease:Circ.easeOut
      });
    tl.to(graphic, 1.5, {
        attr: { viewBox: endView },
        ease:Circ.easeOut
      }, "+=1");
    tl.staggerFromTo(endRect, 3, {
      drawSVG:"0 0"
    }, {
      drawSVG:true
    }, 0.1);
    tl.fromTo(endRect, 1, {
      fill:"#242326"
    }, {
      fill:"#468391",
      ease:Circ.easeOut
    });
  });
}

// USED ONLY FOR DRAWING NICE STUFF AROUND THE BOXES
function endChart(origin, end) {
  $(origin).on("click", function() {
    var moveTo = document.getElementById(end);
    var aRect = "#" + end + " path";
    var s = moveTo.getBBox();
    var amt = 75;
    newView = "" + (s.x - amt) + " " + (s.y - amt) + " " + (s.width + amt*2) + " " + (s.height + amt*2);
    var tl = new TimelineLite();
    tl.to(graphic, 1.5, {
        attr: { viewBox: newView },
        ease:Circ.easeOut
      });
    tl.staggerFromTo(aRect, 3, {
      drawSVG:"0 0"
    }, {
      drawSVG:true
    }, 0.1);
    tl.fromTo(aRect, 1, {
      fill:"#242326"
    }, {
      fill:"#468391",
      ease:Circ.easeOut
    });
  });

}

//Start: Du liebst Java?
moveChart(".liebstJava-yes", "bugfixing"); //--> Gehe Bugfixing
moveChart(".liebstJava-no", "beherrschtJava"); //--> Gehe Aber Du beherrscht.....


//Du weißt aber schon, was Java ist, oder?
moveChart(".duWeisst-no", "javaIst"); //--> Gehe Java ist eine Programmiersprache

//Java ist eine Programmiersprache
moveChart(".javaIst-yes", "DuhastBock"); // Gehe zu Du hast Bock, die Programmiersprache zu lernen und eine Karriere als Java-Entwickler*in zu starten?

//Du hast Bock, die Programmiersprache zu lernen und eine Karriere als Java-Entwickler*in zu starten?
moveChart(".DuhastBock-no", "schade"); //--> Schade / END PATH
moveChart(".DuhastBock-yes", "graduateProgram"); //--> Graduate Program / END PATH

//Bugfixing ist wie Kaffeekochen für Dich?
moveChart(".bugfixing-no", "beherrschtJava"); //--> Gehe Aber Du beherrscht...
moveChart(".bugfixing-yes", "releaseTag"); //--> Gehe Release Tag

//Du hättest am liebsten jeden Tag Release-Tag?
moveChart(".releaseTag-yes", "changeRequest"); //--> Gehe Change Request
moveChart(".releaseTag-no", "beherrschtJava");  //--> Gehe Aber Du beherrscht.....

//Deine Karriere braucht einenen Change-Request?
moveChart(".changeRequest-yes", "match");  //--> Gehe It's a match / END PATH
moveChart(".changeRequest-no", "nochnicht"); //--> Gehe Noch nicht  / END PATH

//Aber Du beherrscht Java und hast Bock darauf, Deine Karriere als Java-Entwickler*in zu starten oder sie weiter auszubauen?
moveChart(".beherrschtJava-yes", "match");  //--> Gehe It's a match / END PATH
moveChart(".beherrschtJava-no", "duWeisst"); //--> Gehe Du weißt aber schon

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=11
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js