discovery page animations working
This commit is contained in:
Jeff Escalante
Jack Pearkes
parent
0ab522ef77
commit
69adb06caa
|
|
@ -0,0 +1,196 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 351">
|
||||
<defs>
|
||||
<style>.c-cls-1{isolation:isolate;}.c-cls-2{fill:#cfd1d9;}.c-cls-3{opacity:0.12;mix-blend-mode:multiply;}.c-cls-14,.c-cls-21,.c-cls-4{fill:#fff;}.c-cls-5{fill:#252937;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-20,.c-cls-22,.c-cls-6,.c-cls-7,.c-cls-8,.c-cls-9{fill:none;}.c-cls-6{stroke:#1563ff;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-20,.c-cls-21,.c-cls-6,.c-cls-7,.c-cls-8,.c-cls-9{stroke-miterlimit:10;}.c-cls-10,.c-cls-6,.c-cls-7,.c-cls-8,.c-cls-9{stroke-width:1.5px;}.c-cls-7,.c-cls-9{stroke:#252937;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-8{stroke:#b5b8c4;}.c-cls-10,.c-cls-11,.c-cls-12,.c-cls-20,.c-cls-21,.c-cls-9{stroke-linecap:round;}.c-cls-12{stroke-dasharray:1 3.01;}.c-cls-13{fill:url(#c-linear-gradient);}.c-cls-14{opacity:0.32;}.c-cls-15{fill:#66a2ff;}.c-cls-16{fill:url(#c-linear-gradient-2);}.c-cls-17{fill:url(#c-linear-gradient-3);}.c-cls-18{fill:url(#c-linear-gradient-4);}.c-cls-19{opacity:0.1;}.c-cls-20,.c-cls-21{stroke:#66a2ff;}.c-cls-20{stroke-dasharray:1 3;}.c-cls-23{fill:#1563ff;}</style>
|
||||
<linearGradient id="c-linear-gradient" x1="12.59" y1="143.59" x2="67.41" y2="198.41" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#252937" />
|
||||
<stop offset="1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="c-linear-gradient-2" x1="252.59" y1="143.59" x2="307.41" y2="198.41" xlink:href="#c-linear-gradient" />
|
||||
<linearGradient id="c-linear-gradient-3" x1="132.59" y1="143.59" x2="187.41" y2="198.41" xlink:href="#c-linear-gradient" />
|
||||
<linearGradient id="c-linear-gradient-4" x1="124" y1="30" x2="196" y2="30" xlink:href="#c-linear-gradient" />
|
||||
<image id="c-image" width="50" height="50" 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==" />
|
||||
<image id="c-image-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAACXBIWXMAAAsSAAALEgHS3X78AAACpElEQVRoQ+2a4XaDIAxGP+ze/43X7Ecb/QwJoWI31uM9h6PtLHBJsEJXRASfxJJd8N/4OKGv7AKllFKya96FvDAvUiEj8idS3IVMLhQiET7+iRAAlRDtViTmChkZr/wmQse1lFJcqVbKaecXc7SR687vTuyAiSn3Z4EnVQk9o8MyXKIonSXlzVcro7hSvRFaANywSSlniTA2A4BNxr7XnXKRDAvJ89yt+ADRvAW2tvRc5bT9lZ0QpRuwr5TTDqgn6hlwp4F9+7a9BSTFadeKkB7taCl2so6Kaf2Lcx6VimwO8RHYOn2nwjIjUpxS9pHM64tL+qRAcKfviKVGKHjUd8O+vgWdbWRCPGqayyz0jU0I6GiwAaeZfa+bTIixE5Ojo98PZwjx6+imEJIJ2Q97N4KzUk6zQAfHuwGkbWRCQJxO/FoApE/CLZ5fGSoF1PV7N6eKIws8jsZ6PiID7D7v1u8cXY4ITc0lNDuX0OxcQrNzCc3OJTQ7l9DszC7Ea6GufYUjQraRAoD3ww8R7KeHl0d/yBZ4tvO8FuFKCwAZlUI9UN6qtUkmZLENaIR1029kkacdbu3FpfVnQl5EVERXkyyWNtiAhbyi1zQjlQl52OjoyI3IKFrvgno/vav+lpC3hudR5Pe61vsJUYQ4M1IiIbtJEUlxdEZkgLpelgH27YTt7YRERH/DtB0VPCa+jYx3PoqdJ9rxaPtZen7wYgnbgO18d3538LIMDNkcUil+Hd1pzogSt8EdZhm7n76jEqK0AzYZwBc6Q8LD3mh0YKsopT8aEzw6gu275zeEFDElnDtKiXZwnWcrPn/XDYGxEeIUdGWAhtB6gf8fJeuf8V7EO7b20VMhxXnwfLeMsnaw5weBbiHLCU/WXfRIMIeFZuXIAm9qfgDZgDepYSpGIAAAAABJRU5ErkJggg==" />
|
||||
<image id="c-image-3" width="74" height="74" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAYAAAAc0MJxAAAACXBIWXMAAAsSAAALEgHS3X78AAAD8ElEQVR4Xu2cW2/bMAxGj9NkWboL2g3Y/v8P3FC0XdZcWu+BosUoss29RSk/gEhs2Up4SlIuEKrr+57QvJZzF5Tquq6bu6YF9f8ZId3U9QWUsfetqXR4OJ6CV42oBEhhLPS0sdbVm9fBNC5qwM5AGUiLiul5aBeYhfNWsb7rujNYJ6ASJIVyk2xp7IYMrJVUrKXaG/Ca7GhMz1HCGkAVkbQEVsCHZOv0uiIDbBGUhXQEDsAu2T4ZaXw0ohTSDQLkI7ABbpNtEGCrdF9rKajp9ooA2gN/ga0xe91JCi7hZHVTUB8QMF+Ar8m+IMDW5DTU+y4dlq1Jr0gE/QWegUdywOj4UK90AhtRWpuWCKhbBNB34Btwh8DapHEFdemQVOr8AXhBID0gGQI5FQ/p/Ylf5aqnoNZkUN+AHwiwO+ATAkrTrwVQNu12SJo9In5AhqdmF6yceuakjShNvTsE0k/gHviM1K8WQR0RUM+IDyC16g/wRF6szvwqi3lHLuYaVQrrHgGm6dcqqBfEN9L7J3I5KWsvXdd1fd/3S1PIy2cohbVB0u0zubhv0ngrK58W8iO5Ju2QQPhIXs3HnhNPUk+lUaUPmfospY8Laq2A0pVLCznpdc0poBqksxql6oyNPZ2vOH2WumRIKo0okKgq/9OoRpFVCaqUhTZmrYCCcyhdcTyqKVA2/KzZ8dkPuCBN+TPrw4JzzU3QEpxSc9971LcaqFBFAcqpAOVUgHIqQDkVoJwKUE4FKKcClFMByqkA5VSAcipAORWgnApQTgUopwKUUwHKqQDlVIByKkA5FaCcClBOBSinApRTAcqpAOVUgHIqQDkVoJwKUE4FKKcClFMByqkA5VSAcipAOVUDpX0jmNex8dY0971HfZv6nbmFZc2Oz33wpaj845f+zPox17mgk9W6ubVlYu6325eg0gcLyh6PqgRVTlDr5D6Y+zR1LxmWAtCmobIrvYRXlTpcppSFo93bL0gfrm0tbQEU5D/8EfHhhdydfiAHRAls4LLs+75PPXs2PLWTW5uU/yBdk9oQqFG14PIhQXZeGxufEH+2ZGgKrBpdNvV00ELaIpM+kCHtuI5W2Qekr/gZCYY9OR0HSCft/GYiDU/dE0AhaZPyjutqvv6F+KewyqgaVBZzBWUn05q0Rya8tnb+34ifW8TvI5X0s6B0Io2oLQIDZPIt17tBxBioQUuQPEwFXSfak1c0nViL+TVvOaJ1ajL1LHFtUrah+l42sRlqVHW3nxRVkNOvXAFts3JZm1oBpcdjD9N6rrznfOu22GhLxsqNtqp73L3Xrdv0fG3rttgM0BxPbQY4CaqmAl6zmoJS03+Deq/6B8V50eJdTRLkAAAAAElFTkSuQmCC" />
|
||||
<image id="c-image-4" 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 Discovery_Challenge_dev</title>
|
||||
<g class="c-cls-1">
|
||||
<g id="c-problem">
|
||||
<g id="c-backdrop">
|
||||
<path class="c-cls-2" d="M70.5,232.5v109H9.5v-109h61M72,231H8V343H72V231Z" />
|
||||
<path class="c-cls-2" d="M310.5,232.5v109h-61v-109h61M312,231H248V343h64V231Z" />
|
||||
<path class="c-cls-2" d="M214.5,232.5v109h-109v-109h109M216,231H104V343H216V231Z" />
|
||||
<use class="c-cls-3" transform="translate(15 289)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-4" x="24" y="295" width="32" height="32" rx="2" ry="2" />
|
||||
<use class="c-cls-3" transform="translate(111 241)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-4" x="120" y="247" width="32" height="32" rx="2" ry="2" />
|
||||
<use class="c-cls-3" transform="translate(111 289)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-4" x="120" y="295" width="32" height="32" rx="2" ry="2" />
|
||||
<use class="c-cls-3" transform="translate(159 289)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-4" x="168" y="295" width="32" height="32" rx="2" ry="2" />
|
||||
<use class="c-cls-3" transform="translate(255 241)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-4" x="264" y="247" width="32" height="32" rx="2" ry="2" />
|
||||
</g>
|
||||
<g id="c-box-far-left">
|
||||
<use class="c-cls-3" transform="translate(15 241)" xlink:href="#c-image-4" />
|
||||
<rect class="c-cls-4" x="24.75" y="247.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
|
||||
<path class="c-cls-5" d="M54,248.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H26a.51.51,0,0,1-.5-.5V249a.51.51,0,0,1,.5-.5H54m0-1.5H26a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2H54a2,2,0,0,0,2-2V249a2,2,0,0,0-2-2Z" />
|
||||
</g>
|
||||
<g id="c-line-horizontal-right">
|
||||
<line class="c-cls-6" x1="188" y1="171" x2="252" y2="171" />
|
||||
</g>
|
||||
<g id="c-line-vertical-down">
|
||||
<line class="c-cls-6" x1="40" y1="199" x2="40" y2="247" />
|
||||
</g>
|
||||
<g id="c-line-horizontal-left">
|
||||
<line class="c-cls-6" x1="68" y1="171" x2="132" y2="171" />
|
||||
</g>
|
||||
<g id="c-line-top-right">
|
||||
<line class="c-cls-7" x1="280" y1="198.88" x2="280" y2="215.56" />
|
||||
</g>
|
||||
<g id="c-line-bottom-right">
|
||||
<line class="c-cls-8" x1="280" y1="215.56" x2="280" y2="295" />
|
||||
</g>
|
||||
<g id="c-line-top-left">
|
||||
<line class="c-cls-7" x1="160.05" y1="198.88" x2="160.04" y2="215.56" />
|
||||
</g>
|
||||
<g id="c-line-bottom-left">
|
||||
<polyline class="c-cls-8" points="160.04 215.56 160.04 263 168 263" />
|
||||
</g>
|
||||
<g id="c-broken-link-right">
|
||||
<g id="c-Layer_76" data-name="Layer 76">
|
||||
<rect class="c-cls-4" x="278.77" y="210.13" width="2.5" height="10.85" />
|
||||
</g>
|
||||
<path class="c-cls-9" d="M282.54,212.06v-.5a2,2,0,0,0-2-2h-1a2,2,0,0,0-2,2v2.5" />
|
||||
<path class="c-cls-10" d="M277.54,219.06v.5a2,2,0,0,0,2,2h1a2,2,0,0,0,2-2v-2.5" />
|
||||
<line class="c-cls-11" x1="285.16" y1="213.63" x2="287.93" y2="212.48" />
|
||||
<line class="c-cls-11" x1="285.16" y1="217.48" x2="287.93" y2="218.63" />
|
||||
<line class="c-cls-11" x1="274.93" y1="213.63" x2="272.16" y2="212.48" />
|
||||
<line class="c-cls-11" x1="274.93" y1="217.48" x2="272.16" y2="218.63" />
|
||||
</g>
|
||||
<g id="c-broken-link-left">
|
||||
<g id="c-Layer_75" data-name="Layer 75">
|
||||
<rect class="c-cls-4" x="158.77" y="210.13" width="2.5" height="10.85" />
|
||||
</g>
|
||||
<path class="c-cls-9" d="M162.54,212.06v-.5a2,2,0,0,0-2-2h-1a2,2,0,0,0-2,2v2.5" />
|
||||
<path class="c-cls-10" d="M157.54,219.06v.5a2,2,0,0,0,2,2h1a2,2,0,0,0,2-2v-2.5" />
|
||||
<line class="c-cls-11" x1="165.16" y1="213.63" x2="167.93" y2="212.48" />
|
||||
<line class="c-cls-11" x1="165.16" y1="217.48" x2="167.93" y2="218.63" />
|
||||
<line class="c-cls-11" x1="154.93" y1="213.63" x2="152.16" y2="212.48" />
|
||||
<line class="c-cls-11" x1="154.93" y1="217.48" x2="152.16" y2="218.63" />
|
||||
</g>
|
||||
<g id="c-box-left-placement">
|
||||
<use class="c-cls-3" transform="translate(158 240)" xlink:href="#c-image-2" />
|
||||
<rect class="c-cls-12" x="168" y="247" width="32" height="32" rx="2" ry="2" />
|
||||
</g>
|
||||
<g id="c-box-right-placement">
|
||||
<use class="c-cls-3" transform="translate(254 288)" xlink:href="#c-image-2" />
|
||||
<rect class="c-cls-12" x="264" y="295" width="32" height="32" rx="2" ry="2" />
|
||||
</g>
|
||||
<g id="c-load-balancer-left">
|
||||
<g id="c-backgrop">
|
||||
<use class="c-cls-3" transform="translate(3 137)" xlink:href="#c-image-3" />
|
||||
<rect class="c-cls-13" x="12" y="143" width="56" height="56" rx="2" ry="2" />
|
||||
<path class="c-cls-4" d="M40,181.75a.75.75,0,0,1-.29-.06.78.78,0,0,1-.24-.16l-3-3a.75.75,0,1,1,1.06-1.06l1.72,1.72v-7.44H31.81l1.72,1.72a.75.75,0,1,1-1.06,1.06l-3-3a.78.78,0,0,1-.16-.24.73.73,0,0,1,0-.58.78.78,0,0,1,.16-.24l3-3a.75.75,0,1,1,1.06,1.06l-1.72,1.72h7.44V163a.75.75,0,0,1,1.5,0v7.25h7.44l-1.72-1.72a.75.75,0,1,1,1.06-1.06l3,3a.78.78,0,0,1,.16.24.73.73,0,0,1,0,.58.78.78,0,0,1-.16.24l-3,3a.75.75,0,1,1-1.06-1.06l1.72-1.72H40.75v7.44l1.72-1.72a.75.75,0,1,1,1.06,1.06l-3,3a.78.78,0,0,1-.24.16A.75.75,0,0,1,40,181.75Z" />
|
||||
</g>
|
||||
<g id="c-progress-bar">
|
||||
<rect class="c-cls-14" x="20" y="189" width="40" height="4" />
|
||||
<rect class="c-cls-15" x="20" y="189" width="12" height="4" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-load-balancer-right">
|
||||
<g id="c-Layer_40" data-name="Layer 40">
|
||||
<use class="c-cls-3" transform="translate(243 137)" xlink:href="#c-image-3" />
|
||||
<rect class="c-cls-16" x="252" y="143" width="56" height="56" rx="2" ry="2" />
|
||||
<path class="c-cls-4" d="M280,181.75a.75.75,0,0,1-.29-.06.78.78,0,0,1-.24-.16l-3-3a.75.75,0,1,1,1.06-1.06l1.72,1.72v-7.44h-7.44l1.72,1.72a.75.75,0,1,1-1.06,1.06l-3-3a.78.78,0,0,1-.16-.24.73.73,0,0,1,0-.58.78.78,0,0,1,.16-.24l3-3a.75.75,0,1,1,1.06,1.06l-1.72,1.72h7.44V163a.75.75,0,0,1,1.5,0v7.25h7.44l-1.72-1.72a.75.75,0,1,1,1.06-1.06l3,3a.78.78,0,0,1,.16.24.73.73,0,0,1,0,.58.78.78,0,0,1-.16.24l-3,3a.75.75,0,1,1-1.06-1.06l1.72-1.72h-7.44v7.44l1.72-1.72a.75.75,0,1,1,1.06,1.06l-3,3a.78.78,0,0,1-.24.16A.72.72,0,0,1,280,181.75Z" />
|
||||
</g>
|
||||
<g id="c-progress-bar-2" data-name="progress-bar">
|
||||
<rect class="c-cls-14" x="260" y="189" width="40" height="4" />
|
||||
<rect class="c-cls-15" x="260" y="189" width="12" height="4" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-load-balancer-middle">
|
||||
<g id="c-backdrop-2" data-name="backdrop">
|
||||
<use class="c-cls-3" transform="translate(123 137)" xlink:href="#c-image-3" />
|
||||
<rect class="c-cls-17" x="132" y="143" width="56" height="56" rx="2" ry="2" />
|
||||
<path class="c-cls-4" d="M160,181.75a.75.75,0,0,1-.29-.06.78.78,0,0,1-.24-.16l-3-3a.75.75,0,1,1,1.06-1.06l1.72,1.72v-7.44h-7.44l1.72,1.72a.75.75,0,1,1-1.06,1.06l-3-3a.78.78,0,0,1-.16-.24.73.73,0,0,1,0-.58.78.78,0,0,1,.16-.24l3-3a.75.75,0,1,1,1.06,1.06l-1.72,1.72h7.44V163a.75.75,0,0,1,1.5,0v7.25h7.44l-1.72-1.72a.75.75,0,1,1,1.06-1.06l3,3a.78.78,0,0,1,.16.24.73.73,0,0,1,0,.58.78.78,0,0,1-.16.24l-3,3a.75.75,0,1,1-1.06-1.06l1.72-1.72h-7.44v7.44l1.72-1.72a.75.75,0,1,1,1.06,1.06l-3,3a.78.78,0,0,1-.24.16A.72.72,0,0,1,160,181.75Z" />
|
||||
</g>
|
||||
<g id="c-progress-bar-3" data-name="progress-bar">
|
||||
<rect class="c-cls-14" x="140" y="189" width="40" height="4" />
|
||||
<rect class="c-cls-15" x="140" y="189" width="12" height="4" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-computer">
|
||||
<image class="c-cls-3" width="90" height="82" transform="translate(115 2)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABSCAYAAADU+8NvAAAACXBIWXMAAAsSAAALEgHS3X78AAAGeElEQVR4Xu2da2/bOBBFjxLn1XaLogv0///B3e02aZrmpf1AXfNqTEl2nDALmxcgbOtBScfDy5EBjbu+72l6e62WNojquq5b2uYY1O8Yod3c9gFqBHyswCOw9ec5+MWINsBdocHxQpZ6e103YSsB3wA9QFY7KbQI/djkcJ8Lre+6bgP2CHSAfDq0lTUtE/DR7hymSlbxDDwN7dGalhFhl6xDkFfA+dAuhnZGBh5hHwNoh/wIPAC/h3Y/NIb15Yi2aD4hgTwHLoEP1q6G5WfDNsdkIbKLJxLge+AXcGvNtxtZSIxogVY0fwA+W/tEgn3BOKoPHbZ78hMpgn8BN8APMketX/u1OpgDfUEG/SfwFfhCgn1JimpNkMcgwXsA7kiQv5M4QLaSh+H9KPgctFtHBP0V+EYC/nlYrqg+pohWNN+SIvl8WC/4aj7SZ63jlPRNXZEi+AsJ8jdyVF8M+x8T6EcS6BvSqIbk1T+Ba/LctZGVrYDSHaBnHYL9mQz8D9KBjhH0HSnIGN5fk5MEZWRrHl3XdX3f96WIjlF9Qc4+PpEg/0HqfEU5pz40aSJ8JHvybxKTS3LqO5kgRI/Wq8N24IJ+xXhC9P0PTcocNBEyvPq9RbyRc5ZFj3Y5cEH3u0TdvBxTREOKar9Tjj9NFDUHGsawOzbh+0EOWYrq0u89i5BhGTRsWkocGosHORAtcZjV1M3GNvCW1h+ilq55ktux3NW9uxroSmqgK6mBrqQGupIa6EpqoCupga6kBrqSGuhKaqArqYGupAa6khroSmqgK6mBrqQGupIa6EpqoCupga6kBrqSGuhKaqArqYGupAa6khroSmqgK6mBrqQGupIa6EpqoCupga6kBrqSGuhKaqArqYGupAa6kqZA69nnOS2tP0QtXfMkt22eM+zt1RvMdPwKWnrUbEpvcT6la47LZrUEWp09M+7cq2LBy6FETfWz1L9f6NT7fRSvObJYDLg50BFqrIilB9BlP0swtlF8KtX7nOp/LtpeA7T60EP3sSpYhF+Ug44n6yXHvBrWHePyNifsD9nBnhSab+eaGmWlyNtH6v+RVEvpjszjgcwpAl8fN0Z0hCzAd6TyNjfkoiAP7F8YxZ+lPmG6zt5pYR+H+GStFHEbF76jdBwVRrkmsbglQxfwYnSvAPq+760KjU78kVxyTNWwVN7mN/uX+nHIXhdEdfZUc0/baOT4BcSgUO051aHzaNsHtoNWqZ/vJCY3JEb35C93fYypcmzxxAX5O/mi73id4lXaT5BVZ+9qaB9sO4ccI1pD2uvQ/SIP8XvGsPcBHYtX/UViI9gxqteKHu0n7h3Kk+9Jw2afcmzRj1W76RL4SCoj9MT4S1ABkhjNU6Pvemg/ybAf2c+35fuxHNvfJEa3JGbxOMB0RDtobfNAOvF9Cwz6hOcFsj6Sjvk8rJONnA3tmfGxdK4e0Xekc/yXPLR/Mh7aPlFuKw/CUoHBKdBrzYG+J5eB9Elgn5KZc5BV13NFthD32FH1LTKwmBk5gH9I0F8Tts8HsWRmHDlrrUEPEyLkk9eF+3DZpwjsnF0I5AUZunLWB7JNRY+Wbfi2mgyVJf0gw56ykTlFuxIfHS8WgV179FK1XV2AvxfoWA3LtQ1opXBnZMgdCfpHxsA8izghfxmaE0rZhpesjFHnnj05aRUU1zvsUjo5yjqkEWiLamwHWYmGvE9m2ypG8wWp31MScD9RQVLuzrAsViTzc9O2guh9uX8rI5mctLZQb+250HpCNEMhog22dxbh7goZ8helDGZFGbBPwv3w+ZxxNEtuc5oINSmVgPtQfyDDgd1h6zW27UrP+4YGHHa3Cpe+JE1oKzYBeHrWDctvyaUoS3blUe2w/SZCwH1o++eXRHTx885/piCFHQXfh+628hHhk0kEdDqsV4bjk2/JrgSpZDk3bE6Agrsx1NlRc1BLmgVd0q4HgPXIgHFK5umY5+q3jMvcL+XqbnFuD5oEFd3x94hJP30L7Qz6JQq+70BUa7knQ5ZV6HcU+fIcaMjgfKQIuG7HZSNVIUMl0CaBVkR3ZMjK03dJIUt+6amXp37y623TuldVNdDhhmi9mJw1yCY8jYxaAq1l7sEx8yjeULy1qoE2CYTbiCY7B7xLVuPq7VXH2fDl8q5vp9n/ynoLVfx7KAce24sm9X1UHbT0xn94VvLu9OadLvjdQJcU4O+t94Ja0v8K9CHrPzkFkS0OiwEZAAAAAElFTkSuQmCC" />
|
||||
<path class="c-cls-18" d="M196,52H124V10a2,2,0,0,1,2-2h68a2,2,0,0,1,2,2Z" />
|
||||
<path class="c-cls-4" d="M194,64H126a2,2,0,0,1-2-2V52h72V62A2,2,0,0,1,194,64Z" />
|
||||
<path class="c-cls-4" d="M173,71.25v0h0c0-.17-.23-.4-.74-.63-.32-.15-1.65-.82-2.79-1.4S167,67.75,167,66.81V64H153v2.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.28h24.52c.48,0,.74-.12.74-.3Z" />
|
||||
<polygon class="c-cls-19" points="167 66.15 167 64 153 64 153 65.06 167 66.15" />
|
||||
<g id="c-line-1">
|
||||
<rect class="c-cls-4" x="132" y="16" width="15" height="2" />
|
||||
<rect class="c-cls-4" x="151" y="16" width="12" height="2" />
|
||||
<rect class="c-cls-4" x="177" y="16" width="11" height="2" />
|
||||
<rect class="c-cls-4" x="167" y="16" width="6" height="2" />
|
||||
</g>
|
||||
<g id="c-line-2">
|
||||
<rect class="c-cls-4" x="132" y="21" width="15" height="2" />
|
||||
<rect class="c-cls-4" x="151" y="21" width="12" height="2" />
|
||||
<rect class="c-cls-4" x="177" y="21" width="11" height="2" />
|
||||
<rect class="c-cls-4" x="167" y="21" width="6" height="2" />
|
||||
</g>
|
||||
<g id="c-line-3">
|
||||
<rect class="c-cls-4" x="132" y="26" width="15" height="2" />
|
||||
<rect class="c-cls-4" x="151" y="26" width="12" height="2" />
|
||||
<rect class="c-cls-4" x="177" y="26" width="11" height="2" />
|
||||
<rect class="c-cls-4" x="167" y="26" width="6" height="2" />
|
||||
</g>
|
||||
<g id="c-line-4">
|
||||
<rect class="c-cls-15" x="132" y="31" width="15" height="2" />
|
||||
<rect class="c-cls-15" x="151" y="31" width="12" height="2" />
|
||||
<rect class="c-cls-15" x="177" y="31" width="11" height="2" />
|
||||
<rect class="c-cls-15" x="167" y="31" width="6" height="2" />
|
||||
</g>
|
||||
<g id="c-line-5">
|
||||
<rect class="c-cls-15" x="132" y="36" width="15" height="2" />
|
||||
<rect class="c-cls-15" x="151" y="36" width="12" height="2" />
|
||||
<rect class="c-cls-15" x="177" y="36" width="11" height="2" />
|
||||
<rect class="c-cls-15" x="167" y="36" width="6" height="2" />
|
||||
</g>
|
||||
<g id="c-line-6">
|
||||
<rect class="c-cls-15" x="132" y="41" width="15" height="2" />
|
||||
<rect class="c-cls-15" x="151" y="41" width="12" height="2" />
|
||||
<rect class="c-cls-15" x="177" y="41" width="11" height="2" />
|
||||
<rect class="c-cls-15" x="167" y="41" width="6" height="2" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-computer-to-load-balancers">
|
||||
<g id="c-arrow-down">
|
||||
<polygon class="c-cls-15" points="160.04 137.86 161.97 135.08 163.9 132.29 160.04 132.29 156.19 132.29 158.12 135.08 160.04 137.86" />
|
||||
<line class="c-cls-20" x1="160.04" y1="75.31" x2="160.04" y2="130.7" />
|
||||
</g>
|
||||
<g id="c-arrow-right">
|
||||
<polygon class="c-cls-15" points="280.04 137.86 281.97 135.08 283.9 132.29 280.04 132.29 276.19 132.29 278.12 135.08 280.04 137.86" />
|
||||
<path class="c-cls-20" d="M280.05,130.7h0A26.7,26.7,0,0,0,253.36,104H176.05" />
|
||||
</g>
|
||||
<g id="c-arrow-left">
|
||||
<polygon class="c-cls-15" points="40.04 137.86 38.12 135.08 36.19 132.29 40.04 132.29 43.9 132.29 41.97 135.08 40.04 137.86" />
|
||||
<path class="c-cls-20" d="M144,104H66.7A26.7,26.7,0,0,0,40,130.7h0" />
|
||||
</g>
|
||||
<g id="c-circle">
|
||||
<circle class="c-cls-21" cx="160" cy="72" r="3.5" />
|
||||
</g>
|
||||
<g id="c-edit-box">
|
||||
<use class="c-cls-3" transform="translate(135 82)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-15" x="144" y="88" width="32" height="32" rx="2" ry="2" />
|
||||
<path class="c-cls-4" d="M167,105.68v3.56a2,2,0,0,1-2,2h-9.33a2,2,0,0,1-2-2V99.91a2,2,0,0,1,2-2h3.56a.67.67,0,0,1,0,1.33h-3.56a.67.67,0,0,0-.67.67v9.33a.67.67,0,0,0,.67.67H165a.67.67,0,0,0,.67-.67v-3.56a.65.65,0,0,1,.66-.66A.66.66,0,0,1,167,105.68Zm1.14-6.24a.66.66,0,0,1,0,.94l-6.67,6.67a.67.67,0,0,1-.47.19h-2.67a.66.66,0,0,1-.66-.66v-2.67a.67.67,0,0,1,.19-.47l6.67-6.67a.66.66,0,0,1,.94,0Zm-1.42.47L165,98.19l-6,6v1.72h1.72Z" />
|
||||
<rect class="c-cls-22" x="153" y="96" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-active-box">
|
||||
<use class="c-cls-3" transform="translate(159 241)" xlink:href="#c-image-4" />
|
||||
<rect class="c-cls-4" x="168.75" y="247.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
|
||||
<path class="c-cls-23" d="M198,248.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H170a.51.51,0,0,1-.5-.5V249a.51.51,0,0,1,.5-.5h28m0-1.5H170a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V249a2,2,0,0,0-2-2Z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,106 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 351">
|
||||
<defs>
|
||||
<style>.s-cls-1{isolation:isolate;}.s-cls-2{fill:#cfd1d9;}.s-cls-13,.s-cls-3,.s-cls-4,.s-cls-6,.s-cls-8{fill:none;}.s-cls-12,.s-cls-3,.s-cls-4{stroke:#ca2171;}.s-cls-10,.s-cls-12,.s-cls-3,.s-cls-6,.s-cls-8{stroke-miterlimit:10;}.s-cls-10,.s-cls-12,.s-cls-3,.s-cls-4{stroke-width:1.5px;}.s-cls-4{stroke-linejoin:round;}.s-cls-5{opacity:0.12;mix-blend-mode:multiply;}.s-cls-6{stroke:#b5b8c4;stroke-dasharray:0.49 2.97;}.s-cls-10,.s-cls-12,.s-cls-6,.s-cls-8{stroke-linecap:round;}.s-cls-7{fill:#e07eac;}.s-cls-8{stroke:#e07eac;stroke-dasharray:0.5 3;}.s-cls-10,.s-cls-12,.s-cls-15,.s-cls-16,.s-cls-9{fill:#fff;}.s-cls-10{stroke:#fce2ee;}.s-cls-11{fill:#ca2171;}.s-cls-14{fill:url(#s-linear-gradient);}.s-cls-15,.s-cls-16{fill-rule:evenodd;}.s-cls-15{opacity:0.7;}</style>
|
||||
<linearGradient id="s-linear-gradient" x1="140.2" y1="76.2" x2="179.8" y2="115.8" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ca2171" />
|
||||
<stop offset="1" stop-color="#8e134a" />
|
||||
</linearGradient>
|
||||
<image id="s-image" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAACXBIWXMAAAsSAAALEgHS3X78AAACxUlEQVRoQ+2a4XakIAyFL7bv/8Rb6Y8xM9drAmHVce32nsNRkQa/JDAKLbVW/CRNvQZ3048D+uw18FRKKb02R6oOjIsUkAPwViDuvgfXBCIQPer52apLQSmlCRUCCQwX4DwYz26V0oRygRYYLRPeB2RHBpmX8mgQQG2AnMhMVDhKnrgDfihVZMOzbzBW34SKUk5hPrAGKng9KB/5YfYA8f0ZW83w7aaAPrAFAiinO8qkp2ZFceqAR38TyHkapRVQY+xwypkYxoMbiZBGV2XPYf1oljzVmrY9MJOlgeW3ph8wBmR1XundT40hk2dYZ52Z6vZInadO1DavylKKpV0PCFhPnXZtIF84B4jHive+yVCrKGWAgDWUARnMUUDAGohhNPX4fCjlFAJYp9pZQHxd6byrFpBGJar32uyV2t1EIlIvQqoQpvcWnBG9VauT0lAjH3hdYydJ+20+xwjQLfQLdIH0N6c522WAdHBeNZZSygBdrSGH3gFoSL9A/7oyQEOzzNXKAF2tIYdmgIZmmauVAbqV/ksgzdmrJoVUvxkg4DUYQ6N7t1iCjYFe2Wj0A69luO6FQgzDjm86NgvERqwDnu1s7XnvDGi2vQKsZ1kXLAOUDbd9Ju8RR4SL1c+I+wcQA3mejmCs7ojfqF6Eug5bAdVa6zIMooee5JrPzwLqQrBGlrE4QpxeLaAo0npPbSmI2eY1QNeBrZTTP/IegGefPUBcr0fdGGguP/cmBfaMpp0nixRfR/LueVHhc3fFNtwfwnJ3GUds5Atrz7L3wvAHdVGEWF6kPZiNMmPIovMHj508u+Y2e4EiSLXPYJvoAAEQRcnyF3gZtNTT+pbH/0aVjm5J7YKLzCN87gHx8SipXXZauJZeWmvswT9fPG/jeAgT2904rLUx0AR6Ntq+Cb9LKQhWCsh0wNv0kLIQrCGgOyj7gXcbfQPz1l2wWWHNPgAAAABJRU5ErkJggg==" />
|
||||
<image id="s-image-2" width="50" height="50" 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==" />
|
||||
<image id="s-image-3" 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="s-image-4" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsSAAALEgHS3X78AAAFMUlEQVRoQ92Za1PbSBBFj8CY8EpCCJv9//9uQzbA8mbB2g8zV7pqjR62IVXZruqSjdD0nLk9D7Wruq75P9hi6h82taqqqtLf63cauWrbdkOHY+fj9xis+b4t4MaKGEBVcOhDyGq7Nq7mNgVaW5EM4L5j1x377lAy7/zKvLZrTeJZq2OzFQkKqMO72Rf2eZcukJsDvJq/2OcVsFpXoVkgQQUBLIA9YBmuDuWqaLS98/8Cz+EqqBU55ebATIIYRAngQ/aDfF3SAkkZB5ES6vgz8Ag85OsjBaA5MKMgAWKRfZ/U6UPgyPyQFkjKlECkhADugTvz+3zvKT/7wgyYQZACxB5dgI/Bj2lhloyDPNNC3AL/mPsgPOZnJ2GKIAMQBySAE+ATcGr+iQRzRILdZxzkidTJO1Lnr4FLhtWECZix1Kpo58QHWhVOgTPga/YvwGcSoECWdCc8dCe65sYdcANc2bOaX3GRcO9ZD6Sgxj4pZU5IEOfAH9nPaUGUWlJjbLJLFaXWEf2U9Gc6e01JlZIivkJpXhyR0ueMBPAn8I0Ecko3rWJqxJH1Ca9FIqYjdKF9n/HNs7EOSEGNJSmQUuorCeRb9jNaNZRS6szUhvhC6vw+fSUc1v2FVpXKVRlSJKrhIOfZz0hpdUI3LXwjLIHIF+ZKQ+iubI/mTyQYbZYda0AKG582PAf5kv2UdoLHeTEEIRNIPJtBd1V7oL+/dGB8rkRF1IG45H4kzZHP2bVvHJAgfKVRp4ZAdK+mP4fiiub7yy0JZkGCURtAGSQqckjq9EeSAsd0l9mYGmMA8b5DeAYck2L5RuvLem/+7bQfm9HxFWtJGnU/jnijnk4wDeHmz2i/8sGLR5/SGa6JN6aIN6wzlJZJP+VOzYkxK8Hs0Z7n4oG0tD8BXUVkURUp48tkaZ/Yxjwb1L7HVD+KEOQ/ll5bBaJR8mVSjTnINjDehtqdit3EVN/jHBlq2AO8FUC0GNcHbGjgmvil1JJVE/5etlHcMZDfysZASsfn0aP0G9lGcR2ktqt8FbwpCjDR8AYW4zYVFfMYt4m/A/jZPjbkx+heyabQ8CZWGrip2E1M9b2UWg6i4/Mz6cD2TNtwp8EtzUHUvsdUPxykYxHEIfwo7eUanUA1Stuo4s96rUvv9B5bg1iEiXMkquHVjliu8YZ7OTvD/Jk4cDHeA60yvfSC/lnLQbxRlWxu8md/B/Ejg6/zQ2u+A5Qg7kgxbuge3zV4RUVKIDWtxHq5UcnGqx06UqvDtX0f2zBL6aQXKQ3YVfbr/P0u31dK91K5AanrWqX9qIhALmmrHbFQULP+q64r8UBbFroEfma/pAXpKTL1zq4gKmsKRMfqUqHgtXCvdEpV6mp10mDdkiD+Bi6y/6APojnSm4sdkKyKginQPe0x2ks9hP/bpBwUFb8A/gK+0wW5p11cemrAsCK+cj3SPUpHCC2V2xTorkipdEGC+E5S55q+GsV9pAcS5ooCxlRxJbQgbFsy/UlS4QcJ4jLfU/VkUA0oKyJT4IoUNHYopsZbFLHl1yQIqRH3q54VQQqqNLfsbxHkrX5W0OTW3tGpMK71swIMwoyBvMcPPTp3jULAeGqVYHwP0JlIo6q58eY/vTEBAcz7edrKqRXt+/SCX/BjKDMgYCYIECstXowQ1K75nA3xlS6UPut+DUz+CCqbDSIL6gjK4UrVDlltvqLb6ZXfnwsgWxtEVqiFxc5HCFlt1+izFYi2MYjMgKDf+ZIixe+bAsi2BhmyANjYth0esncD+dX2H3UTX0Rk9ZaDAAAAAElFTkSuQmCC" />
|
||||
</defs>
|
||||
<title>Service Discovery_Solution_dev</title>
|
||||
<g class="s-cls-1">
|
||||
<g id="s-service-discovery-solution-dev">
|
||||
<g id="s-node-boxes">
|
||||
<path class="s-cls-2" d="M70.5,157.5v125H9.5v-125h61M72,156H8V284H72V156Z" />
|
||||
<path class="s-cls-2" d="M310.5,157.5v125h-61v-125h61M312,156H248V284h64V156Z" />
|
||||
<path class="s-cls-2" d="M214.5,157.5v125h-109v-125h109M216,156H104V284H216V156Z" />
|
||||
</g>
|
||||
<g id="s-connected-line-2">
|
||||
<polyline class="s-cls-3" points="40 252 40 267 280 267 280 252" />
|
||||
</g>
|
||||
<g id="s-connected-line-1">
|
||||
<polyline class="s-cls-4" points="40 252 40 267 184 267 184 204" />
|
||||
</g>
|
||||
<g id="s-dotted-service-box-3">
|
||||
<use class="s-cls-5" transform="translate(254 213)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-6" x="264" y="220" width="32" height="32" rx="2" ry="2" />
|
||||
</g>
|
||||
<g id="s-dotted-service-box-2">
|
||||
<use class="s-cls-5" transform="translate(158 165)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-6" x="168" y="172" width="32" height="32" rx="2" ry="2" />
|
||||
</g>
|
||||
<g id="s-dotted-line-left">
|
||||
<polygon class="s-cls-7" points="59.44 236 62.22 234.07 65 232.15 65 236 65 239.85 62.22 237.93 59.44 236" />
|
||||
<path class="s-cls-8" d="M129,95.19h-7.66a33.59,33.59,0,0,0-33.59,33.59v89.33A17.89,17.89,0,0,1,69.86,236H67.48" />
|
||||
</g>
|
||||
<g id="s-dotted-lines-right">
|
||||
<polygon class="s-cls-7" points="190.97 96 193.75 94.07 196.54 92.15 196.54 96 196.54 99.85 193.75 97.93 190.97 96" />
|
||||
<path class="s-cls-8" d="M199,96h0a33.33,33.33,0,0,1,33.33,33.33v80.06A26.66,26.66,0,0,0,259,236.05h4" />
|
||||
<path class="s-cls-8" d="M199,96h0a33.33,33.33,0,0,1,33.33,33.33v33.56a25.15,25.15,0,0,1-25.16,25.16H202.5" />
|
||||
</g>
|
||||
<g id="s-inactive-services">
|
||||
<use class="s-cls-5" transform="translate(255 166)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-9" x="264" y="172" width="32" height="32" rx="2" ry="2" />
|
||||
<circle class="s-cls-10" cx="280" cy="204" r="3.5" />
|
||||
<use class="s-cls-5" transform="translate(15 166)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-9" x="24" y="172" width="32" height="32" rx="2" ry="2" />
|
||||
<circle class="s-cls-10" cx="40" cy="204" r="3.5" />
|
||||
<use class="s-cls-5" transform="translate(111 166)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-9" x="120" y="172" width="32" height="32" rx="2" ry="2" />
|
||||
<circle class="s-cls-10" cx="136" cy="204" r="3.5" />
|
||||
<use class="s-cls-5" transform="translate(111 214)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-9" x="120" y="220" width="32" height="32" rx="2" ry="2" />
|
||||
<circle class="s-cls-10" cx="136" cy="252" r="3.5" />
|
||||
<use class="s-cls-5" transform="translate(159 214)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-9" x="168" y="220" width="32" height="32" rx="2" ry="2" />
|
||||
<circle class="s-cls-10" cx="184" cy="252" r="3.5" />
|
||||
</g>
|
||||
<g id="s-active-service-3">
|
||||
<use class="s-cls-5" transform="translate(255 214)" xlink:href="#s-image-3" />
|
||||
<rect class="s-cls-9" x="264.75" y="220.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
|
||||
<path class="s-cls-11" d="M294,221.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H266a.51.51,0,0,1-.5-.5V222a.51.51,0,0,1,.5-.5h28m0-1.5H266a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V222a2,2,0,0,0-2-2Z" />
|
||||
<circle class="s-cls-12" cx="280" cy="252" r="3.5" />
|
||||
</g>
|
||||
<g id="s-active-service-2">
|
||||
<use class="s-cls-5" transform="translate(159 166)" xlink:href="#s-image-3" />
|
||||
<rect class="s-cls-9" x="168.75" y="172.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
|
||||
<path class="s-cls-11" d="M198,173.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H170a.51.51,0,0,1-.5-.5V174a.51.51,0,0,1,.5-.5h28m0-1.5H170a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2h28a2,2,0,0,0,2-2V174a2,2,0,0,0-2-2Z" />
|
||||
<circle class="s-cls-12" cx="184" cy="204" r="3.5" />
|
||||
</g>
|
||||
<g id="s-active-service-1">
|
||||
<use class="s-cls-5" transform="translate(15 214)" xlink:href="#s-image-3" />
|
||||
<rect class="s-cls-9" x="24.75" y="220.75" width="30.5" height="30.5" rx="1.25" ry="1.25" />
|
||||
<path class="s-cls-11" d="M54,221.5a.51.51,0,0,1,.5.5v28a.51.51,0,0,1-.5.5H26a.51.51,0,0,1-.5-.5V222a.51.51,0,0,1,.5-.5H54m0-1.5H26a2,2,0,0,0-2,2v28a2,2,0,0,0,2,2H54a2,2,0,0,0,2-2V222a2,2,0,0,0-2-2Z" />
|
||||
<circle class="s-cls-12" cx="40" cy="252" r="3.5" />
|
||||
</g>
|
||||
<g id="s-dynamic-sync-right">
|
||||
<use class="s-cls-5" transform="translate(207 105)" xlink:href="#s-image-4" />
|
||||
<rect class="s-cls-7" x="216" y="111" width="32" height="32" rx="16" ry="16" />
|
||||
<rect class="s-cls-13" x="224" y="119" width="16" height="16" />
|
||||
<path class="s-cls-9" d="M224.41,126.28h0a.8.8,0,0,1-.21-.15h0l-.05-.07a1,1,0,0,1-.08-.14.8.8,0,0,1,0-.15.29.29,0,0,1,0-.09v-4a.67.67,0,0,1,.67-.67.66.66,0,0,1,.66.67v2.46l2-1.86a6.8,6.8,0,0,1,2.48-1.55,6.67,6.67,0,0,1,8.51,4.06.67.67,0,0,1-1.26.44,5.34,5.34,0,0,0-6.81-3.25,5.48,5.48,0,0,0-2,1.26L226.35,125h2.32a.67.67,0,0,1,0,1.33h-4A.71.71,0,0,1,224.41,126.28ZM240,128.09a1,1,0,0,0-.08-.14l-.05-.07h0a.71.71,0,0,0-.14-.1s0,0-.07,0l-.1,0a.76.76,0,0,0-.16,0h-4a.67.67,0,0,0,0,1.33h2.32l-1.88,1.77a5.34,5.34,0,0,1-8.8-2,.67.67,0,1,0-1.26.44,6.76,6.76,0,0,0,1.57,2.49,6.69,6.69,0,0,0,9.42,0l2-1.86v2.46a.66.66,0,0,0,.66.67.67.67,0,0,0,.67-.67v-4a.44.44,0,0,0,0-.1A.7.7,0,0,0,240,128.09Z" />
|
||||
</g>
|
||||
<g id="s-dynamic-sync-left">
|
||||
<use class="s-cls-5" transform="translate(63 105)" xlink:href="#s-image-4" />
|
||||
<rect class="s-cls-7" x="72" y="111" width="32" height="32" rx="16" ry="16" />
|
||||
<rect class="s-cls-13" x="80" y="119" width="16" height="16" />
|
||||
<path class="s-cls-9" d="M80.41,126.28h0a.8.8,0,0,1-.21-.15h0l-.05-.07a1,1,0,0,1-.08-.14.8.8,0,0,1,0-.15.29.29,0,0,1,0-.09v-4a.67.67,0,0,1,.67-.67.66.66,0,0,1,.66.67v2.46l2-1.86a6.8,6.8,0,0,1,2.48-1.55,6.67,6.67,0,0,1,8.51,4.06.67.67,0,1,1-1.26.44A5.34,5.34,0,0,0,86.22,122a5.48,5.48,0,0,0-2,1.26L82.35,125h2.32a.67.67,0,0,1,0,1.33h-4A.71.71,0,0,1,80.41,126.28ZM96,128.09a1,1,0,0,0-.08-.14l-.05-.07h0a.71.71,0,0,0-.14-.1s0,0-.07,0l-.1,0a.76.76,0,0,0-.16,0h-4a.67.67,0,0,0,0,1.33h2.32l-1.88,1.77a5.34,5.34,0,0,1-8.8-2,.67.67,0,0,0-1.26.44,6.76,6.76,0,0,0,1.57,2.49,6.69,6.69,0,0,0,9.42,0l2-1.86v2.46a.66.66,0,0,0,.66.67.67.67,0,0,0,.67-.67v-4a.44.44,0,0,0,0-.1A.7.7,0,0,0,96,128.09Z" />
|
||||
</g>
|
||||
<g id="s-consul-server">
|
||||
<image class="s-cls-5" width="74" height="74" transform="translate(123 62)" xlink:href="data:image/png;base64,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" />
|
||||
<rect class="s-cls-14" x="132" y="68" width="56" height="56" rx="28" ry="28" />
|
||||
<path class="s-cls-15" d="M159.53,98.74A2.77,2.77,0,1,1,162.29,96a2.77,2.77,0,0,1-2.76,2.78" />
|
||||
<path class="s-cls-16" d="M164.92,97.25A1.28,1.28,0,1,1,166.2,96a1.28,1.28,0,0,1-1.28,1.28" />
|
||||
<path class="s-cls-16" d="M169.59,98.45h0a1.18,1.18,0,1,1,0-.1.54.54,0,0,1,0,.1" />
|
||||
<path class="s-cls-16" d="M168.69,95.16a1.28,1.28,0,1,1,.95-1.54,1.41,1.41,0,0,1,0,.5,1.23,1.23,0,0,1-1,1" />
|
||||
<path class="s-cls-16" d="M173.23,98.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-16" d="M172.2,95.1a1.27,1.27,0,1,1,1.05-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-16" d="M171.3,102.73h0a1.28,1.28,0,1,1,.16-.52,1,1,0,0,1-.16.52" />
|
||||
<path class="s-cls-16" d="M170.84,91a1.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-9" d="M159.58,108.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,159.58,108.84Z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -1,109 +1,6 @@
|
|||
var qs = document.querySelector.bind(document)
|
||||
var qsa = document.querySelectorAll.bind(document)
|
||||
|
||||
//
|
||||
// configuration challenge animation
|
||||
//
|
||||
|
||||
var configChallengeTimeline = new TimelineLite({
|
||||
onComplete: function() {
|
||||
$configChallenge.classList.remove('active')
|
||||
$configSolution.classList.add('active')
|
||||
configSolutionTimeline.restart()
|
||||
}
|
||||
})
|
||||
|
||||
var line1 = qs('#c-line-1')
|
||||
var line2 = qs('#c-line-2')
|
||||
var line3 = qs('#c-line-3')
|
||||
var line4 = qs('#c-line-4')
|
||||
var line5 = qs('#c-line-5')
|
||||
var line6 = qs('#c-line-6')
|
||||
var line7 = qs('#c-line-7')
|
||||
var line8 = qs('#c-line-8')
|
||||
var box1 = qs('#c-box-1')
|
||||
var box2 = qs('#c-box-2')
|
||||
var box3 = qs('#c-box-3')
|
||||
var box4 = qs('#c-box-4')
|
||||
var box5 = qs('#c-box-5')
|
||||
var box6 = qs('#c-box-6')
|
||||
var box7 = qs('#c-box-7')
|
||||
var box8 = qs('#c-box-8')
|
||||
var progressBar = qs('#c-loading-bar > rect:last-child')
|
||||
var cog = qs('#c-configuration-server > g > path')
|
||||
|
||||
configChallengeTimeline
|
||||
.to(box1, 1, {})
|
||||
.staggerTo(
|
||||
[line1, line2, line3, line4, line5, line6, line7, line8],
|
||||
1.5,
|
||||
{ css: { strokeDashoffset: 0 } },
|
||||
0.3,
|
||||
'start'
|
||||
)
|
||||
.staggerTo(
|
||||
[box1, box2, box3, box4, box5, box6, box7, box8],
|
||||
0.3,
|
||||
{ opacity: 1 },
|
||||
0.3,
|
||||
'-=2.5'
|
||||
)
|
||||
.to(progressBar, 3.5, { width: 40 }, 'start')
|
||||
.to(
|
||||
cog,
|
||||
3.5,
|
||||
{ rotation: 360, svgOrigin: '136px 127px', ease: Power1.easeOut },
|
||||
'start'
|
||||
)
|
||||
.to(line1, 2, {})
|
||||
.to(
|
||||
[line1, line2, line3, line4, line5, line6, line7, line8, progressBar],
|
||||
0.5,
|
||||
{ opacity: 0 },
|
||||
'reset'
|
||||
)
|
||||
.to(
|
||||
[box1, box2, box3, box4, box5, box6, box7, box8],
|
||||
0.5,
|
||||
{ opacity: 0.5 },
|
||||
'reset'
|
||||
)
|
||||
.pause()
|
||||
|
||||
//
|
||||
// configuration solution animation
|
||||
//
|
||||
|
||||
var configSolutionTimeline = new TimelineLite({
|
||||
onComplete: function() {
|
||||
$configSolution.classList.remove('active')
|
||||
$configChallenge.classList.add('active')
|
||||
configChallengeTimeline.restart()
|
||||
}
|
||||
})
|
||||
|
||||
var lines = qsa(
|
||||
'#s-line-1, #s-line-2, #s-line-3, #s-line-4, #s-line-5, #s-line-6, #s-line-7, #s-line-8'
|
||||
)
|
||||
var dots = qs('#s-dots')
|
||||
var boxes = qsa(
|
||||
'#s-service-box-1, #s-service-box-2, #s-service-box-3, #s-service-box-4, #s-service-box-5, #s-service-box-6, #s-service-box-7, #s-service-box-8'
|
||||
)
|
||||
var progress = qs('#s-progress-indicator')
|
||||
|
||||
configSolutionTimeline
|
||||
.to(boxes, 1, {})
|
||||
.to(lines, 1, { css: { strokeDashoffset: 0 } }, 'start')
|
||||
.to(boxes, 0.5, { opacity: 1 }, '-=0.4')
|
||||
.to(progress, 1, { width: 40 }, 'start')
|
||||
.to(dots, 0.25, { opacity: 1 }, '-=0.5')
|
||||
.to(progress, 2, {})
|
||||
.to(lines, 0.5, { opacity: 0 }, 'reset')
|
||||
.to(boxes, 0.5, { opacity: 0.5 }, 'reset')
|
||||
.to(progress, 0.5, { opacity: 0 }, 'reset')
|
||||
.to(dots, 0.5, { opacity: 0 }, 'reset')
|
||||
.pause()
|
||||
|
||||
//
|
||||
// configuration page
|
||||
//
|
||||
|
|
@ -111,5 +8,436 @@ configSolutionTimeline
|
|||
var $configChallenge = qs('#configuration-challenge-animation')
|
||||
var $configSolution = qs('#configuration-solution-animation')
|
||||
|
||||
$configChallenge.classList.add('active')
|
||||
configChallengeTimeline.play()
|
||||
if ($configChallenge) {
|
||||
// challenge animation
|
||||
|
||||
var configChallengeTimeline = new TimelineLite({
|
||||
onComplete: function() {
|
||||
$configChallenge.classList.remove('active')
|
||||
$configSolution.classList.add('active')
|
||||
configSolutionTimeline.restart()
|
||||
}
|
||||
})
|
||||
|
||||
var line1 = qs('#c-line-1')
|
||||
var line2 = qs('#c-line-2')
|
||||
var line3 = qs('#c-line-3')
|
||||
var line4 = qs('#c-line-4')
|
||||
var line5 = qs('#c-line-5')
|
||||
var line6 = qs('#c-line-6')
|
||||
var line7 = qs('#c-line-7')
|
||||
var line8 = qs('#c-line-8')
|
||||
var box1 = qs('#c-box-1')
|
||||
var box2 = qs('#c-box-2')
|
||||
var box3 = qs('#c-box-3')
|
||||
var box4 = qs('#c-box-4')
|
||||
var box5 = qs('#c-box-5')
|
||||
var box6 = qs('#c-box-6')
|
||||
var box7 = qs('#c-box-7')
|
||||
var box8 = qs('#c-box-8')
|
||||
var progressBar = qs('#c-loading-bar > rect:last-child')
|
||||
var cog = qs('#c-configuration-server > g > path')
|
||||
|
||||
configChallengeTimeline
|
||||
.to(box1, 1, {})
|
||||
.staggerTo(
|
||||
[line1, line2, line3, line4, line5, line6, line7, line8],
|
||||
1.5,
|
||||
{ css: { strokeDashoffset: 0 } },
|
||||
0.3,
|
||||
'start'
|
||||
)
|
||||
.staggerTo(
|
||||
[box1, box2, box3, box4, box5, box6, box7, box8],
|
||||
0.3,
|
||||
{ opacity: 1 },
|
||||
0.3,
|
||||
'-=2.5'
|
||||
)
|
||||
.to(progressBar, 3.5, { width: 40 }, 'start')
|
||||
.to(
|
||||
cog,
|
||||
3.5,
|
||||
{ rotation: 360, svgOrigin: '136px 127px', ease: Power1.easeOut },
|
||||
'start'
|
||||
)
|
||||
.to(line1, 2, {})
|
||||
.to(
|
||||
[line1, line2, line3, line4, line5, line6, line7, line8, progressBar],
|
||||
0.5,
|
||||
{ opacity: 0 },
|
||||
'reset'
|
||||
)
|
||||
.to(
|
||||
[box1, box2, box3, box4, box5, box6, box7, box8],
|
||||
0.5,
|
||||
{ opacity: 0.5 },
|
||||
'reset'
|
||||
)
|
||||
.pause()
|
||||
|
||||
// solution animation
|
||||
|
||||
var configSolutionTimeline = new TimelineLite({
|
||||
onComplete: function() {
|
||||
$configSolution.classList.remove('active')
|
||||
$configChallenge.classList.add('active')
|
||||
configChallengeTimeline.restart()
|
||||
}
|
||||
})
|
||||
|
||||
var lines = qsa(
|
||||
'#s-line-1, #s-line-2, #s-line-3, #s-line-4, #s-line-5, #s-line-6, #s-line-7, #s-line-8'
|
||||
)
|
||||
var dots = qs('#s-dots')
|
||||
var boxes = qsa(
|
||||
'#s-service-box-1, #s-service-box-2, #s-service-box-3, #s-service-box-4, #s-service-box-5, #s-service-box-6, #s-service-box-7, #s-service-box-8'
|
||||
)
|
||||
var progress = qs('#s-progress-indicator')
|
||||
|
||||
configSolutionTimeline
|
||||
.to(boxes, 1, {})
|
||||
.to(lines, 1, { css: { strokeDashoffset: 0 } }, 'start')
|
||||
.to(boxes, 0.5, { opacity: 1 }, '-=0.4')
|
||||
.to(progress, 1, { width: 40 }, 'start')
|
||||
.to(dots, 0.25, { opacity: 1 }, '-=0.5')
|
||||
.to(progress, 2, {})
|
||||
.to(lines, 0.5, { opacity: 0 }, 'reset')
|
||||
.to(boxes, 0.5, { opacity: 0.5 }, 'reset')
|
||||
.to(progress, 0.5, { opacity: 0 }, 'reset')
|
||||
.to(dots, 0.5, { opacity: 0 }, 'reset')
|
||||
.pause()
|
||||
|
||||
// kick off
|
||||
$configChallenge.classList.add('active')
|
||||
configChallengeTimeline.play()
|
||||
}
|
||||
|
||||
//
|
||||
// discovery page
|
||||
//
|
||||
|
||||
var $discoveryChallenge = qs('#discovery-challenge-animation')
|
||||
var $discoverySolution = qs('#discovery-solution-animation')
|
||||
|
||||
if ($discoveryChallenge) {
|
||||
// challenge animation
|
||||
var discoveryChallengeTimeline = new TimelineLite({
|
||||
onComplete: function() {
|
||||
$discoveryChallenge.classList.remove('active')
|
||||
$discoverySolution.classList.add('active')
|
||||
discoverySolutionTimeline.restart()
|
||||
}
|
||||
})
|
||||
|
||||
// First, we get each of the elements we need to animate
|
||||
var box = qs('#c-active-box')
|
||||
var leftPlacement = qs('#c-box-left-placement')
|
||||
var rightPlacement = qs('#c-box-right-placement')
|
||||
var leftConnectionLines = qsa(
|
||||
'#c-line-top-left > *, #c-line-bottom-left > *, #c-line-horizontal-left > *, #c-line-vertical-down > *'
|
||||
)
|
||||
var rightConnectionLines = qsa(
|
||||
'#c-line-top-right > *, #c-line-bottom-right > *, #c-line-horizontal-left > *, #c-line-vertical-down > *, #c-line-horizontal-right > *'
|
||||
)
|
||||
var leftConnectionTop = qs('#c-line-top-left')
|
||||
var leftConnectionBottom = qs('#c-line-bottom-left')
|
||||
var rightHorizontalConnection = qs('#c-line-horizontal-right')
|
||||
var rightConnectionTop = qs('#c-line-top-right')
|
||||
var rightConnectionBottom = qs('#c-line-bottom-right')
|
||||
var rightConnectionLinesStroke = qsa(
|
||||
'#c-line-top-right > *, #c-line-bottom-right > *, #c-line-horizontal-right > *, #c-line-horizontal-left > *, #c-line-vertical-down > *'
|
||||
)
|
||||
var leftConnectionLinesStroke = qsa(
|
||||
'#c-line-top-left > *, #c-line-bottom-left > *, #c-line-horizontal-left > *, #c-line-vertical-down > *'
|
||||
)
|
||||
var brokenLinkLeft = qs('#c-broken-link-left')
|
||||
var brokenLinkRight = qs('#c-broken-link-right')
|
||||
var computer = qs('#c-computer')
|
||||
var codeLines = qs('#c-computer > g')
|
||||
var toLoadBalancerDown = qsa(
|
||||
'#c-computer-to-load-balancers #c-arrow-down, #c-computer-to-load-balancers #c-circle'
|
||||
)
|
||||
var toLoadBalancerRight = qs('#c-computer-to-load-balancers #c-arrow-right')
|
||||
var toLoadBalancerLeft = qs('#c-computer-to-load-balancers #c-arrow-left')
|
||||
var toLoadBalancerRest = qs('#c-computer-to-load-balancers #c-edit-box')
|
||||
var progressBars = qsa(
|
||||
'#c-load-balancer-left > #c-progress-bar, #c-load-balancer-right > #c-progress-bar-2, #c-load-balancer-middle > #c-progress-bar-3'
|
||||
)
|
||||
var progressBarsBars = qsa(
|
||||
'#c-load-balancer-left > #c-progress-bar > *:last-child, #c-load-balancer-right > #c-progress-bar-2 > *:last-child, #c-load-balancer-middle > #c-progress-bar-3 > *:last-child'
|
||||
)
|
||||
var farLeftBoxBorder = qs('#c-box-far-left > path')
|
||||
|
||||
// Then, we run each step of the animation using GSAP's TimelineLine, a
|
||||
// fantastic way to set up a series of complex movements
|
||||
discoveryChallengeTimeline
|
||||
.to(box, 1, {})
|
||||
// box moves to new position
|
||||
.to(box, 1, { css: { transform: 'translate(96px, 48px)' } })
|
||||
.to(leftPlacement, 0.5, { css: { opacity: 1 } }, '-=1')
|
||||
.to(rightPlacement, 0.25, { css: { opacity: 0 } }, '-=0.25')
|
||||
// connection lines turn black
|
||||
.to(leftConnectionLines, 0.5, { css: { stroke: '#000' } })
|
||||
.to(farLeftBoxBorder, 0.5, { css: { fill: '#000' } }, '-=0.5')
|
||||
// broken link appears
|
||||
.to(
|
||||
leftConnectionTop,
|
||||
0.1,
|
||||
{
|
||||
css: { strokeDashoffset: 6 },
|
||||
ease: Linear.easeNone
|
||||
},
|
||||
'-=0.3'
|
||||
)
|
||||
.to(brokenLinkLeft, 0.2, { css: { opacity: 1 } }, '-=0.15')
|
||||
// computer appears and code is written
|
||||
.to(computer, 0.5, { css: { opacity: 1 } })
|
||||
.staggerFrom(
|
||||
codeLines,
|
||||
0.4,
|
||||
{
|
||||
css: { transform: 'translate(-64px, 0)', opacity: 0 }
|
||||
},
|
||||
0.1
|
||||
)
|
||||
.to(codeLines, 0.3, {
|
||||
css: { transform: 'translate(0, 0)', opacity: 1 }
|
||||
})
|
||||
// code moves to load balancers
|
||||
.to(toLoadBalancerRest, 0.4, { css: { opacity: 1 } })
|
||||
.to(toLoadBalancerLeft, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows')
|
||||
.to(toLoadBalancerRight, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows')
|
||||
.to(toLoadBalancerDown, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows')
|
||||
// load balancers progress bars, old broken link fades out
|
||||
.to(progressBars, 0.2, { css: { opacity: 1 } })
|
||||
.staggerTo(progressBarsBars, 1.5, { css: { width: 40 } }, 0.3)
|
||||
.to(
|
||||
[]
|
||||
.concat([].slice.call(toLoadBalancerRest))
|
||||
.concat([].slice.call(toLoadBalancerDown))
|
||||
.concat([
|
||||
toLoadBalancerRight,
|
||||
toLoadBalancerLeft,
|
||||
computer,
|
||||
brokenLinkLeft,
|
||||
leftConnectionTop,
|
||||
leftConnectionBottom
|
||||
]),
|
||||
0.5,
|
||||
{ css: { opacity: 0 } },
|
||||
'-=0.75'
|
||||
)
|
||||
.to(progressBars, 0.5, { css: { opacity: 0 } })
|
||||
// new connection is drawn
|
||||
.to(rightHorizontalConnection, 0.3, { css: { strokeDashoffset: 0 } })
|
||||
.to(rightConnectionTop, 0.2, {
|
||||
css: { strokeDashoffset: 0 },
|
||||
ease: Linear.easeNone
|
||||
})
|
||||
.to(rightConnectionBottom, 0.3, {
|
||||
css: { strokeDashoffset: 0 },
|
||||
ease: Linear.easeNone
|
||||
})
|
||||
// connection lines turn blue
|
||||
.to(
|
||||
rightConnectionLinesStroke,
|
||||
0.5,
|
||||
{ css: { stroke: '#3969ED' } },
|
||||
'-=0.3'
|
||||
)
|
||||
.to(farLeftBoxBorder, 0.5, { css: { fill: '#3969ED' } }, '-=0.5')
|
||||
// wait three seconds
|
||||
.to(box, 3, {})
|
||||
// box moves back to original position
|
||||
.to(box, 1, { css: { transform: 'translate(0, 0)' } }, 'loop2')
|
||||
.to(leftPlacement, 0.25, { css: { opacity: 0 } }, '-=0.25')
|
||||
.to(rightPlacement, 0.5, { css: { opacity: 1 } }, '-=0.5')
|
||||
// connection lines turn black
|
||||
.to(rightConnectionLines, 0.5, { css: { stroke: '#000' } })
|
||||
.to(farLeftBoxBorder, 0.5, { css: { fill: '#000' } }, '-=0.5')
|
||||
// broken link appears
|
||||
.to(
|
||||
rightConnectionTop,
|
||||
0.1,
|
||||
{
|
||||
css: { strokeDashoffset: 6 },
|
||||
ease: Linear.easeNone
|
||||
},
|
||||
'-=0.3'
|
||||
)
|
||||
.to(brokenLinkRight, 0.2, { css: { opacity: 1 } }, '-=0.15')
|
||||
// computer appears and code is written
|
||||
.from(codeLines, 0.1, { css: { opacity: 0 } })
|
||||
.to(computer, 0.5, { css: { opacity: 1 } }, '-=0.1')
|
||||
.staggerFromTo(
|
||||
codeLines,
|
||||
0.4,
|
||||
{ css: { transform: 'translate(-64px, 0)', opacity: 0 } },
|
||||
{ css: { transform: 'translate(0, 0)', opacity: 1 } },
|
||||
0.1
|
||||
)
|
||||
// code moves to load balancers
|
||||
.to(toLoadBalancerRest, 0.4, { css: { opacity: 1 } })
|
||||
.to(toLoadBalancerLeft, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows2')
|
||||
.to(
|
||||
toLoadBalancerRight,
|
||||
0.2,
|
||||
{ css: { opacity: 1 } },
|
||||
'loadBalancerArrows2'
|
||||
)
|
||||
.to(toLoadBalancerDown, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows2')
|
||||
// load balancers progress bars, old broken link fades out
|
||||
.to(progressBarsBars, 0.1, { css: { width: 0 } })
|
||||
.to(progressBars, 0.2, { css: { opacity: 1 } })
|
||||
.staggerFromTo(
|
||||
progressBarsBars,
|
||||
1.5,
|
||||
{ css: { width: 0 } },
|
||||
{ css: { width: 40 } },
|
||||
0.3
|
||||
)
|
||||
.to(
|
||||
[]
|
||||
.concat([].slice.call(toLoadBalancerRest))
|
||||
.concat([].slice.call(toLoadBalancerDown))
|
||||
.concat([
|
||||
toLoadBalancerRight,
|
||||
toLoadBalancerLeft,
|
||||
computer,
|
||||
brokenLinkRight,
|
||||
rightConnectionTop,
|
||||
rightConnectionBottom,
|
||||
rightHorizontalConnection
|
||||
]),
|
||||
0.5,
|
||||
{ css: { opacity: 0 } },
|
||||
'-=0.75'
|
||||
)
|
||||
.to(progressBars, 0.5, { css: { opacity: 0 } })
|
||||
// new connection is drawn
|
||||
.to(leftConnectionTop, 0.01, { css: { strokeDashoffset: 17 } })
|
||||
.to(leftConnectionBottom, 0.01, { css: { strokeDashoffset: 56 } })
|
||||
.to([leftConnectionTop, leftConnectionBottom], 0.01, {
|
||||
css: { opacity: 1 }
|
||||
})
|
||||
.to(leftConnectionTop, 0.2, {
|
||||
css: { strokeDashoffset: 0 },
|
||||
ease: Linear.easeNone
|
||||
})
|
||||
.to(leftConnectionBottom, 0.3, {
|
||||
css: { strokeDashoffset: 0 },
|
||||
ease: Linear.easeNone
|
||||
})
|
||||
// connection lines turn blue
|
||||
.to(leftConnectionLinesStroke, 0.5, { css: { stroke: '#3969ED' } }, '-=0.3')
|
||||
.to(farLeftBoxBorder, 0.5, { css: { fill: '#3969ED' } }, '-=0.5')
|
||||
.to(box, 2, {})
|
||||
.pause()
|
||||
|
||||
// solution animation
|
||||
var discoverySolutionTimeline = new TimelineLite({
|
||||
onComplete: function() {
|
||||
$discoverySolution.classList.remove('active')
|
||||
$discoveryChallenge.classList.add('active')
|
||||
discoveryChallengeTimeline.restart()
|
||||
}
|
||||
})
|
||||
|
||||
var inactiveBox = qs('#s-active-service-1')
|
||||
var inactiveBoxStroke = qs('#s-active-service-1 > path')
|
||||
var activeBox = qs('#s-active-service-2')
|
||||
var activeBoxStroke = qs('#s-active-service-2 > path')
|
||||
var leftPlacement = qs('#s-dotted-service-box-2')
|
||||
var rightPlacement = qs('#s-dotted-service-box-3')
|
||||
var leftConnectionLine = qs('#s-connected-line-1')
|
||||
var rightConnectionLine = qs('#s-connected-line-2')
|
||||
var dottedLineLeft = qs('#s-dotted-line-left')
|
||||
var dottedLineRight = qs('#s-dotted-lines-right')
|
||||
var dottedLineRightPrimary = qs('#s-dotted-lines-right > path:nth-child(2)')
|
||||
var dottedLineRightAlt = qs('#s-dotted-lines-right > path:last-child')
|
||||
var syncLeft = qs('#s-dynamic-sync-left')
|
||||
var syncRight = qs('#s-dynamic-sync-right')
|
||||
var syncSpinnerLeft = qs('#s-dynamic-sync-left > path')
|
||||
var syncSpinnerRight = qs('#s-dynamic-sync-right > path')
|
||||
|
||||
discoverySolutionTimeline
|
||||
.to(activeBox, 1, {})
|
||||
// box moves
|
||||
.to(activeBox, 0.5, { x: 96, y: 48 })
|
||||
.to(leftPlacement, 0.25, { css: { opacity: 1 } }, '-=0.5')
|
||||
.to(rightPlacement, 0.25, { css: { opacity: 0 } }, '-=0.1')
|
||||
// connection is broken
|
||||
.to(leftConnectionLine, 0.75, { css: { strokeDashoffset: 222 } }, '-=0.5')
|
||||
// box color changes to black
|
||||
.to(activeBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4')
|
||||
.to(inactiveBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4')
|
||||
// right sync lines appear
|
||||
.to(dottedLineRight, 0.4, { css: { opacity: 1 } })
|
||||
.to(syncRight, 0.2, { css: { opacity: 1 } }, '-=0.2')
|
||||
.to(syncSpinnerRight, 1, { rotation: 360, svgOrigin: '232px 127px' })
|
||||
// left sync lines appear
|
||||
.to(dottedLineLeft, 0.4, { css: { opacity: 1 } }, '-=0.6')
|
||||
.to(syncLeft, 0.2, { css: { opacity: 1 } }, '-=0.2')
|
||||
.to(syncSpinnerLeft, 1, { rotation: 360, svgOrigin: '88px 127px' })
|
||||
// connection is redrawn
|
||||
.to(rightConnectionLine, 0.75, { css: { strokeDashoffset: 0 } })
|
||||
// right sync lines disappear
|
||||
.to(dottedLineRight, 0.4, { css: { opacity: 0 } }, '-=1.2')
|
||||
.to(syncRight, 0.2, { css: { opacity: 0 } }, '-=1.2')
|
||||
// left sync lines disappear
|
||||
.to(dottedLineLeft, 0.4, { css: { opacity: 0 } }, '-=0.5')
|
||||
.to(syncLeft, 0.2, { css: { opacity: 0 } }, '-=0.5')
|
||||
// box color changes to pink
|
||||
.to(activeBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2')
|
||||
.to(inactiveBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2')
|
||||
// wait three seconds
|
||||
.to(activeBox, 3, {})
|
||||
// box moves
|
||||
.to(activeBox, 0.5, { x: 0, y: 0 })
|
||||
.to(leftPlacement, 0.25, { css: { opacity: 0 } }, '-=0.1')
|
||||
.to(rightPlacement, 0.25, { css: { opacity: 1 } }, '-=0.5')
|
||||
// connection is broken
|
||||
.to(rightConnectionLine, 0.75, { css: { strokeDashoffset: 270 } }, '-=0.5')
|
||||
// box color changes to black
|
||||
.to(activeBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4')
|
||||
.to(inactiveBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4')
|
||||
// right sync lines appear
|
||||
.to(dottedLineRightAlt, 0.01, { css: { opacity: 1 } })
|
||||
.to(dottedLineRightPrimary, 0.01, { css: { opacity: 0 } })
|
||||
.to(dottedLineRight, 0.4, { css: { opacity: 1 } })
|
||||
.to(syncRight, 0.2, { css: { opacity: 1 } }, '-=0.2')
|
||||
.fromTo(
|
||||
syncSpinnerRight,
|
||||
1,
|
||||
{ rotation: 0 },
|
||||
{ rotation: 360, svgOrigin: '232px 127px' }
|
||||
)
|
||||
// left sync lines appear
|
||||
.to(dottedLineLeft, 0.4, { css: { opacity: 1 } }, '-=0.6')
|
||||
.to(syncLeft, 0.2, { css: { opacity: 1 } }, '-=0.2')
|
||||
.fromTo(
|
||||
syncSpinnerLeft,
|
||||
1,
|
||||
{ rotation: 0 },
|
||||
{ rotation: 360, svgOrigin: '88px 127px' }
|
||||
)
|
||||
// connection is redrawn
|
||||
.to(leftConnectionLine, 0.75, { css: { strokeDashoffset: 0 } })
|
||||
// right sync lines disappear
|
||||
.to(dottedLineRight, 0.4, { css: { opacity: 0 } }, '-=1.2')
|
||||
.to(syncRight, 0.2, { css: { opacity: 0 } }, '-=1.2')
|
||||
// left sync lines disappear
|
||||
.to(dottedLineLeft, 0.4, { css: { opacity: 0 } }, '-=0.5')
|
||||
.to(syncLeft, 0.2, { css: { opacity: 0 } }, '-=0.5')
|
||||
// box color changes to pink
|
||||
.to(activeBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2')
|
||||
.to(inactiveBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2')
|
||||
// wait three seconds
|
||||
.to(activeBox, 2, {})
|
||||
.pause()
|
||||
|
||||
// kick it off
|
||||
$discoveryChallenge.classList.add('active')
|
||||
discoveryChallengeTimeline.play()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,3 +67,129 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#discovery-challenge-animation {
|
||||
& #c-box-left-placement {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-broken-link-left {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-broken-link-right {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-computer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-computer-to-load-balancers #c-arrow-down {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-computer-to-load-balancers #c-arrow-right {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-computer-to-load-balancers #c-arrow-left {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-computer-to-load-balancers #c-circle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-computer-to-load-balancers #c-edit-box {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-load-balancer-left > #c-progress-bar,
|
||||
& #c-load-balancer-right > #c-progress-bar-2,
|
||||
& #c-load-balancer-middle > #c-progress-bar-3 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #c-load-balancer-left > #c-progress-bar > *:last-child,
|
||||
& #c-load-balancer-right > #c-progress-bar-2 > *:last-child,
|
||||
& #c-load-balancer-middle > #c-progress-bar-3 > *:last-child {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
& #c-line-horizontal-right {
|
||||
stroke-dasharray: 65;
|
||||
stroke-dashoffset: 65;
|
||||
}
|
||||
|
||||
& #c-line-horizontal-right > line {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
& #c-line-top-right {
|
||||
stroke-dasharray: 17;
|
||||
stroke-dashoffset: 17;
|
||||
}
|
||||
|
||||
& #c-line-bottom-right {
|
||||
stroke-dasharray: 80;
|
||||
stroke-dashoffset: 80;
|
||||
}
|
||||
|
||||
& #c-line-top-left {
|
||||
stroke-dasharray: 17;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
& #line-bottom-left {
|
||||
stroke-dasharray: 56;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
& #c-line-top-left > * {
|
||||
stroke: #3969ed;
|
||||
}
|
||||
& #c-line-bottom-left > * {
|
||||
stroke: #3969ed;
|
||||
}
|
||||
& #c-line-bottom-right > * {
|
||||
stroke: #000;
|
||||
}
|
||||
& #c-box-far-left > path {
|
||||
fill: #3969ed;
|
||||
}
|
||||
}
|
||||
|
||||
#discovery-solution-animation {
|
||||
& #s-active-service-3 {
|
||||
display: none;
|
||||
}
|
||||
& #s-connected-line-2 {
|
||||
stroke-dasharray: 270;
|
||||
stroke-dashoffset: 270;
|
||||
}
|
||||
& #s-connected-line-1 {
|
||||
stroke-dasharray: 222;
|
||||
}
|
||||
& #s-dotted-line-left {
|
||||
opacity: 0;
|
||||
}
|
||||
& #s-dotted-lines-right {
|
||||
opacity: 0;
|
||||
}
|
||||
& #s-dotted-lines-right > path:last-child {
|
||||
opacity: 0;
|
||||
}
|
||||
& #s-dynamic-sync-right {
|
||||
opacity: 0;
|
||||
}
|
||||
& #s-dynamic-sync-left {
|
||||
opacity: 0;
|
||||
}
|
||||
& #s-dynamic-sync-left > path {
|
||||
transform-origin: 88px 127px;
|
||||
}
|
||||
& #s-dotted-service-box-2 {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,14 +34,18 @@ description: |-
|
|||
<span class='dot'></span>
|
||||
<h3>The Challenge</h3>
|
||||
<span class='sub-heading'>Service load balancers aren't efficient in a dynamic world.</span>
|
||||
<img src='//placehold.it/516x314'>
|
||||
<div id='discovery-challenge-animation' class='g-animation-block'>
|
||||
<%= inline_svg 'consul-connect/svgs/discovery-challenge.svg' %>
|
||||
</div>
|
||||
<p>Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class='dot'></span>
|
||||
<h3>The Solution</h3>
|
||||
<span class='sub-heading'>Service discovery for dynamic infrastructure.</span>
|
||||
<img src='//placehold.it/516x314'>
|
||||
<div id='discovery-solution-animation' class='g-animation-block'>
|
||||
<%= inline_svg 'consul-connect/svgs/discovery-solution.svg' %>
|
||||
</div>
|
||||
<p>Instead of load balancers, connectivity in dynamic infrastructure is best solved with service discovery. Service discovery uses a registry to keep a real-time list of services, their location, and their health. Services query the registry to discover the location of upstream services and then connect directly. This allows services to scale up/down and gracefully handle failure without a load balancer intermediary.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue