luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

segmentation page animations complete

This commit is contained in:
Jeff Escalante 2018-06-19 18:48:56 -04:00 committed by Jack Pearkes
parent 69adb06caa
commit 2cfe88062b
7 changed files with 1202 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
website/source/assets/images/consul-connect/svgs/segmentation-challenge.svg Normal file
View File

@ -0,0 +1,232 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 328">
<defs>
<style>.c-cls-1{isolation:isolate;}.c-cls-2{fill:#cfd1d9;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-13,.c-cls-14,.c-cls-17,.c-cls-18,.c-cls-19,.c-cls-3{fill:none;}.c-cls-19,.c-cls-3{stroke:#b5b8c4;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-13,.c-cls-14,.c-cls-15,.c-cls-18,.c-cls-19,.c-cls-3{stroke-miterlimit:10;}.c-cls-18,.c-cls-3{stroke-width:1.5px;}.c-cls-4{opacity:0.12;mix-blend-mode:multiply;}.c-cls-15,.c-cls-21,.c-cls-22,.c-cls-5{fill:#fff;}.c-cls-6{fill:#b5b8c4;}.c-cls-7{fill:url(#c-linear-gradient);}.c-cls-8{opacity:0.1;}.c-cls-9{fill:#66a2ff;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-13,.c-cls-14,.c-cls-15{stroke:#66a2ff;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-13,.c-cls-14,.c-cls-15,.c-cls-19{stroke-linecap:round;}.c-cls-11{stroke-dasharray:0.98 2.93;}.c-cls-12{stroke-dasharray:1 3;}.c-cls-13{stroke-dasharray:0.98 2.95;}.c-cls-14{stroke-dasharray:1 3;}.c-cls-16{opacity:0.88;}.c-cls-18{stroke:#e80134;}.c-cls-20{fill:url(#c-New_Gradient_Swatch);}.c-cls-21{opacity:0.9;}.c-cls-22{opacity:0.32;}.c-cls-23{fill:url(#c-New_Gradient_Swatch-2);}.c-cls-24{fill:url(#c-New_Gradient_Swatch-3);}</style>
<linearGradient id="c-linear-gradient" x1="8" y1="158" x2="80" y2="158" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#252937" />
<stop offset="1" />
</linearGradient>
<linearGradient id="c-New_Gradient_Swatch" x1="146.59" y1="192.59" x2="193.41" y2="239.41" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e80134" />
<stop offset="1" stop-color="#ac0027" />
</linearGradient>
<linearGradient id="c-New_Gradient_Swatch-2" x1="194.59" y1="88.59" x2="241.41" y2="135.41" xlink:href="#c-New_Gradient_Swatch" />
<linearGradient id="c-New_Gradient_Swatch-3" x1="266.59" y1="192.59" x2="313.41" y2="239.41" xlink:href="#c-New_Gradient_Swatch" />
<image id="c-image" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsSAAALEgHS3X78AAADrElEQVRoQ+2a627bMAxGj1p3SXrZutv7P+GGos3a3BrtB0WLViTbixUgHfIBgh3bkXhE0okpO+89/4OaoQtSOefc0DU15P9xhl3f9YnRpf3aSg1qP/fBZT0SANTYKz1s2qnlzbZtOq85oAMQA3GVaXocTgdkjd9nmnfOHcB0QAzENWJwkzQ9nnpmClQulPbAe2g70/QYKUwLknjiGrgBPgGzsP0UjjVED7Vf53hZEAuxA7bAOrRNaITzZY8QvdEgAAvgNrQFMEeASp6ZIg2ndwRgA7wBr6bZ6zoh1kDRG3PgDvgMfAEeEKB5OK8wMB3G5sQ74oE3YAk8Eydcz7f5oh3kPHKFGDoD7oFH4DvwFYG6Dec0xKZCqNS4LbBCIJ4QWyCG2jbsd8a1IDbRNbTuEG98A34iMA9ImN1QL7xsWK2RMHpGwhginDY7bgwtIz3ZhE40vNQrPxCwW7q5MlUKskNAlsjYILnyB3ihG9K9HtGtzZUFMVceEa/cIx67pq5HdsiMz8LxFQKwQCZOfwLa8ZxzznvvLYgmjk38hpgvCnSPhFfNPNFE3xFzYk28ucw49EbRI6nSO5mG2wzpfE4E0euPkU6gJjphO6MLkIMo5ghEN1spUO7XvqZHQLyS/pMYvKn0eaQEZD1lB5kiHSc12jECAg5BfNJKcpk2VTZc0n4H+x+6dY6Bqqkhg4uTNgTyYXQBOTddQM5NF5Bz0wXk3HQBOTddQM5NJZAx/3iHzh+joT6LdvU9WKm82aZ/68cAj1Guz/RYr4ZAtLM93c5tdRyGnyOGlPaZjjU4YWMedbXztDKuhYLaxYe0+p7CZZUrB1kALePbqviKbhmz1jO7loPekDF0vC3RjhSoBSs9syuEAqyQMuaSWDzbhu/XeGbXcbVA94KM9UqEUqCsdxoA770364WeGEZa2tequJYx18QCXW0QLZk+IWMuERs2xHBrITrLCkapNxTiiVhQXhEr8rVLpmkR+xcytsKkXmmV5oiNVduh5sQGcbuukWgdqoZKywq/ERteEZt2ZMKr5BELotdskar4guiNUcWzEUpzM13oKYG06gPZEJe7bBLqWmKtsFLZ8CotvWmelEFCwkOcFV14tO7WxdDcGsWxQNYg65XSYmibI9lVXSOdFbuvIGlV3KoGiH62v2G55en0O4evcJiFUUe3UJ0rMJ9C3rR9pnkSb0AGBFoY6BptjT8VhMqbbdqyr3Ac+1JN7nMt5UJNdnqM7QXJ6UO+5vSR9BccytkZbx1ULgAAAABJRU5ErkJggg==" />
<image id="c-image-2" width="66" height="66" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAACXBIWXMAAAsSAAALEgHS3X78AAAD3klEQVR4Xu2cb08bMQyHn2OFAgI0gbTv/wU3scFK6R9uL2w3jpu7K2+4DPKTolZp7nCe2L5Udej6vqcJFlMDorqu66bG1KD+nSvcjY0Pk44AagbiJ3V4PwanCMIB6AoN6oZg6l0DeLP+EpCj0FAI1s4KLUKpTX7ivb5mreu6I+/IQAQI37QtXLM+A5JdznyKoWAA9sAutA7YRxilZGkQFsCFtqW2cxKQCKMWELbyO2ALbLS96utWx2eecQDhvOEMmegFcAlcu3al/ec6pqYQiZ6wAdbAC7Ai2duHBhx7hIEwb7gG7ly7QWAsyb1ibhg+L+yRVV8jAJ6A3yQIe5LX9OYVYyCWJBAPwD3wHYFxiXiFJdAaZN6wQ8JgBfxB5tHpZxYqW8LieRA+NCKIe+AHAuRO+80ravEIA7FFwuEJWbCOHM4Lud15jlD5HHGOhMEN4gkPCAzziqVeXwMIyHPDCrH9DAHzF4FywYDNC6C0g/RPDYNxRwJyi9y4FhDmEXtk5Z8RmzaIZ1yRErx/2h3sLnlE9Iol6elxg0C4RW6+oLyn+Gj5/HChfRtSYrfHfkzuxaeGp+RheCAG5Yo8YfrrP1r+iWEbpg0pDE56uo19+/RADIrfZUbKc8o8ApJ9/itBHDv9XSPIw+g4hjP0xz5aNrGx70JFAKYpEHAcMt1A39w6xZbirhKGN0NTN7Qx/4OKE4+qZVc4uxoIVQOhaiBUDYSqgVA1EKoGQtVAqBoIVQOhaiBUDYSqgVA1EKoGQtVAqBoIVQOhaiBUDYSqgVA1EKoGQtVAqBoIVQOhaiBUDYRqCMTkr8cnfD6HpmwanNcp9RG9e40/sZ8C7CNUsin2jWoKhN3sjfzmvtod5q+ViDZFWycXbAxEnHSsdN/qOAuvuWDYBK3Y1NuYlRszAsODiK5lk7fa5ldta6SQDOSPnTEfBJPZu0Mqa9cke7ekeUQgBzDRIyIEA2AF3s9IiSH6WW0FpzvE1ifE1hUJigEpescCoO/73lXf9qQw2CCEn5EC70sd80pdJcgehFXePiI2PyNz2JDC5QDh6LyG9ZN7g0F4JFW0rqm3KN1KkK0y/ydiu8GIXnFQzBE+1vwNLSdYbXONxxQsKdpZDVvAX8gcVsicdhTCY8gjPAgbY1XutR5c8d78Sh7SQyAOGgNh5f6QJ6HajzJZWFt+W7lmeWIYhCZMSFQ3+pF3txoPt/kJea+wvY49Ru2Q2yFHTJ3yM6r+vYGo8bhjtrLkMOIm0PriNccngT/JAVifM2LrCd4ABRDAZzgS3bvX2IpnxD/jIflSqMib9x6SH9OX/LcJX0n/AL2W2IPiDY2XAAAAAElFTkSuQmCC" />
</defs>
<title>Service Segmentation_Challenge_dev</title>
<g class="c-cls-1">
<g id="c-service-segmentation-challenge-dev">
<g id="c-servers">
<path class="c-cls-2" d="M320.5,9.5v102h-205V9.5h205M322,8H114V113H322V8Z" />
<path class="c-cls-2" d="M224.5,216.5v102h-109v-102h109M226,215H114V320H226V215Z" />
<path class="c-cls-2" d="M320.5,216.5v102h-61v-102h61M322,215H258V320h64V215Z" />
</g>
<g id="c-service-connection-paths">
<g id="c-static_paths" data-name="static paths">
<polyline class="c-cls-3" points="166 240 166 255 146 255 146 272" />
<polyline class="c-cls-3" points="170 240 170 259 150 259 150 272" />
<polyline class="c-cls-3" points="142 272 142 251 162 251 162 240" />
<line class="c-cls-3" x1="286" y1="272" x2="286" y2="240" />
<line class="c-cls-3" x1="294" y1="272" x2="294" y2="240" />
<line class="c-cls-3" x1="298" y1="272" x2="298" y2="240" />
<polyline class="c-cls-3" points="146 56 146 74 212 74 212 88" />
<polyline class="c-cls-3" points="142 56 142 78 208 78 208 88" />
<polyline class="c-cls-3" points="166 192 166 158 212 158 212 136" />
<polyline class="c-cls-3" points="162 192 162 154 208 154 208 136" />
<polyline class="c-cls-3" points="244 56 244 74 224 74 224 88" />
<polyline class="c-cls-3" points="240 56 240 70 220 70 220 88" />
<polyline class="c-cls-3" points="174 192 174 166 286 166 286 192" />
<polyline class="c-cls-3" points="223.75 136 223.75 158 294 158 294 192" />
<polyline class="c-cls-3" points="227.75 136 227.75 154 298 154 298 192" />
</g>
<g id="c-path-3">
<line class="c-cls-3" x1="290" y1="240" x2="290" y2="272"/>
<polyline class="c-cls-3" points="194 56 194 70 216 70 216 88" />
<polyline class="c-cls-3" points="220 136 220 162 290 162 290 192" />
</g>
<g id="c-path-2">
<polyline class="c-cls-3" points="196 272 196 255 178 255 178 240" />
<line class="c-cls-3" x1="282" y1="240" x2="282" y2="272" />
<polyline class="c-cls-3" points="178 192 178 170 282 170 282 192" />
</g>
<g id="c-path-1">
<polyline class="c-cls-3" points="174 240 174 259 192 259 192 272" />
<polyline class="c-cls-3" points="290 56 290 78 228 78 228 88" />
<polyline class="c-cls-3" points="216 136 216 162 170 162 170 192" />
</g>
</g>
<g id="c-service_boxes" data-name="service boxes">
<g id="c-box-7">
<use class="c-cls-4" transform="translate(265 266)" xlink:href="#c-image" />
<rect class="c-cls-5" x="274.75" y="272.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M304,273.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H276a.51.51,0,0,1-.5-.5V274a.51.51,0,0,1,.5-.5h28m0-1.5H276a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V274a2,2,0,0,0-2-2Z" />
</g>
<g id="c-box-6">
<use class="c-cls-4" transform="translate(169 266)" xlink:href="#c-image" />
<rect class="c-cls-5" x="178.75" y="272.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M208,273.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H180a.51.51,0,0,1-.5-.5V274a.51.51,0,0,1,.5-.5h28m0-1.5H180a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V274a2,2,0,0,0-2-2Z" />
</g>
<g id="c-box-5">
<use class="c-cls-4" transform="translate(121 266)" xlink:href="#c-image" />
<rect class="c-cls-5" x="130.75" y="272.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M160,273.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H132a.51.51,0,0,1-.5-.5V274a.51.51,0,0,1,.5-.5h28m0-1.5H132a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V274a2,2,0,0,0-2-2Z" />
</g>
<g id="c-box-4">
<use class="c-cls-4" transform="translate(265 18)" xlink:href="#c-image" />
<rect class="c-cls-5" x="274.75" y="24.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M304,25.5a.51.51,0,0,1,.5.5V54a.51.51,0,0,1-.5.5H276a.51.51,0,0,1-.5-.5V26a.51.51,0,0,1,.5-.5h28m0-1.5H276a2,2,0,0,0-2,2V54a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V26a2,2,0,0,0-2-2Z" />
</g>
<g id="c-box-3">
<use class="c-cls-4" transform="translate(217 18)" xlink:href="#c-image" />
<rect class="c-cls-5" x="226.75" y="24.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M256,25.5a.51.51,0,0,1,.5.5V54a.51.51,0,0,1-.5.5H228a.51.51,0,0,1-.5-.5V26a.51.51,0,0,1,.5-.5h28m0-1.5H228a2,2,0,0,0-2,2V54a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V26a2,2,0,0,0-2-2Z" />
</g>
<g id="c-box-2">
<use class="c-cls-4" transform="translate(169 18)" xlink:href="#c-image" />
<rect class="c-cls-5" x="178.75" y="24.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M208,25.5a.51.51,0,0,1,.5.5V54a.51.51,0,0,1-.5.5H180a.51.51,0,0,1-.5-.5V26a.51.51,0,0,1,.5-.5h28m0-1.5H180a2,2,0,0,0-2,2V54a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V26a2,2,0,0,0-2-2Z" />
</g>
<g id="c-box-1">
<use class="c-cls-4" transform="translate(121 18)" xlink:href="#c-image" />
<rect class="c-cls-5" x="130.75" y="24.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="c-cls-6" d="M160,25.5a.51.51,0,0,1,.5.5V54a.51.51,0,0,1-.5.5H132a.51.51,0,0,1-.5-.5V26a.51.51,0,0,1,.5-.5h28m0-1.5H132a2,2,0,0,0-2,2V54a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V26a2,2,0,0,0-2-2Z" />
</g>
</g>
<g id="c-computer">
<image class="c-cls-4" width="90" height="82" transform="translate(-1 130)" xlink:href="data:image/png;base64,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" />
<g id="c-screen">
<path class="c-cls-7" d="M80,180H8V138a2,2,0,0,1,2-2H78a2,2,0,0,1,2,2Z" />
<path class="c-cls-5" d="M78,192H10a2,2,0,0,1-2-2V180H80v10A2,2,0,0,1,78,192Z" />
<path class="c-cls-5" d="M57,199.25v0h0c0-.17-.23-.4-.74-.63-.32-.15-1.65-.82-2.79-1.4S51,195.75,51,194.81V192H37v2.81c0,.94-1.34,1.79-2.47,2.38s-2.46,1.25-2.79,1.4c-.5.23-.73.46-.73.63h0v.5h0c0,.17.28.28.74.28H56.26c.48,0,.74-.12.74-.3Z" />
<polygon class="c-cls-8" points="51 194.15 51 192 37 192 37 193.06 51 194.15" />
</g>
<g id="c-rules">
<rect class="c-cls-5" x="16" y="144" width="15" height="2" />
<rect class="c-cls-5" x="35" y="144" width="12" height="2" />
<rect class="c-cls-5" x="61" y="144" width="11" height="2" />
<rect class="c-cls-5" x="51" y="144" width="6" height="2" />
<rect class="c-cls-5" x="16" y="149" width="15" height="2" />
<rect class="c-cls-5" x="35" y="149" width="12" height="2" />
<rect class="c-cls-5" x="61" y="149" width="11" height="2" />
<rect class="c-cls-5" x="51" y="149" width="6" height="2" />
<rect class="c-cls-9" x="16" y="154" width="15" height="2" />
<rect class="c-cls-9" x="35" y="154" width="12" height="2" />
<rect class="c-cls-9" x="61" y="154" width="11" height="2" />
<rect class="c-cls-9" x="51" y="154" width="6" height="2" />
<rect class="c-cls-9" x="16" y="159" width="15" height="2" />
<rect class="c-cls-9" x="35" y="159" width="12" height="2" />
<rect class="c-cls-9" x="61" y="159" width="11" height="2" />
<rect class="c-cls-9" x="51" y="159" width="6" height="2" />
<rect class="c-cls-9" x="16" y="164" width="15" height="2" />
<rect class="c-cls-9" x="35" y="164" width="12" height="2" />
<rect class="c-cls-9" x="61" y="164" width="11" height="2" />
<rect class="c-cls-9" x="51" y="164" width="6" height="2" />
<rect class="c-cls-9" x="16" y="169" width="15" height="2" />
<rect class="c-cls-9" x="35" y="169" width="12" height="2" />
<rect class="c-cls-9" x="61" y="169" width="11" height="2" />
<rect class="c-cls-9" x="51" y="169" width="6" height="2" />
</g>
</g>
<g id="c-firewall-updates">
<g id="c-update_path" data-name="update path">
<g id="c-dotted-line-bottom">
<polygon class="c-cls-9" points="141.56 204.78 138.78 202.86 136 200.93 136 204.78 136 208.63 138.78 206.71 141.56 204.78" />
<line class="c-cls-10" x1="114.5" y1="164.5" x2="114.5" y2="165" />
<path class="c-cls-11" d="M114.5,167.93V185.5a19,19,0,0,0,17,18.9" />
<path class="c-cls-10" d="M133,204.49h.5" />
</g>
<g id="c-dotted-line-top">
<polygon class="c-cls-9" points="189.56 123.78 186.78 121.86 184 119.93 184 123.78 184 127.64 186.78 125.71 189.56 123.78" />
<line class="c-cls-10" x1="181.5" y1="123.5" x2="181" y2="123.5" />
<path class="c-cls-12" d="M178,123.5H133.5a19,19,0,0,0-19,19v20" />
<line class="c-cls-10" x1="114.5" y1="164" x2="114.5" y2="164.5" />
</g>
<g id="c-dotted-line-bottomright">
<polygon class="c-cls-9" points="261.56 204.78 258.78 202.86 256 200.93 256 204.78 256 208.63 258.78 206.71 261.56 204.78" />
<line class="c-cls-10" x1="198.5" y1="204.5" x2="199" y2="204.5" />
<line class="c-cls-13" x1="201.95" y1="204.5" x2="251.53" y2="204.5" />
<line class="c-cls-10" x1="253" y1="204.5" x2="253.5" y2="204.5" />
</g>
<line id="c-dotted-line-middle" class="c-cls-14" x1="98" y1="165" x2="81" y2="165" />
<circle id="c-anchor" class="c-cls-15" cx="80" cy="165" r="3.5" />
</g>
<g id="c-edit">
<image class="c-cls-4" width="50" height="50" transform="translate(90 142)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsSAAALEgHS3X78AAADi0lEQVRoQ+2aYW/aMBBAXzoKbdVWUyvt///BTd3KKASo9+F88flwEijJlk6cdApyHNvPd2eHc6oQAv+DzPoqeKmqquqrM4SEE2e46qrvBu0BxgSyg2p+d8EVQQxAVVAYF0IlGAV41/IS0IFrRQjVq4J6qKHFDjzEa6ZVVR1YJwNxEF+izoxqmQJlj/Nx8a6kAHtg57QC9h6mFOwKMQPmURdRr0lAHmYoEJ35HbAF6qibeN3G+pllGhBjjStkoHPgBrgzehvLr2OdIV3MW6IG1sAbsCL1F5wChxZRELXGHfBo9B6BWZBb5VwYGxd7ZNbXCMAr8JMEsSdZLahVukAWJJBn4An4isDcIFbRBWAIUWvsEDdaAb+QcVTxnrraFjd5FsS6lgd5Ar4hQI+xXK0ylEUUZIu40ysyYRU53Bt5v3mMRLExco240T1iiWcERq2yiM8PAQJ5bKyQvq8QsN8I1JyWPmdAaQe3q5bCPJKAHpCGhwJRi+yRmV8ibdaIZW5JC4xdLZt+SxbxVlmQVq97BOIBaXxGeU85VWx8zGNZTVpYdNn3i0tx1bKUFsYCKdQtecDb508Vu2LphleT3Oio1bHr7dcCKZTd5f0snSNqEUjt21ciX7f/XcuJhak4hGvr7FTRgXW9yxUBVPpA4NDlqpayc+WYtoq7OrRvZn0Nap2/IcWBexlqV/7ncgGZmlxApiYXkKnJBWRqcgGZmlxApiZtIL1vm0fc/4j0tdk6rmP+jwRz9a/UxwAfI6U2fVmn9IFoY+/kjdvsOJz/38S36fvqnbAuED9onxnfxnpDJh+25H1k6VE6YCyIN60OXnOxm6hrJPEA0tlQ/9k1i/KG9KH9bUnj8EANmLeIh1AATSgvkZQQ8d7QCbod0tcr0teKBKVARevMAEIIwWQbA8mNamSGlkhC+SbW2TBsytSCaKbxBelziYyhJrlbA3FwPqLl5NZQiBdSBnDNeElsTZlqJv470rfCeKs04mPE+qptUGNCc7FjHCtoUOvZiE7gD2QMK2RMOwru1WYRC6J1NCs+1kGP9YYNuUu3gTTSBaLpfciDcOyjN3Vrjc+VUY2TdpAY8JBmpY63rLnHOAy1A7JW0b1Kl2E9FG1ipO9UV2fF/laQMY6ns5klh/GbsJb5Zw6/fJjIBwM2ZrwGnDWgAAJM4ROOYK5ei9+kTPGjmpKryY9TP6rpkk/5mdNnkj/LmNhjRTYNxgAAAABJRU5ErkJggg==" />
<rect class="c-cls-9" x="99" y="148" width="32" height="32" rx="2" ry="2" />
<g class="c-cls-16">
<path class="c-cls-5" d="M121.75,165.89v4a2.25,2.25,0,0,1-2.25,2.25H109a2.25,2.25,0,0,1-2.25-2.25V159.4a2.25,2.25,0,0,1,2.25-2.25h4a.75.75,0,0,1,0,1.5h-4a.76.76,0,0,0-.75.75v10.5a.76.76,0,0,0,.75.75h10.5a.76.76,0,0,0,.75-.75v-4a.75.75,0,0,1,1.5,0Zm1.28-7a.75.75,0,0,1,0,1.06l-7.5,7.5a.75.75,0,0,1-.53.22h-3a.75.75,0,0,1-.75-.75v-3a.75.75,0,0,1,.22-.53l7.5-7.5a.75.75,0,0,1,1.06,0Zm-1.59.53-1.94-1.94-6.75,6.75v1.94h1.94Z" />
<rect class="c-cls-17" x="106" y="155" width="18" height="18" />
</g>
</g>
</g>
<g id="c-broken_links" data-name="broken links">
<g id="c-broken-link-3">
<path id="c-bottom_link" data-name="bottom link" class="c-cls-18" d="M196.54,274.06v-.5a2,2,0,0,0-2-2h-1a2,2,0,0,0-2,2v2.5" />
<path id="c-top_link" data-name="top link" class="c-cls-18" d="M191.54,281.06v.5a2,2,0,0,0,2,2h1a2,2,0,0,0,2-2v-2.5" />
<g id="c-broken">
<line class="c-cls-19" x1="199.16" y1="275.63" x2="201.93" y2="274.48" />
<line class="c-cls-19" x1="199.16" y1="279.48" x2="201.93" y2="280.63" />
<line class="c-cls-19" x1="188.93" y1="275.63" x2="186.16" y2="274.48" />
<line class="c-cls-19" x1="188.93" y1="279.48" x2="186.16" y2="280.63" />
</g>
</g>
<g id="c-broken-link-2">
<path id="c-bottom_link-2" data-name="bottom link" class="c-cls-18" d="M292.54,46.06v-.5a2,2,0,0,0-2-2h-1a2,2,0,0,0-2,2v2.5" />
<path id="c-top_link-2" data-name="top link" class="c-cls-18" d="M287.54,53.06v.5a2,2,0,0,0,2,2h1a2,2,0,0,0,2-2v-2.5" />
<g id="c-broken-2" data-name="broken">
<line class="c-cls-19" x1="295.16" y1="47.63" x2="297.93" y2="46.48" />
<line class="c-cls-19" x1="295.16" y1="51.48" x2="297.93" y2="52.63" />
<line class="c-cls-19" x1="284.93" y1="47.63" x2="282.16" y2="46.48" />
<line class="c-cls-19" x1="284.93" y1="51.48" x2="282.16" y2="52.63" />
</g>
</g>
<g id="c-broken-link-1">
<path id="c-bottom_link-3" data-name="bottom link" class="c-cls-18" d="M196.54,46.06v-.5a2,2,0,0,0-2-2h-1a2,2,0,0,0-2,2v2.5" />
<path id="c-top_link-3" data-name="top link" class="c-cls-18" d="M191.54,53.06v.5a2,2,0,0,0,2,2h1a2,2,0,0,0,2-2v-2.5" />
<g id="c-broken-3" data-name="broken">
<line class="c-cls-19" x1="199.16" y1="47.63" x2="201.93" y2="46.48" />
<line class="c-cls-19" x1="199.16" y1="51.48" x2="201.93" y2="52.63" />
<line class="c-cls-19" x1="188.93" y1="47.63" x2="186.16" y2="46.48" />
<line class="c-cls-19" x1="188.93" y1="51.48" x2="186.16" y2="52.63" />
</g>
</g>
</g>
<g id="c-firewalls">
<g id="c-firewall-box">
<g id="c-firewall">
<use class="c-cls-4" transform="translate(137 186)" xlink:href="#c-image-2" />
<rect class="c-cls-20" x="146" y="192" width="48" height="48" rx="2" ry="2" />
<path class="c-cls-21" d="M177,206.25H163a2.75,2.75,0,0,0-2.75,2.75v14a2.75,2.75,0,0,0,2.75,2.75h14a2.75,2.75,0,0,0,2.75-2.75V209A2.75,2.75,0,0,0,177,206.25Zm1.25,2.75v3.25h-10.5v-4.5H177A1.25,1.25,0,0,1,178.25,209Zm-16.5,9.25v-4.5h10.5v4.5Zm12-4.5h4.5v4.5h-4.5Zm-10.75-6h3.25v4.5h-4.5V209A1.25,1.25,0,0,1,163,207.75ZM161.75,223v-3.25h4.5v4.5H163A1.25,1.25,0,0,1,161.75,223ZM177,224.25h-9.25v-4.5h10.5V223A1.25,1.25,0,0,1,177,224.25Z" />
</g>
<g id="c-progress-indicator">
<rect id="c-progress-bar-bg" class="c-cls-22" x="150" y="230" width="40" height="4" />
<rect class="c-cls-5" x="150" y="230" width="12" height="4" />
</g>
</g>
<g id="c-firewall-box-2" data-name="firewall-box">
<g id="c-firewall-2" data-name="firewall">
<use class="c-cls-4" transform="translate(185 82)" xlink:href="#c-image-2" />
<rect class="c-cls-23" x="194" y="88" width="48" height="48" rx="2" ry="2" />
<path class="c-cls-21" d="M225,102.25H211a2.75,2.75,0,0,0-2.75,2.75v14a2.75,2.75,0,0,0,2.75,2.75h14a2.75,2.75,0,0,0,2.75-2.75V105A2.75,2.75,0,0,0,225,102.25Zm1.25,2.75v3.25h-10.5v-4.5H225A1.25,1.25,0,0,1,226.25,105Zm-16.5,9.25v-4.5h10.5v4.5Zm12-4.5h4.5v4.5h-4.5Zm-10.75-6h3.25v4.5h-4.5V105A1.25,1.25,0,0,1,211,103.75ZM209.75,119v-3.25h4.5v4.5H211A1.25,1.25,0,0,1,209.75,119ZM225,120.25h-9.25v-4.5h10.5V119A1.25,1.25,0,0,1,225,120.25Z" />
</g>
<g id="c-progress-indicator-2" data-name="progress-indicator">
<rect id="c-progress-bar-bg-2" data-name="progress-bar-bg" class="c-cls-22" x="198" y="126" width="40" height="4" />
<rect class="c-cls-5" x="198" y="126" width="12" height="4" />
</g>
</g>
<g id="c-firewall-box-3" data-name="firewall-box">
<g id="c-firewall-3" data-name="firewall">
<use class="c-cls-4" transform="translate(257 186)" xlink:href="#c-image-2" />
<rect class="c-cls-24" x="266" y="192" width="48" height="48" rx="2" ry="2" />
<path class="c-cls-21" d="M297,206.25H283a2.75,2.75,0,0,0-2.75,2.75v14a2.75,2.75,0,0,0,2.75,2.75h14a2.75,2.75,0,0,0,2.75-2.75V209A2.75,2.75,0,0,0,297,206.25Zm1.25,2.75v3.25h-10.5v-4.5H297A1.25,1.25,0,0,1,298.25,209Zm-16.5,9.25v-4.5h10.5v4.5Zm12-4.5h4.5v4.5h-4.5Zm-10.75-6h3.25v4.5h-4.5V209A1.25,1.25,0,0,1,283,207.75ZM281.75,223v-3.25h4.5v4.5H283A1.25,1.25,0,0,1,281.75,223ZM297,224.25h-9.25v-4.5h10.5V223A1.25,1.25,0,0,1,297,224.25Z" />
</g>
<g id="c-progress-indicator-3" data-name="progress-indicator">
<rect id="c-progress-bar-bg-3" data-name="progress-bar-bg" class="c-cls-22" x="270" y="230" width="40" height="4" />
<rect class="c-cls-5" x="270" y="230" width="12" height="4" />
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

257
website/source/assets/images/consul-connect/svgs/segmentation-solution.svg Normal file
View File

@ -0,0 +1,257 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 328">
<defs>
<style>.s-cls-1{isolation:isolate;}.s-cls-2{fill:#cfd1d9;}.s-cls-3{opacity:0.12;mix-blend-mode:multiply;}.s-cls-4{fill:url(#s-linear-gradient);}.s-cls-17,.s-cls-5,.s-cls-6,.s-cls-7{fill:#fff;}.s-cls-5,.s-cls-6{fill-rule:evenodd;}.s-cls-5{opacity:0.7;}.s-cls-11,.s-cls-12,.s-cls-13,.s-cls-14,.s-cls-18,.s-cls-19,.s-cls-20,.s-cls-21,.s-cls-22,.s-cls-24,.s-cls-25,.s-cls-26,.s-cls-8,.s-cls-9{fill:none;}.s-cls-12,.s-cls-13,.s-cls-14,.s-cls-17,.s-cls-18,.s-cls-19,.s-cls-20,.s-cls-21,.s-cls-22,.s-cls-8,.s-cls-9{stroke:#e07eac;stroke-linecap:round;}.s-cls-12,.s-cls-13,.s-cls-14,.s-cls-17,.s-cls-18,.s-cls-19,.s-cls-20,.s-cls-21,.s-cls-22,.s-cls-25,.s-cls-26,.s-cls-8,.s-cls-9{stroke-miterlimit:10;}.s-cls-9{stroke-dasharray:1 3.01;}.s-cls-10{fill:#e07eac;}.s-cls-12{stroke-dasharray:0.99 2.98;}.s-cls-13{stroke-dasharray:1 3;}.s-cls-14{stroke-dasharray:1.01 3.03;}.s-cls-15{fill:#eeb8d1;}.s-cls-16{fill:#ca2171;}.s-cls-18{stroke-dasharray:1 3;}.s-cls-19{stroke-dasharray:1.02 3.05;}.s-cls-20{stroke-dasharray:1.01 3.04;}.s-cls-21{stroke-dasharray:0.99 2.98;}.s-cls-22{stroke-dasharray:1.01 3.03;}.s-cls-23{opacity:0.88;}.s-cls-24{stroke:#fff;stroke-linejoin:round;}.s-cls-24,.s-cls-25,.s-cls-26{stroke-width:1.5px;}.s-cls-25{stroke:#eeb8d1;}.s-cls-26{stroke:#ca2171;}</style>
<linearGradient id="s-linear-gradient" x1="321.59" y1="579.81" x2="361.19" y2="619.41" gradientTransform="translate(-298.39 -435.61)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ca2171" />
<stop offset="1" stop-color="#8e134a" />
</linearGradient>
<image id="s-image" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsSAAALEgHS3X78AAAFJ0lEQVRoQ92ZbVfcNhCFn90sECAkJYSm///fNUkDpECAwrofpGtfj+SXfSHntHPOHK/Xa0uP7kiaHS+apuH/YKupH2xri8ViUfu+eaWRW+z63NDh2Pl4Hhtrz3cF3FoRA1hUHEoIWWPH1vW4bYE2ViQDuC/tuLRzh5J559fmjR0bEs9GHZutSFBAHX6TfWWf39AHcnOAF/Nn+7wG1psqNAskqCCAFXAAHIajQ7kqGm3v/D/AUzgKak0OuTkwkyAGUQN4m/04Hw/pgKSMg0gJdfwJeAB+5uMDFaA5MKMgAWKV/YjU6RPg1PyEDkjK1ECkhADugTvz+3ztMd/7zAyYQZAKxAF9gPfB39HBHDIO8kQHcQv8MPdBeMj3TsJUQQYgjkkAZ8AH4Nz8AwnmlAR7xDjII6mTd6TO3wBXDKsJEzBjobWgmxNv6VQ4By6AT9k/Ar+RAAVySH/CQ3+ia27cAX8D13av5ldcJNwLK0AqahyRQuaMBHEJ/J79kg5EoSU1xia7VFFonVKGpN/T22tqqtQU8RVK8+KUFD4XJIA/gM8kkHP6YRVDI46sT3gtEjEcoQ/t+4xvnq31QCpqHJIaUkh9IoF8zn5Bp4ZCSp2Z2hCfSZ0/olTCYd2f6VRZuCpDikQ1HOQy+wUprM7oh4VvhDUQ+cpcYQj9le3B/JEEo82yZy1IZePThucgH7Of003wOC+GIGQCibkZ9Fe1n5T7Sw/G50pUJIaVltz3pI7LtW8ckyB8pVGnhkB0raGcQ3FF8/3llgSzIsHoGcA0iBQ5o9v44jIbQ2MMIF53CG/vHV2bWg19WS/m37L72I5OXLFqqUiEmKNCNL9H+5VgvE3PFmIO17Y3pchRfsgJ3QN9lZkzJ8asBnNAl8/FhLS2P0H+YixNF4y7p+rbAkTztrWSqW0pUcuoW/PQghJED1B6HpfLXdSQxUFU++qDt1mElf7w1eZIfKA/ZJ8A0WpRsQwe223bj4roosPUfJ8A0RYTXrUayH/SaiCe3A15NZXek9XS9tEUHvog/mOvdHjm2RYFmHjwFhbbbysq9AfQ223bj4r4Qzz7VKHAU+p9AQ0NoKfwsVzUtqlca2kncTSUgT4G9wrHrhAyb1sdV9uqqnjmW7Q5pIg/SEWC+/xZD48w2wD5vR4F+k/vpSJvs4CpzREpopLNULkmwsBmMH6PR0BsUwMoZYrwgjLXiop4gUDptP5I1Solvs4PrfkOUIO4I6XsalPpuwavqsgUiP7c/CBVOmqVEnW4sfOxDbMWTgph1bius9/k87t8XfOzCOUWpGkalfYVWvEPzhVdtSMWChrmZcQ1CA2YykJXwPfsV3QghSJT/9nViOaIQJRW1woFL5VrtVRGisfwvSVB/AV8zf6NEkRzpJiLPZCsSgyve7os2Es9hN9tUw6Kin8F/gS+0Ae5p1tcCjVgWJG4csX0HboOaancpUB3TQqlrySILyR1bijVqO4jBUiYK2owhkptQdi1ZPqdpMI3EsRVvqbqyaAaUFdEpoYXpEZjh2Jo7KOILb8hQUiNuF8VVgWpqNJesu8iyL5eK2hya+/oVRg3eq0AgzBjIK/xoueZGRAwHlo1GN8DlBNpVDU39v7qjQkIYN7r6ZEqy6u/DGUGBMwEgRYGOhgBDRUopjbEF/pQ+qzrDTD5ElQ2G0QW1BGUwy3DdbfGfE2/02u/PhdAtjGILCgUHUoIWWPH6LMViLY1iMyAoOx8TZHq+bYAsp1BhiwAtrZrh4fs1UB+tf0L/55ieqW52rMAAAAASUVORK5CYII=" />
<image id="s-image-2" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsSAAALEgHS3X78AAADrElEQVRoQ+2a627bMAxGj1p3SXrZutv7P+GGos3a3BrtB0WLViTbixUgHfIBgh3bkXhE0okpO+89/4OaoQtSOefc0DU15P9xhl3f9YnRpf3aSg1qP/fBZT0SANTYKz1s2qnlzbZtOq85oAMQA3GVaXocTgdkjd9nmnfOHcB0QAzENWJwkzQ9nnpmClQulPbAe2g70/QYKUwLknjiGrgBPgGzsP0UjjVED7Vf53hZEAuxA7bAOrRNaITzZY8QvdEgAAvgNrQFMEeASp6ZIg2ndwRgA7wBr6bZ6zoh1kDRG3PgDvgMfAEeEKB5OK8wMB3G5sQ74oE3YAk8Eydcz7f5oh3kPHKFGDoD7oFH4DvwFYG6Dec0xKZCqNS4LbBCIJ4QWyCG2jbsd8a1IDbRNbTuEG98A34iMA9ImN1QL7xsWK2RMHpGwhginDY7bgwtIz3ZhE40vNQrPxCwW7q5MlUKskNAlsjYILnyB3ihG9K9HtGtzZUFMVceEa/cIx67pq5HdsiMz8LxFQKwQCZOfwLa8ZxzznvvLYgmjk38hpgvCnSPhFfNPNFE3xFzYk28ucw49EbRI6nSO5mG2wzpfE4E0euPkU6gJjphO6MLkIMo5ghEN1spUO7XvqZHQLyS/pMYvKn0eaQEZD1lB5kiHSc12jECAg5BfNJKcpk2VTZc0n4H+x+6dY6Bqqkhg4uTNgTyYXQBOTddQM5NF5Bz0wXk3HQBOTddQM5NJZAx/3iHzh+joT6LdvU9WKm82aZ/68cAj1Guz/RYr4ZAtLM93c5tdRyGnyOGlPaZjjU4YWMedbXztDKuhYLaxYe0+p7CZZUrB1kALePbqviKbhmz1jO7loPekDF0vC3RjhSoBSs9syuEAqyQMuaSWDzbhu/XeGbXcbVA94KM9UqEUqCsdxoA770364WeGEZa2tequJYx18QCXW0QLZk+IWMuERs2xHBrITrLCkapNxTiiVhQXhEr8rVLpmkR+xcytsKkXmmV5oiNVduh5sQGcbuukWgdqoZKywq/ERteEZt2ZMKr5BELotdskar4guiNUcWzEUpzM13oKYG06gPZEJe7bBLqWmKtsFLZ8CotvWmelEFCwkOcFV14tO7WxdDcGsWxQNYg65XSYmibI9lVXSOdFbuvIGlV3KoGiH62v2G55en0O4evcJiFUUe3UJ0rMJ9C3rR9pnkSb0AGBFoY6BptjT8VhMqbbdqyr3Ac+1JN7nMt5UJNdnqM7QXJ6UO+5vSR9BccytkZbx1ULgAAAABJRU5ErkJggg==" />
</defs>
<title>Service Segmentation_Solution_dev</title>
<g class="s-cls-1">
<g id="s-service-segmentation-solution-dev">
<g id="s-servers">
<path class="s-cls-2" d="M309.5,71.5v78h-205v-78h205M311,70H103v81H311V70Z" />
<path class="s-cls-2" d="M213.5,184.5v70h-109v-70h109M215,183H103v73H215V183Z" />
<path class="s-cls-2" d="M309.5,184.5v70h-61v-70h61M311,183H247v73h64V183Z" />
</g>
<g id="s-consul-server">
<image class="s-cls-3" width="74" height="74" transform="translate(6 130)" xlink:href="data:image/png;base64,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" />
<rect class="s-cls-4" x="15" y="136" width="56" height="56" rx="28" ry="28" />
<path class="s-cls-5" d="M42.53,166.74A2.77,2.77,0,1,1,45.29,164a2.77,2.77,0,0,1-2.76,2.78" />
<path class="s-cls-6" d="M47.92,165.25A1.28,1.28,0,1,1,49.2,164a1.28,1.28,0,0,1-1.28,1.28" />
<path class="s-cls-6" d="M52.59,166.45h0a1.18,1.18,0,1,1,0-.1.54.54,0,0,1,0,.1" />
<path class="s-cls-6" d="M51.69,163.16a1.28,1.28,0,1,1,1-1.54,1.41,1.41,0,0,1,0,.5,1.23,1.23,0,0,1-1,1" />
<path class="s-cls-6" d="M56.23,166.31a1.27,1.27,0,1,1-2.51-.44,1.26,1.26,0,0,1,1.48-1,1.28,1.28,0,0,1,1.06,1.36.42.42,0,0,0,0,.12" />
<path class="s-cls-6" d="M55.2,163.1a1.27,1.27,0,1,1,1-1.46,1.79,1.79,0,0,1,0,.33,1.27,1.27,0,0,1-1.06,1.13" />
<path class="s-cls-6" d="M54.3,170.73h0a1.28,1.28,0,1,1,.16-.52,1,1,0,0,1-.16.52" />
<path class="s-cls-6" d="M53.84,159a1.28,1.28,0,0,1-1.74-.48,1.28,1.28,0,1,1,2.23-1.26,1.23,1.23,0,0,1,.16.74,1.28,1.28,0,0,1-.65,1" />
<path class="s-cls-7" d="M42.58,176.84a12.84,12.84,0,1,1,7.79-23l-1.56,2a10.27,10.27,0,1,0,0,16.31l1.56,2A12.68,12.68,0,0,1,42.58,176.84Z" />
</g>
<g id="s-consul-inbound-lower">
<g id="s-consul-inbound-paths-lower">
<g id="s-dotted-line">
<line class="s-cls-8" x1="43.5" y1="203.5" x2="43.5" y2="204" />
<path class="s-cls-9" d="M43.5,207V253.5a20,20,0,0,0,20,20h100a20,20,0,0,0,20-20v-6" />
<line class="s-cls-8" x1="183.5" y1="246" x2="183.5" y2="245.5" />
</g>
<g id="s-arrow-up">
<polygon class="s-cls-10" points="43.5 195.44 45.43 198.22 47.35 201 43.5 201 39.65 201 41.57 198.22 43.5 195.44" />
</g>
</g>
<g id="s-dynamic-update-inbound-lower">
<use class="s-cls-3" transform="translate(19 215)" xlink:href="#s-image" />
<rect class="s-cls-10" x="28" y="221" width="32" height="32" rx="16" ry="16" />
<rect class="s-cls-11" x="36" y="229" width="16" height="16" transform="translate(281 193) rotate(90)" />
<path class="s-cls-7" d="M43.33,229.67v4a.67.67,0,0,1-1.33,0v-2.32l-1.77,1.88a5.48,5.48,0,0,0-1.26,2A5.34,5.34,0,0,0,42.22,242a.67.67,0,0,1-.44,1.26,6.67,6.67,0,0,1-4.06-8.51,6.8,6.8,0,0,1,1.55-2.48l1.86-2H38.67a.66.66,0,0,1-.67-.66.67.67,0,0,1,.67-.67h4l.09,0a.8.8,0,0,1,.15,0l.14.08.07.05h0a.8.8,0,0,1,.15.21h0A.71.71,0,0,1,43.33,229.67ZM45.23,245l.1,0h4a.67.67,0,0,0,.67-.67.66.66,0,0,0-.67-.66H46.87l1.86-2a6.69,6.69,0,0,0,0-9.42,6.76,6.76,0,0,0-2.49-1.57.67.67,0,1,0-.44,1.26,5.34,5.34,0,0,1,2,8.8L46,242.65v-2.32a.67.67,0,0,0-1.33,0v4h0a.76.76,0,0,0,0,.16s0,.07,0,.1,0,.05.05.07a.71.71,0,0,0,.1.14h0l.07.05.14.08Z" />
</g>
</g>
<g id="s-consul-outbound-lower">
<g id="s-consul-outbound-7">
<polygon class="s-cls-10" points="279.5 244.44 277.57 247.22 275.65 250 279.5 250 283.35 250 281.43 247.22 279.5 244.44" />
<g id="s-dotted-line-2" data-name="dotted-line">
<line class="s-cls-8" x1="168.5" y1="273.5" x2="169" y2="273.5" />
<path class="s-cls-12" d="M172,273.5H259.5c10.71,0,19.46-8,20-18.54" />
<line class="s-cls-8" x1="279.5" y1="253.47" x2="279.5" y2="252.97" />
</g>
</g>
<g id="s-consul-outbound-6">
<polygon class="s-cls-10" points="183.5 244.44 181.57 247.22 179.65 250 183.5 250 187.35 250 185.43 247.22 183.5 244.44" />
<g id="s-dotted-line-3" data-name="dotted-line">
<line class="s-cls-8" x1="119.5" y1="273.5" x2="120" y2="273.5" />
<path class="s-cls-13" d="M123,273.5h40.5c10.71,0,19.45-8,20-18.53" />
<line class="s-cls-8" x1="183.5" y1="253.47" x2="183.5" y2="252.97" />
</g>
</g>
<g id="s-consul-outbound-5">
<g id="s-arrow-up-2" data-name="arrow-up">
<polygon class="s-cls-10" points="134.5 244.44 132.57 247.22 130.65 250 134.5 250 138.35 250 136.43 247.22 134.5 244.44" />
</g>
<g id="s-dotted-line-4" data-name="dotted-line">
<line class="s-cls-8" x1="43.5" y1="194.5" x2="43.5" y2="195" />
<path class="s-cls-14" d="M43.5,198V253.5a20,20,0,0,0,20,20h51c10.71,0,19.45-8,20-18.52" />
<line class="s-cls-8" x1="134.5" y1="253.47" x2="134.5" y2="252.97" />
</g>
</g>
<g id="s-tls-cert-lower">
<rect class="s-cls-7" x="20.75" y="212.75" width="46.5" height="20.5" />
<path class="s-cls-15" d="M66.5,213.5v19h-45v-19h45M68,212H20v22H68V212Z" />
<rect class="s-cls-16" x="26" y="218" width="36" height="2" />
<rect class="s-cls-16" x="26" y="222" width="15" height="2" />
</g>
<circle id="s-consul-server-connection-lower" class="s-cls-17" cx="43.5" cy="192" r="3.5" />
<g id="s-dynamic-update-outbound-ower">
<use class="s-cls-3" transform="translate(19 224)" xlink:href="#s-image" />
<rect class="s-cls-10" x="28" y="230" width="32" height="32" rx="16" ry="16" />
<rect class="s-cls-11" x="36" y="238" width="16" height="16" transform="translate(290 202) rotate(90)" />
<path class="s-cls-7" d="M43.33,238.67v4a.67.67,0,0,1-1.33,0v-2.32l-1.77,1.88a5.48,5.48,0,0,0-1.26,2A5.34,5.34,0,0,0,42.22,251a.67.67,0,0,1-.44,1.26,6.67,6.67,0,0,1-4.06-8.51,6.8,6.8,0,0,1,1.55-2.48l1.86-2H38.67a.66.66,0,0,1-.67-.66.67.67,0,0,1,.67-.67h4l.09,0a.8.8,0,0,1,.15,0l.14.08.07.05h0a.8.8,0,0,1,.15.21h0A.71.71,0,0,1,43.33,238.67ZM45.23,254l.1,0h4a.67.67,0,0,0,.67-.67.66.66,0,0,0-.67-.66H46.87l1.86-2a6.69,6.69,0,0,0,0-9.42,6.76,6.76,0,0,0-2.49-1.57.67.67,0,1,0-.44,1.26,5.34,5.34,0,0,1,2,8.8L46,251.65v-2.32a.67.67,0,0,0-1.33,0v4h0a.76.76,0,0,0,0,.16s0,.07,0,.1,0,.05.05.07a.71.71,0,0,0,.1.14h0l.07.05.14.08Z" />
</g>
</g>
<g id="s-consul-inbound-upper">
<g id="s-consul-inbound-paths-upper">
<polygon class="s-cls-10" points="43.5 132.56 45.43 129.78 47.35 127 43.5 127 39.65 127 41.57 129.78 43.5 132.56" />
<g id="s-dotted-line-5" data-name="dotted-line">
<line class="s-cls-8" x1="43.5" y1="124.5" x2="43.5" y2="124" />
<path class="s-cls-18" d="M43.5,121V74.5a20,20,0,0,1,20-20H163a20,20,0,0,1,20,20v6" />
<line class="s-cls-8" x1="183" y1="82" x2="183" y2="82.5" />
</g>
<line class="s-cls-8" x1="172.5" y1="54.5" x2="173" y2="54.5" />
<path class="s-cls-19" d="M176.05,54.5H259a20,20,0,0,1,20,20v6" />
<line class="s-cls-8" x1="279" y1="82" x2="279" y2="82.5" />
</g>
<g id="s-dynamic-update-inbound-upper">
<use class="s-cls-3" transform="translate(19 69)" xlink:href="#s-image" />
<rect class="s-cls-10" x="28" y="75" width="32" height="32" rx="16" ry="16" />
<rect class="s-cls-11" x="36" y="83" width="16" height="16" transform="translate(135 47) rotate(90)" />
<path class="s-cls-7" d="M43.33,83.67v4a.67.67,0,0,1-1.33,0V85.35l-1.77,1.88a5.48,5.48,0,0,0-1.26,2A5.34,5.34,0,0,0,42.22,96a.67.67,0,1,1-.44,1.26,6.67,6.67,0,0,1-4.06-8.51,6.8,6.8,0,0,1,1.55-2.48l1.86-2H38.67a.66.66,0,0,1-.67-.66.67.67,0,0,1,.67-.67h4l.09,0,.15,0,.14.08.07.05h0a.8.8,0,0,1,.15.21h0A.71.71,0,0,1,43.33,83.67ZM45.23,99l.1,0h4a.67.67,0,0,0,.67-.67.66.66,0,0,0-.67-.66H46.87l1.86-2a6.69,6.69,0,0,0,0-9.42,6.76,6.76,0,0,0-2.49-1.57A.67.67,0,0,0,45.78,86a5.34,5.34,0,0,1,2,8.8L46,96.65V94.33a.67.67,0,0,0-1.33,0v4h0a.76.76,0,0,0,0,.16s0,.07,0,.1,0,.05.05.07a.71.71,0,0,0,.1.14h0l.07.05.14.08Z" />
</g>
</g>
<g id="s-consul-outbound-upper">
<g id="s-consul-outbound-4">
<polygon class="s-cls-10" points="279 83.56 280.93 80.78 282.85 78 279 78 275.15 78 277.07 80.78 279 83.56" />
<g id="s-dotted-line-6" data-name="dotted-line">
<path class="s-cls-8" d="M279,74.86c0-.16,0-.33,0-.5" />
<path class="s-cls-20" d="M278.69,71.34A20.26,20.26,0,0,0,259,54.5H219.77" />
<line class="s-cls-8" x1="218.25" y1="54.5" x2="217.75" y2="54.5" />
</g>
</g>
<g id="s-consul-outbound-3">
<polygon class="s-cls-10" points="232 83.56 233.93 80.78 235.85 78 232 78 228.15 78 230.07 80.78 232 83.56" />
<g id="s-dotted-line-7" data-name="dotted-line">
<path class="s-cls-8" d="M231.5,74.86c0-.16,0-.33,0-.5" />
<path class="s-cls-21" d="M231.2,71.4a20.25,20.25,0,0,0-19.7-16.9H63.5a20,20,0,0,0-20,20v57" />
<line class="s-cls-8" x1="43.5" y1="133" x2="43.5" y2="133.5" />
</g>
</g>
<g id="s-soncul-outbound-2">
<polygon class="s-cls-10" points="183 83.56 184.93 80.78 186.85 78 183 78 179.15 78 181.07 80.78 183 83.56" />
<g id="s-dotted-line-8" data-name="dotted-line">
<path class="s-cls-8" d="M183,74.86c0-.16,0-.33,0-.5" />
<path class="s-cls-20" d="M182.69,71.34A20.26,20.26,0,0,0,163,54.5H123.77" />
<line class="s-cls-8" x1="122.25" y1="54.5" x2="121.75" y2="54.5" />
</g>
</g>
<g id="s-consul-outbound-1">
<polygon class="s-cls-10" points="136 83.56 137.93 80.78 139.85 78 136 78 132.15 78 134.07 80.78 136 83.56" />
<g id="s-dotted-line-9" data-name="dotted-line">
<path class="s-cls-8" d="M135.5,74.5c0-.17,0-.33,0-.5" />
<path class="s-cls-22" d="M135.19,71A20,20,0,0,0,115.5,54.5h-52a19.69,19.69,0,0,0-20,19.64v57" />
<line class="s-cls-8" x1="43.5" y1="132.64" x2="43.5" y2="133.14" />
</g>
</g>
<g id="s-tls-cert-upper">
<rect class="s-cls-7" x="20.75" y="65.75" width="46.5" height="20.5" />
<path class="s-cls-15" d="M66.5,66.5v19h-45v-19h45M68,65H20V87H68V65Z" />
<rect class="s-cls-16" x="26" y="71" width="36" height="2" />
<rect class="s-cls-16" x="26" y="75" width="15" height="2" />
</g>
<circle id="s-consul-server-connection-upper" class="s-cls-17" cx="43.5" cy="136" r="3.5" />
<g id="s-dynamic-update-outbound-upper">
<use class="s-cls-3" transform="translate(19 77)" xlink:href="#s-image" />
<rect class="s-cls-10" x="28" y="83" width="32" height="32" rx="16" ry="16" />
<rect class="s-cls-11" x="36" y="91" width="16" height="16" transform="translate(143 55) rotate(90)" />
<path class="s-cls-7" d="M43.33,91.67v4a.67.67,0,0,1-1.33,0V93.35l-1.77,1.88a5.48,5.48,0,0,0-1.26,2A5.34,5.34,0,0,0,42.22,104a.67.67,0,1,1-.44,1.26,6.67,6.67,0,0,1-4.06-8.51,6.8,6.8,0,0,1,1.55-2.48l1.86-2H38.67a.66.66,0,0,1-.67-.66.67.67,0,0,1,.67-.67h4l.09,0,.15,0,.14.08.07.05h0a.8.8,0,0,1,.15.21h0A.71.71,0,0,1,43.33,91.67ZM45.23,107l.1,0h4a.67.67,0,0,0,.67-.67.66.66,0,0,0-.67-.66H46.87l1.86-2a6.69,6.69,0,0,0,0-9.42,6.76,6.76,0,0,0-2.49-1.57A.67.67,0,0,0,45.78,94a5.34,5.34,0,0,1,2,8.8L46,104.65v-2.32a.67.67,0,0,0-1.33,0v4h0a.76.76,0,0,0,0,.16s0,.07,0,.1,0,.05.05.07a.71.71,0,0,0,.1.14h0l.07.05.14.08Z" />
</g>
</g>
<g id="s-services">
<g id="s-service-1">
<use class="s-cls-3" transform="translate(110 80)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="119.75" y="86.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-15" d="M149,87.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H121a.51.51,0,0,1-.5-.5V88a.51.51,0,0,1,.5-.5h28m0-1.5H121a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V88a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator">
<rect class="s-cls-16" x="125" y="106" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="130" y="116" width="10" height="6" />
<path class="s-cls-24" d="M138,116h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
<g id="s-service-2">
<use class="s-cls-3" transform="translate(158 80)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="167.75" y="86.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-16" d="M197,87.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H169a.51.51,0,0,1-.5-.5V88a.51.51,0,0,1,.5-.5h28m0-1.5H169a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V88a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator-2" data-name="secure-indicator">
<rect class="s-cls-16" x="173" y="106" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="178" y="116" width="10" height="6" />
<path class="s-cls-24" d="M186,116h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
<g id="s-service-3">
<use class="s-cls-3" transform="translate(206 80)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="215.75" y="86.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-15" d="M245,87.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H217a.51.51,0,0,1-.5-.5V88a.51.51,0,0,1,.5-.5h28m0-1.5H217a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V88a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator-3" data-name="secure-indicator">
<rect class="s-cls-16" x="221" y="106" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="226" y="116" width="10" height="6" />
<path class="s-cls-24" d="M234,116h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
<g id="s-service-4">
<use class="s-cls-3" transform="translate(254 80)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="263.75" y="86.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-15" d="M293,87.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H265a.51.51,0,0,1-.5-.5V88a.51.51,0,0,1,.5-.5h28m0-1.5H265a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V88a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator-4" data-name="secure-indicator">
<rect class="s-cls-16" x="269" y="106" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="274" y="116" width="10" height="6" />
<path class="s-cls-24" d="M282,116h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
<g id="s-service-5">
<use class="s-cls-3" transform="translate(110 202)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="119.75" y="208.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-15" d="M149,209.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H121a.51.51,0,0,1-.5-.5V210a.51.51,0,0,1,.5-.5h28m0-1.5H121a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V210a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator-5" data-name="secure-indicator">
<rect class="s-cls-16" x="125" y="199" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="130" y="209" width="10" height="6" />
<path class="s-cls-24" d="M138,209h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
<g id="s-service-6">
<use class="s-cls-3" transform="translate(158 202)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="167.75" y="208.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-15" d="M197,209.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H169a.51.51,0,0,1-.5-.5V210a.51.51,0,0,1,.5-.5h28m0-1.5H169a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V210a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator-6" data-name="secure-indicator">
<rect class="s-cls-16" x="173" y="199" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="178" y="209" width="10" height="6" />
<path class="s-cls-24" d="M186,209h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
<g id="s-service-7">
<use class="s-cls-3" transform="translate(254 202)" xlink:href="#s-image-2" />
<rect class="s-cls-7" x="263.75" y="208.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
<path class="s-cls-15" d="M293,209.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H265a.51.51,0,0,1-.5-.5V210a.51.51,0,0,1,.5-.5h28m0-1.5H265a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V210a2,2,0,0,0-2-2Z" />
<g id="s-secure-indicator-7" data-name="secure-indicator">
<rect class="s-cls-16" x="269" y="199" width="20" height="20" rx="2.01" ry="2.01" />
<g class="s-cls-23">
<rect class="s-cls-24" x="274" y="209" width="10" height="6" />
<path class="s-cls-24" d="M282,209h-6v-3a3,3,0,0,1,3-3h0a3,3,0,0,1,3,3Z" />
</g>
</g>
</g>
</g>
<g id="s-connection-paths">
<line id="s-connection-path-10" class="s-cls-25" x1="199" y1="224" x2="263" y2="224" />
<line id="s-connection-path-9" class="s-cls-25" x1="167" y1="224" x2="151" y2="224" />
<line id="s-connection-path-8" class="s-cls-25" x1="283" y1="126" x2="283" y2="199" />
<polyline id="s-connection-path-7" class="s-cls-25" points="231 126 231 130 279 130 279 199" />
<polyline id="s-connection-path-6" class="s-cls-26" points="187 126 187 134 275 134 275 199" />
<line id="s-connection-path-5" class="s-cls-26" x1="183" y1="126" x2="183" y2="199" />
<polyline id="s-connection-path-4" class="s-cls-26" points="179 126 179 130 137 130 137 199" />
<line id="s-connection-path-3" class="s-cls-25" x1="133" y1="126" x2="133" y2="199" />
<line id="s-connection-path-2" class="s-cls-25" x1="263" y1="101" x2="247" y2="101" />
<line id="s-connection-path-1" class="s-cls-26" x1="167" y1="101" x2="151" y2="101" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

511
website/source/assets/javascripts/animations.js
View File

@ -441,3 +441,514 @@ if ($discoveryChallenge) {
$discoveryChallenge.classList.add('active')
discoveryChallengeTimeline.play()
}
//
// discovery page
//
var $segmentationChallenge = qs('#segmentation-challenge-animation')
var $segmentationSolution = qs('#segmentation-solution-animation')
if ($segmentationChallenge) {
// challenge animation
var segmentationChallengeTimeline = new TimelineLite({
onComplete: function() {
$segmentationChallenge.classList.remove('active')
$segmentationSolution.classList.add('active')
segmentationSolutionTimeline.restart()
}
})
var computerUpdatePath = qs('#c-firewall-updates #c-update_path')
var computerUpdateBox = qs('#c-firewall-updates #c-edit')
var computer = qs('#c-computer')
var progressBars = qsa(
'#c-progress-indicator, #c-progress-indicator-2, #c-progress-indicator-3'
)
var progressBarBars = qsa(
'#c-progress-indicator > rect:last-child, #c-progress-indicator-2 > rect:last-child, #c-progress-indicator-3 > rect:last-child'
)
var brokenLinks = qsa('#c-broken-link-1, #c-broken-link-2, #c-broken-link-3')
var box2 = qs('#c-box-2')
var box2Border = qs('#c-box-2 > path')
var box4 = qs('#c-box-4')
var box4Border = qs('#c-box-4 > path')
var box6 = qs('#c-box-6')
var box6Border = qs('#c-box-6 > path')
var box7 = qs('#c-box-7')
var box7Border = qs('#c-box-7 > path')
var path1a = qs('#c-path-1 > *:nth-child(2)')
var path1b = qs('#c-path-1 > *:nth-child(3)')
var path1c = qs('#c-path-1 > *:nth-child(1)')
var path2a = qs('#c-path-2 > *:nth-child(1)')
var path2b = qs('#c-path-2 > *:nth-child(3)')
var path2c = qs('#c-path-2 > *:nth-child(2)')
var path3a = qs('#c-path-3 > *:nth-child(2)')
var path3b = qs('#c-path-3 > *:nth-child(3)')
var path3c = qs('#c-path-3 > *:nth-child(1)')
segmentationChallengeTimeline
.to(box2, 1, {})
// box 4 and 6 appear
.to(box4Border, 0.4, { css: { fill: '#000' } }, 'box4-in')
.fromTo(
box4,
0.3,
{ scale: 0, rotation: 200, opacity: 0, svgOrigin: '291px 41px' },
{ scale: 1, rotation: 360, opacity: 1 },
'box4-in'
)
.to(box6Border, 0.4, { css: { fill: '#000' } }, '-=0.2')
.fromTo(
box6,
0.3,
{ scale: 0, rotation: 200, opacity: 0, svgOrigin: '195px 289px' },
{ scale: 1, rotation: 360, opacity: 1 },
'-=0.4'
)
// wait for a moment
.to(box2, 1, {})
// computer appears and sends updates to firewalls
.to(computer, 0.5, { opacity: 1 })
.to(computerUpdateBox, 0.3, { opacity: 1 }, '-=0.2')
.to(computerUpdatePath, 0.3, { opacity: 1 }, '-=0.2')
// firewall progress bars
.to(progressBarBars, 0.01, { width: 0 })
.to(progressBars, 0.2, { opacity: 1 })
.staggerTo(progressBarBars, 0.6, { width: 40 }, 0.2)
// connection 1 made
.to(path1a, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
.to(path1b, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
.to(path1c, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
// progress bars and firewall update lines fade out
.to(progressBars, 0.7, { opacity: 0 }, 'resetComputer1')
.to(computerUpdateBox, 0.7, { opacity: 0 }, 'resetComputer1')
.to(computerUpdatePath, 0.7, { opacity: 0 }, 'resetComputer1')
// connection turns blue
.to(
[path1a, path1b, path1c],
0.5,
{ css: { stroke: '#3969ED' } },
'resetComputer1'
)
.to(
[box4Border, box6Border],
0.5,
{ css: { fill: '#3969ED' } },
'resetComputer1'
)
// second connection draws
.to(
path2a,
0.3,
{ css: { strokeDashoffset: 0 }, ease: Linear.easeNone },
'-=0.3'
)
.to(path2b, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
.to(path2c, 0.2, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
// second connection turns blue
.to([path2a, path2b, path2c], 0.5, { css: { stroke: '#3969ED' } }, '-=0.1')
.to(box7Border, 0.5, { css: { fill: '#3969ED' } }, '-=0.3')
// wait a moment
.to(box2, 2, {})
// blue elements fade back to gray
.to(
[path1a, path1b, path1c, path2a, path2b, path2c],
0.5,
{
css: { stroke: '#b5b8c4' }
},
'colorReset1'
)
.to(
[box7Border, box4Border, box6Border],
0.5,
{ css: { fill: '#b5b8c4' } },
'colorReset1'
)
// box 2 appears
.to(box2Border, 0.4, { css: { fill: '#000' } }, 'colorReset1')
.fromTo(
box2,
0.3,
{ scale: 0, rotation: 200, opacity: 0, svgOrigin: '195px 42px' },
{ scale: 1, rotation: 360, opacity: 1 },
'-=0.4'
)
// wait a moment
.to(box2, 1, {})
// computer updates firewalls
.to(computerUpdateBox, 0.3, { opacity: 1 }, '-=0.2')
.to(computerUpdatePath, 0.3, { opacity: 1 }, '-=0.2')
// firewall progress bars
.to(progressBarBars, 0.01, { width: 0 })
.to(progressBars, 0.2, { opacity: 1 })
.staggerTo(progressBarBars, 0.6, { width: 40 }, 0.2)
// third connection made
.to(path3a, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
.to(path3b, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
.to(path3c, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone })
// progress bars & computer arrows fade out
.to(progressBars, 0.5, { opacity: 0 }, 'computerReset2')
.to(computerUpdateBox, 0.5, { opacity: 0 }, 'computerReset2')
.to(computerUpdatePath, 0.5, { opacity: 0 }, 'computerReset2')
// third connection turns blue
.to(
[path3a, path3b, path3c],
0.5,
{ css: { stroke: '#3969ED' } },
'computerReset2'
)
.to(
[box2Border, box7Border],
0.5,
{ css: { fill: '#3969ED' } },
'computerReset2'
)
// wait a bit
.to(box2, 2, {})
// third connection turns back to gray
.to(
[path3a, path3b, path3c],
0.5,
{ css: { stroke: '#b5b8c4' } },
'colorReset2'
)
.to(
[box2Border, box7Border],
0.5,
{ css: { fill: '#b5b8c4' } },
'colorReset2'
)
// boxes 2, 4, and 6 disappear
.to(
[box2, box4, box6],
0.6,
{ scale: 0, rotation: 200, opacity: 0 },
'-=0.4'
)
// lines turn red and broken links appear
.to(
[path1a, path1b, path1c, path2a, path2b, path2c, path3a, path3b, path3c],
0.3,
{ css: { stroke: '#ED4168' } },
'-=0.2'
)
.to(brokenLinks, 0.3, { opacity: 1 }, '-=0.3')
// wait a moment
.to(box2, 1, {})
// code sent to firewalls
.to(computerUpdateBox, 0.3, { opacity: 1 })
.to(computerUpdatePath, 0.3, { opacity: 1 })
// firewall progress bars
.to(progressBarBars, 0.01, { width: 0 })
.to(progressBars, 0.2, { opacity: 1 })
.staggerTo(progressBarBars, 0.6, { width: 40 }, 0.2)
.to(box2, 0.5, {})
// faulty connections removed
.to(
[
path1a,
path1b,
path1c,
path2a,
path2b,
path2c,
path3a,
path3b,
path3c
].concat(brokenLinks),
0.7,
{ opacity: 0 }
)
// progress bars and connection arrows fade out
.to(progressBars, 0.5, { opacity: 0 }, 'computerReset3')
.to(computerUpdateBox, 0.5, { opacity: 0 }, 'computerReset3')
.to(computerUpdatePath, 0.5, { opacity: 0 }, 'computerReset3')
.to(computer, 0.5, { opacity: 0 }, 'computerReset3')
// wait a moment before the loop
.to(box2, 1, {})
.pause()
// solution animation
var segmentationSolutionTimeline = new TimelineLite({
onComplete: function() {
$segmentationSolution.classList.remove('active')
$segmentationChallenge.classList.add('active')
segmentationChallengeTimeline.restart()
}
})
// service boxes
var box1 = qs('#s-service-2')
var box1Border = qs('#s-service-2 > path')
var box1Lock = qs('#s-service-2 #s-secure-indicator-2')
var box2 = qs('#s-service-4')
var box2Border = qs('#s-service-4 > path')
var box2Lock = qs('#s-service-4 #s-secure-indicator-4')
var box3 = qs('#s-service-6')
var box3Border = qs('#s-service-6 > path')
var box3Lock = qs('#s-service-6 #s-secure-indicator-6')
// connection paths
var path1a = qs('#s-connection-path-2')
var path1b = qs('#s-connection-path-8')
var path2a = qs('#s-connection-path-9')
var path2b = qs('#s-connection-path-10')
var path3a = qs('#s-connection-path-1')
var path3b = qs('#s-connection-path-4')
var path3c = qs('#s-connection-path-5')
var path3d = qs('#s-connection-path-6')
// inbound consul updates
var inboundPathLower = qs('#s-consul-inbound-paths-lower')
var inboundUpdateLower = qs('#s-dynamic-update-inbound-lower')
var inboundUpdateLowerSpinner = qs('#s-dynamic-update-inbound-lower > path')
var inboundPathUpper = qs('#s-consul-inbound-paths-upper')
var inboundUpdateUpper = qs('#s-dynamic-update-inbound-upper')
var inboundUpdateUpperSpinner = qs('#s-dynamic-update-inbound-upper > path')
// outbound consul updates
var outboundPathsLower = qsa(
'#s-consul-server-connection-lower, #s-consul-outbound-5, #s-consul-outbound-6, #s-consul-outbound-7'
)
var outboundUpdateLower = qsa(
'#s-dynamic-update-outbound-ower, #s-tls-cert-lower'
)
var outboundUpdateLowerSpinner = qs('#s-dynamic-update-outbound-ower > path')
var outboundPathsUpper1 = qsa(
'#s-consul-server-connection-upper, #s-consul-outbound-3, #s-consul-outbound-4'
)
var outboundPathsUpper2 = qsa(
'#s-consul-server-connection-upper, #s-consul-outbound-1, #s-soncul-outbound-2'
)
var outboundUpdateUpper = qsa(
'#s-tls-cert-upper, #s-dynamic-update-outbound-upper'
)
var outboundUpdateUpperSpinner = qs('#s-dynamic-update-outbound-upper > path')
segmentationSolutionTimeline
.to(box2, 1, {})
// boxes 2 and 3 appear
.fromTo(
box2,
0.3,
{ scale: 0, rotation: 200, opacity: 0, svgOrigin: '281px 104px' },
{ scale: 1, rotation: 360, opacity: 1 }
)
.fromTo(
box3,
0.3,
{ scale: 0, rotation: 200, opacity: 0, svgOrigin: '185px 226px' },
{ scale: 1, rotation: 360, opacity: 1 },
'-=0.1'
)
// wait a moment
.to(box1, 0.5, {})
// consul speaks to each box that needs a connection made
.to(outboundPathsUpper1, 0.5, { opacity: 1 })
.to(outboundPathsLower, 0.5, { opacity: 1 }, '-=0.3')
.to(outboundUpdateUpper, 0.3, { opacity: 1 }, '-=0.3')
.to(outboundUpdateLower, 0.3, { opacity: 1 }, '-=0.1')
.to(
outboundUpdateUpperSpinner,
0.7,
{
rotation: 360,
svgOrigin: '44px 99px'
},
'-=0.5'
)
.to(
outboundUpdateLowerSpinner,
0.7,
{
rotation: 360,
svgOrigin: '44px 246px'
},
'-=0.3'
)
// pink borders, locks, connections drawn, consul talk fades
.to(box2Lock, 0.3, { opacity: 1 }, 'connections-1')
.to(box2Border, 0.3, { fill: '#CA2270' }, 'connections-1')
.to(box3Lock, 0.3, { opacity: 1 }, 'connections-1')
.to(box3Border, 0.3, { fill: '#CA2270' }, 'connections-1')
.to(outboundPathsUpper1, 0.7, { opacity: 0 }, 'connections-1')
.to(outboundPathsLower, 0.7, { opacity: 0 }, 'connections-1')
.to(outboundUpdateUpper, 0.7, { opacity: 0 }, 'connections-1')
.to(outboundUpdateLower, 0.7, { opacity: 0 }, 'connections-1')
.to(
path1a,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-1'
)
.to(
path1b,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-1'
)
.to(
path2a,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-1'
)
.to(
path2b,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-1'
)
// wait a moment
.to(box1, 0.5, {})
// box 1 appears
.fromTo(
box1,
0.3,
{ scale: 0, rotation: 200, opacity: 0, svgOrigin: '185px 104px' },
{ scale: 1, rotation: 360, opacity: 1 },
'-=0.1'
)
// wait a moment, previous paths fade ('#EEB9D1')
.to(box1, 0.5, {}, 'stage-1-complete')
.to(box2Border, 0.5, { fill: '#EEB9D1' }, 'stage-1-complete')
.to(box3Border, 0.5, { fill: '#EEB9D1' }, 'stage-1-complete')
.to(path1a, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete')
.to(path1b, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete')
.to(path2a, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete')
.to(path2b, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete')
// consul speaks to each box that needs a connection made
.to(outboundPathsUpper2, 0.5, { opacity: 1 })
.to(outboundPathsLower, 0.5, { opacity: 1 }, '-=0.3')
.to(outboundUpdateUpper, 0.3, { opacity: 1 }, '-=0.3')
.to(outboundUpdateLower, 0.3, { opacity: 1 }, '-=0.1')
.to(
outboundUpdateUpperSpinner,
0.7,
{
rotation: 720,
svgOrigin: '44px 99px'
},
'-=0.5'
)
.to(
outboundUpdateLowerSpinner,
0.7,
{
rotation: 720,
svgOrigin: '44px 246px'
},
'-=0.3'
)
// connections drawn
.to(box1Lock, 0.3, { opacity: 1 }, 'connections-2')
.to(box1Border, 0.3, { fill: '#CA2270' }, 'connections-2')
.to(
path3a,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-2'
)
.to(
path3b,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-2'
)
.to(
path3c,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-2'
)
.to(
path3d,
0.5,
{ css: { strokeDashoffset: 0, stroke: '#CA2270' } },
'connections-2'
)
.to(box1, 0.7, {}, 'stage-2-complete')
.to(outboundPathsUpper2, 0.7, { opacity: 0 }, 'stage-2-complete')
.to(outboundPathsLower, 0.7, { opacity: 0 }, 'stage-2-complete')
.to(outboundUpdateUpper, 0.7, { opacity: 0 }, 'stage-2-complete')
.to(outboundUpdateLower, 0.7, { opacity: 0 }, 'stage-2-complete')
.to(box1Border, 0.5, { fill: '#EEB9D1' }, 'path-fade-2')
.to(path3a, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2')
.to(path3b, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2')
.to(path3c, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2')
.to(path3d, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2')
// wait a moment
.to(box1, 1, {})
// all new boxes and connections fade
.to(
[
box1,
box2,
box3,
path1a,
path1b,
path2a,
path2b,
path3a,
path3b,
path3c,
path3d
],
0.5,
{ opacity: 0.3 }
)
// faded boxes speak to consul
.to(inboundPathLower, 0.5, { opacity: 1 }, 'inbound')
.to(inboundPathUpper, 0.5, { opacity: 1 }, 'inbound')
.to(inboundUpdateLower, 0.5, { opacity: 1 }, 'inbound')
.to(inboundUpdateUpper, 0.5, { opacity: 1 }, 'inbound')
.to(
inboundUpdateLowerSpinner,
0.7,
{
rotation: 360,
svgOrigin: '44px 237px'
},
'-=0.3'
)
.to(
inboundUpdateUpperSpinner,
0.7,
{
rotation: 360,
svgOrigin: '44px 91px'
},
'-=0.3'
)
// consul removes faded boxes and connections
.to(
[
box1,
box2,
box3,
path1a,
path1b,
path2a,
path2b,
path3a,
path3b,
path3c,
path3d,
inboundPathLower,
inboundPathUpper,
inboundUpdateLower,
inboundUpdateUpper
],
0.5,
{ opacity: 0.0 }
)
// wait a moment before the loop
.to(box1, 1, {})
.pause()
// kick it off
$segmentationChallenge.classList.add('active')
segmentationChallengeTimeline.play()
}

70
website/source/assets/javascripts/consul-connect/application.js
View File

@ -1,37 +1,39 @@
var dots = document.querySelectorAll('.g-carousel .pagination li');
var carousel = new Siema({
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: () => {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active');
var dots = document.querySelectorAll('.g-carousel .pagination li')
if (document.querySelector('.siema')) {
var carousel = new Siema({
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: () => {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active')
}
dots[carousel.currentSlide].classList.add('active')
}
dots[carousel.currentSlide].classList.add('active');
})
document
.querySelector('.g-carousel .prev')
.addEventListener('click', function() {
carousel.prev()
})
document
.querySelector('.g-carousel .next')
.addEventListener('click', function() {
carousel.next()
})
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
carousel.goTo(i)
})
}
});
document
.querySelector('.g-carousel .prev')
.addEventListener('click', function() {
carousel.prev();
});
document
.querySelector('.g-carousel .next')
.addEventListener('click', function() {
carousel.next();
});
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
carousel.goTo(i);
});
}

160
website/source/assets/stylesheets/consul-connect/_animations.scss
View File

@ -193,3 +193,163 @@
opacity: 0;
}
}
#segmentation-challenge-animation {
& #c-firewall-updates #c-update_path {
opacity: 0;
}
& #c-firewall-updates #c-edit {
opacity: 0;
}
& #c-computer {
opacity: 0;
}
& #c-progress-indicator,
& #c-progress-indicator-2,
& #c-progress-indicator-3 {
opacity: 0;
}
& #c-broken-link-1,
& #c-broken-link-2,
& #c-broken-link-3 {
opacity: 0;
}
& #c-box-2,
& #c-box-4,
& #c-box-6 {
opacity: 0;
}
& #c-path-1 > *:nth-child(1) {
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
& #c-path-1 > *:nth-child(2) {
stroke-dasharray: 94;
stroke-dashoffset: 94;
}
& #c-path-1 > *:nth-child(3) {
stroke-dasharray: 102;
stroke-dashoffset: 102;
}
& #c-path-2 > *:nth-child(1) {
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
& #c-path-2 > *:nth-child(2) {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
& #c-path-2 > *:nth-child(3) {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
& #c-path-2 > *:nth-child(3) {
stroke-dasharray: 148;
stroke-dashoffset: 148;
}
& #c-path-3 > *:nth-child(1) {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
& #c-path-3 > *:nth-child(2) {
stroke-dasharray: 54;
stroke-dashoffset: 54;
}
& #c-path-3 > *:nth-child(3) {
stroke-dasharray: 126;
stroke-dashoffset: 126;
}
}
#segmentation-solution-animation {
#s-service-2 {
opacity: 0;
}
#s-service-4 {
opacity: 0;
}
#s-service-6 {
opacity: 0;
}
#s-service-2 > path {
fill: #000;
}
#s-service-4 > path {
fill: #000;
}
#s-service-6 > path {
fill: #000;
}
#s-secure-indicator-2 {
opacity: 0;
}
#s-secure-indicator-4 {
opacity: 0;
}
#s-secure-indicator-6 {
opacity: 0;
}
#s-connection-path-6 {
stroke-dasharray: 161;
stroke-dashoffset: 161;
}
#s-connection-path-5 {
stroke-dasharray: 73;
stroke-dashoffset: 73;
}
#s-connection-path-4 {
stroke-dasharray: 115;
stroke-dashoffset: 115;
}
#s-connection-path-1 {
stroke-dasharray: 16;
stroke-dashoffset: 16;
}
#s-connection-path-2 {
stroke-dasharray: 16;
stroke-dashoffset: 16;
}
#s-connection-path-8 {
stroke-dasharray: 73;
stroke-dashoffset: 73;
}
#s-connection-path-10 {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
#s-connection-path-9 {
stroke-dasharray: 16;
stroke-dashoffset: 16;
}
#s-consul-inbound-paths-lower,
#s-dynamic-update-inbound-lower {
opacity: 0;
}
#s-consul-inbound-paths-upper,
#s-dynamic-update-inbound-upper {
opacity: 0;
}
#s-consul-server-connection-lower,
#s-consul-outbound-5,
#s-consul-outbound-6,
#s-consul-outbound-7 {
opacity: 0;
}
#s-tls-cert-lower,
#s-dynamic-update-outbound-ower {
opacity: 0;
}
#s-consul-server-connection-upper,
#s-consul-outbound-1,
#s-soncul-outbound-2,
#s-consul-outbound-3,
#s-consul-outbound-4 {
opacity: 0;
}
#s-tls-cert-upper,
#s-dynamic-update-outbound-upper {
opacity: 0;
}
}

1
website/source/assets/stylesheets/consul-connect/_index.scss
View File

@ -15,5 +15,4 @@
@import 'components/_use-cases';
@import 'pages/_home';
@import '_animations';

8
website/source/segmentation.html.erb
View File

@ -35,14 +35,18 @@ description: |-
<span class='dot'></span>
<h3>The Challenge</h3>
<span class='sub-heading'>Securing service-to-service communication with firewalls doesn’t scale in dynamic settings.</span>
<img src='//placehold.it/516x314'>
<div id='segmentation-challenge-animation' class='g-animation-block'>
<%= inline_svg 'consul-connect/svgs/segmentation-challenge.svg' %>
</div>
<p>East-west firewalls are the main tool for networking security in a static world. They depend on constraining traffic flow and use IP based rules to control ingress and egress traffic. But in a dynamic world where services move across machines and machines are frequently created and destroyed, this perimeter-based approach is difficult to scale as it requires complex network topologies and a large number of short lived firewall rules.</p>
</div>
<div>
<span class='dot'></span>
<h3>The Solution</h3>
<span class='sub-heading'>Service segmentation for dynamic service authorization.</span>
<img src='//placehold.it/516x314'>
<div id='segmentation-solution-animation' class='g-animation-block'>
<%= inline_svg 'consul-connect/svgs/segmentation-solution.svg' %>
</div>
<p>Service segmentation is a new approach to secure the service itself rather than relying on the network. Consul Connect enables high level rules to codify which services are allowed to communicate directly, without IP based rules or networking middleware.</p>
</div>
</div>