mirror of
https://github.com/status-im/consul.git
synced 2025-01-22 19:50:36 +00:00
first animation working 🎉
This commit is contained in:
Jeff Escalante
Jack Pearkes
parent
c6ce69c519
commit
0255cb6554
@ -0,0 +1,116 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 272 272">
|
||||
<defs>
|
||||
<style>.c-cls-1{isolation:isolate;}.c-cls-2,.c-cls-3,.c-cls-9{fill:none;}.c-cls-2,.c-cls-3{stroke:#b5b8c4;}.c-cls-2,.c-cls-3,.c-cls-4{stroke-linecap:round;stroke-miterlimit:10;}.c-cls-2{stroke-dasharray:1 3;}.c-cls-10,.c-cls-11,.c-cls-4,.c-cls-8{fill:#fff;}.c-cls-4{stroke:#000;stroke-width:2px;}.c-cls-5{opacity:0.12;}.c-cls-6{fill:url(#c-linear-gradient);}.c-cls-7{opacity:0.88;}.c-cls-10{opacity:0.32;}.c-cls-11{opacity:0.9;}.c-cls-12{fill:#252937;}</style>
|
||||
<linearGradient id="c-linear-gradient" x1="96.59" y1="96.77" x2="175.41" y2="175.59" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#252937" />
|
||||
<stop offset="1" />
|
||||
</linearGradient>
|
||||
<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="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 Configuration_Challenge_dev</title>
|
||||
<g class="c-cls-1">
|
||||
<g id="c-service-configuration-challenge-dev">
|
||||
<g id="c-dotted-lines-2" data-name="dotted-lines">
|
||||
<line class="c-cls-2" x1="136" y1="228" x2="136" y2="176" />
|
||||
<line class="c-cls-3" x1="136.5" y1="96.5" x2="136.5" y2="96" />
|
||||
<line class="c-cls-2" x1="136.5" y1="93" x2="136.5" y2="46.5" />
|
||||
<line class="c-cls-3" x1="136.5" y1="45" x2="136.5" y2="44.5" />
|
||||
<line class="c-cls-2" x1="228" y1="136" x2="176" y2="136" />
|
||||
<line class="c-cls-2" x1="44" y1="136" x2="96" y2="136" />
|
||||
<line class="c-cls-2" x1="57" y1="215" x2="97.72" y2="174.28" />
|
||||
<line class="c-cls-2" x1="174.28" y1="174.28" x2="215" y2="215" />
|
||||
<line class="c-cls-2" x1="57" y1="57" x2="97.72" y2="97.72" />
|
||||
<line class="c-cls-2" x1="215" y1="57" x2="174.28" y2="97.72" />
|
||||
</g>
|
||||
<g id="c-configuration-lines">
|
||||
<line id="c-line-8" class="c-cls-4" x1="97.72" y1="97.72" x2="53" y2="53" />
|
||||
<line id="c-line-7" class="c-cls-4" x1="96" y1="136" x2="39" y2="136" />
|
||||
<line id="c-line-6" class="c-cls-4" x1="97.72" y1="174.28" x2="53" y2="219" />
|
||||
<line id="c-line-5" class="c-cls-4" x1="136" y1="176" x2="136" y2="233" />
|
||||
<line id="c-line-4" class="c-cls-4" x1="174.28" y1="174.28" x2="219" y2="219" />
|
||||
<line id="c-line-3" class="c-cls-4" x1="176" y1="136" x2="233" y2="136" />
|
||||
<line id="c-line-2" class="c-cls-4" x1="174.28" y1="97.72" x2="219" y2="53" />
|
||||
<line id="c-line-1" class="c-cls-4" x1="136.5" y1="96.5" x2="136.5" y2="39.5" />
|
||||
</g>
|
||||
<g id="c-configuration-server">
|
||||
<image class="c-cls-5" width="98" height="99" transform="translate(87 90)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABjCAYAAABg+dWrAAAACXBIWXMAAAsSAAALEgHS3X78AAAEqklEQVR4Xu2d3W7bRhBGDx0lstPECBIg7/+CbQM7liX/sRezox0ul2JaFOig/A4wkERRFDBHM7vUzQzjOCL+e3ZrJ7QMwzCsnSNg/Ju/8OHS+U3SWwES0qdN6Pn1JTndiggChk6AJKwxhsdzeFp7QmYiigSPq060UsSUmPy3TozDMMxkTEQ0Et6V2IXwYy5k8nG2Sa8VvQGvJV5C+DFaGb3W5BJ2wIcS+xLvqUJaGRIxlfACPAOnEk8lKO/3KyJUwxWW6A/ANfAxxE05/r6coxZV8Xb0igl4Ah6BQ4h43qRFtRXhIrwaPgK3IT5hMvZMq2LrMuKa8IpVwCPwE7ij5tnfP68XfoFLIvZUEd+Ar8AXTMY1VhW+gIua3GfgiEn4geUJaqt6Ls8nP94oIramVsRX4Dsm5LYc96pQRUzb0glrQ3dYV4EqxyN2kout6R1m8gargC+YhO/UqtiXz0tEFfGCifiJdQ2wteIBuKeurbNd5w7o3UHHXZPLuKUK+Yx9kUQYUcQR+5FSnt9TNzm+4zznaxiGYRzHsVcRbVXsqbunT5iEz9jFd/TvKbaGL9Qv1DXhhOXsmrr1X9zgtGuEP0YZUYhLuWG6YMfPbw3f+fhCTXmM917tjXDMdXeNiEQhLiXeZfvNnSqiVgRYVcR/Itq/hrpcEgFTGQNzOfFLtoxXRe//uFUJsC4C5i2rLa3VL9kIa3m6yNLN2K8kd+39LbKWk8W86q44CRKRBIlIgkQkQSKSIBFJkIgkSEQSJCIJEpEEiUiCRCRBIpIgEUmQiCRIRBIkIgkSkQSJSIJEJEEikiARSZCIJEhEEiQiCRKRBIlIgkQkQSKSIBFJkIgkSEQSJCIJEpEEiUiCRCRBIpIgEUmQiCRIRBIkIgkSkQSJSIJEJEEikiARSZCIJEhEEiQiCRKRBIlIgkQkQSKSIBFJkIgkSEQSJCIJEpEEiUiCRCRBIpIgEUlYEuHDiwiPS++LylJeYi67eVsb5NFeoL2QhBhLeVn7QZ9ZEwH1Yr2RwD5XZ22Axf+dS/n5pR9rT0Q0uTQO+Dl81tvbVmV4kn3qlo/AbEcnRykzMVFEW1ox+T4C+IgNQ43zNyXCcBGPJY7UvEUpbZ6BImIcx7FMZ4wl5uOAfRLtAzb60acOelVcsV0JjuftBcvVPZarh/L6hOVrNrl3aYyyl02UcCgX/kGVcKKOyJSIqQif3PsnlrN7LIdRxqw9ta0pXtAHY7sEn0R7An6jzt6UiHneHrCc/U6V8UhtU7NFvLdY+wXjOGBfE54w2z4EVWOUjdhJ2h/wH1gOvSpcxIRWhPcvN3vAkg1WVgfqLOt2Eu1WZYzh0Tc4saXfUUXEipjIOIsIC7Yv1E/UHZEPzPbFOs4phe1KcOLOybf3vsk5lPDW5Av2eaGG/mIdd0xQt2VHrB3FabRRwFZl9Lb9nr8nTIhvY+POabJYD0GKHbCquCrhCY9Te5dmMkvEdMPT3gTHG7u3sUn8TAScZUQhMfw4bDf5S8QWFe/JYoytBFgQARMZME28dknrjCGgLsxdCXBBxPkEE3J+ufBcVNpWZU9WEr0qokcjRzSsJb3HPxIh/n3+Ak0Iz9hTuvIOAAAAAElFTkSuQmCC" />
|
||||
<rect class="c-cls-6" x="96" y="96.18" width="80" height="80" rx="2" ry="2" />
|
||||
<g class="c-cls-7">
|
||||
<path class="c-cls-8" d="M136.08,138.93a2.75,2.75,0,0,1-2.75-2.75.94.94,0,0,0-.59-.9,1.17,1.17,0,0,0-.42-.09.87.87,0,0,0-.62.26,2.83,2.83,0,0,1-2,.85,2.68,2.68,0,0,1-1.92-.8,2.76,2.76,0,0,1,0-3.89.93.93,0,0,0,.23-1.05.89.89,0,0,0-.82-.55H127a2.75,2.75,0,0,1,0-5.5.94.94,0,0,0,.9-.59.93.93,0,0,0-.17-1,2.78,2.78,0,0,1-.86-2,2.75,2.75,0,0,1,4.7-2,1,1,0,0,0,.7.31.89.89,0,0,0,.35-.08l.15,0a.89.89,0,0,0,.48-.77v-.17a2.75,2.75,0,0,1,5.5,0,.93.93,0,0,0,.55.91,1,1,0,0,0,.37.08.84.84,0,0,0,.62-.26,2.82,2.82,0,0,1,2-.86,2.75,2.75,0,0,1,2,4.7.93.93,0,0,0-.23,1,.57.57,0,0,1,0,.14.91.91,0,0,0,.78.49H145a2.75,2.75,0,0,1,0,5.5.93.93,0,0,0-.91.55.89.89,0,0,0,.18,1,2.82,2.82,0,0,1,.86,2,2.75,2.75,0,0,1-2.76,2.75h0a2.72,2.72,0,0,1-1.94-.8,1,1,0,0,0-.7-.31.93.93,0,0,0-.9.9v.17A2.75,2.75,0,0,1,136.08,138.93Zm-3.73-5.24a2.52,2.52,0,0,1,2.48,2.38v.11a1.25,1.25,0,0,0,2.5,0V136a2.39,2.39,0,0,1,1.45-2.2,2.34,2.34,0,0,1,1-.2,2.37,2.37,0,0,1,1.67.68,1.38,1.38,0,0,0,1,.43,1.22,1.22,0,0,0,.86-.36,1.25,1.25,0,0,0,0-1.77,2.43,2.43,0,0,1-.55-2.71,2.39,2.39,0,0,1,2.2-1.45,1.27,1.27,0,0,0,1.34-1.25,1.25,1.25,0,0,0-1.25-1.25h-.17a2.43,2.43,0,0,1-2.2-1.45.53.53,0,0,1,0-.2,2.43,2.43,0,0,1,.53-2.53,1.28,1.28,0,0,0,.44-1,1.22,1.22,0,0,0-.37-.88,1.24,1.24,0,0,0-1.77,0,2.53,2.53,0,0,1-1.76.75,2.41,2.41,0,0,1-2.4-2.4,1.27,1.27,0,0,0-1.25-1.34,1.25,1.25,0,0,0-1.25,1.25v.17a2.4,2.4,0,0,1-1.46,2.2.59.59,0,0,1-.19,0,2.72,2.72,0,0,1-.85.15,2.37,2.37,0,0,1-1.67-.68,1.31,1.31,0,0,0-1-.44,1.25,1.25,0,0,0-.89,2.14,2.43,2.43,0,0,1,.55,2.71,2.38,2.38,0,0,1-2.18,1.53H127a1.25,1.25,0,0,0,0,2.5h.17a2.41,2.41,0,0,1,1.72,4.09,1.34,1.34,0,0,0-.44,1,1.24,1.24,0,0,0,.37.89,1.24,1.24,0,0,0,1.77,0A2.53,2.53,0,0,1,132.35,133.69Zm3.65-2.76a3.75,3.75,0,1,1,3.75-3.75A3.75,3.75,0,0,1,136,130.93Zm0-6a2.25,2.25,0,1,0,2.25,2.25A2.25,2.25,0,0,0,136,124.93Z" />
|
||||
<rect class="c-cls-9" x="124" y="115.18" width="24" height="24" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-loading-bar">
|
||||
<rect class="c-cls-10" x="116" y="152" width="40" height="4" />
|
||||
<rect class="c-cls-11" x="116" y="152" width="12" height="4" />
|
||||
</g>
|
||||
<g id="c-service-boxes">
|
||||
<g id="c-box-1">
|
||||
<use class="c-cls-5" transform="translate(111 2)" xlink:href="#c-image" href="#c-image" />
|
||||
<rect class="c-cls-8" x="120" y="8" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-1" class="c-cls-7">
|
||||
<path class="c-cls-12" d="M143.8,17.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,1,1,.94-.94L136,24.39l6.86-6.86A.66.66,0,0,1,143.8,17.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66V19.33a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V24A.67.67,0,0,0,142,23.33Z" />
|
||||
<rect class="c-cls-9" x="128" y="16" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-2">
|
||||
<use class="c-cls-5" transform="translate(209 16)" xlink:href="#c-image-2" />
|
||||
<rect class="c-cls-8" x="218" y="22" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-5">
|
||||
<path class="c-cls-12" d="M241.8,31.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L234,38.39l6.86-6.86A.66.66,0,0,1,241.8,31.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66V33.33a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V38A.67.67,0,0,0,240,37.33Z" />
|
||||
<rect class="c-cls-9" x="226" y="30" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-3">
|
||||
<use class="c-cls-5" transform="translate(223 114)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-8" x="232" y="120" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-3">
|
||||
<path class="c-cls-12" d="M255.8,129.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94l1.53,1.53,6.86-6.86A.66.66,0,0,1,255.8,129.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V136A.67.67,0,0,0,254,135.33Z" />
|
||||
<rect class="c-cls-9" x="240" y="128" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-4">
|
||||
<use class="c-cls-5" transform="translate(209 212)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-8" x="218" y="218" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-7">
|
||||
<path class="c-cls-12" d="M241.8,227.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94l1.53,1.53,6.86-6.86A.66.66,0,0,1,241.8,227.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V234A.67.67,0,0,0,240,233.33Z" />
|
||||
<rect class="c-cls-9" x="226" y="226" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-5">
|
||||
<use class="c-cls-5" transform="translate(111 226)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-8" x="120" y="232" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-2">
|
||||
<path class="c-cls-12" d="M143.8,241.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94l1.53,1.53,6.86-6.86A.66.66,0,0,1,143.8,241.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V248A.67.67,0,0,0,142,247.33Z" />
|
||||
<rect class="c-cls-9" x="128" y="240" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-6">
|
||||
<use class="c-cls-5" transform="translate(13 212)" xlink:href="#c-image-2" />
|
||||
<rect class="c-cls-8" x="22" y="218" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-8">
|
||||
<path class="c-cls-12" d="M45.8,227.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L38,234.39l6.86-6.86A.66.66,0,0,1,45.8,227.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66H33.33a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34H33.33a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V234A.67.67,0,0,0,44,233.33Z" />
|
||||
<rect class="c-cls-9" x="30" y="226" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-7">
|
||||
<use class="c-cls-5" transform="translate(-1 114)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-8" x="8" y="120" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-4">
|
||||
<path class="c-cls-12" d="M31.8,129.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L24,136.39l6.86-6.86A.66.66,0,0,1,31.8,129.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66H19.33a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34H19.33a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V136A.67.67,0,0,0,30,135.33Z" />
|
||||
<rect class="c-cls-9" x="16" y="128" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="c-box-8">
|
||||
<use class="c-cls-5" transform="translate(13 16)" xlink:href="#c-image" />
|
||||
<rect class="c-cls-8" x="22" y="22" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="c-check-6">
|
||||
<path class="c-cls-12" d="M45.8,31.53a.65.65,0,0,1,0,.94L38.47,39.8a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L38,38.39l6.86-6.86A.66.66,0,0,1,45.8,31.53ZM44,37.33a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66H33.33a.67.67,0,0,1-.66-.66V33.33a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34H33.33a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V38A.67.67,0,0,0,44,37.33Z" />
|
||||
<rect class="c-cls-9" x="30" y="30" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,147 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 272 272">
|
||||
<defs>
|
||||
<style>.s-cls-1{isolation:isolate;}.s-cls-2,.s-cls-3,.s-cls-4,.s-cls-9{fill:none;}.s-cls-2,.s-cls-3,.s-cls-4{stroke:#b5b8c4;}.s-cls-10,.s-cls-2,.s-cls-3,.s-cls-4,.s-cls-5{stroke-linecap:round;stroke-miterlimit:10;}.s-cls-3{stroke-dasharray:1 3;}.s-cls-4{stroke-dasharray:1.03 3.08;}.s-cls-10,.s-cls-13,.s-cls-14,.s-cls-15,.s-cls-16,.s-cls-5,.s-cls-7{fill:#fff;}.s-cls-10,.s-cls-5{stroke:#ca2171;}.s-cls-5{stroke-width:2px;}.s-cls-6{opacity:0.12}.s-cls-8{fill:#ca2171;}.s-cls-10{stroke-width:1.5px;}.s-cls-11{fill:url(#s-linear-gradient);}.s-cls-12{opacity:0.88;}.s-cls-13,.s-cls-14{fill-rule:evenodd;}.s-cls-13{opacity:0.7;}.s-cls-15{opacity:0.32;}.s-cls-16{opacity:0.9;}</style>
|
||||
<linearGradient id="s-linear-gradient" x1="107.59" y1="107.77" x2="164.16" y2="164.34" gradientTransform="translate(0.13 -0.05)" 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,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-2" width="50" height="51" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAzCAYAAADVY1sUAAAACXBIWXMAAAsSAAALEgHS3X78AAADv0lEQVRoQ+2a604jMQxGzyyFAgsIsRLv/4K7i7i0hQLZH87XeDKZCZRUW6FasqadS+IT20nrTBdC4DvIrHZDLl3XdbV7Wkj45Ah3U/dnRucAuwLKDdp8n4IresQBdAWF3UFIgjtuVGaVgAYgEUL6o6A5VGvxxr8XNHRdN4DpgWQQR1FnTnVOQL3H2U5KofQOvEV9dapz5DCl0BLEDDiJOo96TALKYVqAeIhXYA08R32JSrxe9ojzxg/M0BPgFDh3ehbPH8d7WoaYwukNA3gBlsDCqb+vF2K5RwQib5wDV04vMJg5fa98FcbnxBvmgSXwCNyT7NT1Tb6ogSmQOQnkF3ADXGMwp5hXNAG0EBm3BlYYxB3WD6RQW8fPvcHzID60cpAb4BYDuorn5ZWWHpE3FpgnTuJ1wUl9JEyG1hE2EmeYB64xiFuSV+bx+ZYgrxjII+Z1sFx5Ah5IuTmYNWdAaQX3s5ZgrkhAl1hHuwBZYYNE/PxAmmQ0Y27667quCyGEkkdyr8xJs9cFBnGJNT6jvKZ8VpTor6SceMb6PCVN/aMTTJ4jOnoYDySoM/oJ75//rGjmUaITj37tyhdib2sxR7x4IEH5VV6LY0uPgHnF/5LIfxoVZQoE+jAdQzjfyVdEXin9nqtCQB0EhiGXu7bayQel1s+kjC1mHzGudn0bqbU5alerVfm/ywFk3+QAsm9yANk3OYDsmxxA9k0OIPsm3x5ExQDccex6Sxlr19tS7Lf2xypvIG+oFdBYu7UB3UgNBFJjpRK//mfX/hDVZKr9Dw1WCcSPxFh5f+2ebV1FUUk030rwUAMwD5K71huvkv4KKy77emxrkGXUFalfD5XbCUSQEEKI1UbvYpX3VRl/wkqZqgLKK62qKCrQLbHq4iPW5xKzYU2hEj+2rSC3eYhFbPiOBPFMKpm2BlEl/i/W5wNmg4cZhFceWr5BbbQIQpXxZ+AnqRbbGkRF6zvgNwlmSQqzwSRQSnY16Mv7yokXbLRUVN7FtkI+gH8wG+QVgfQkB1H8aWQWmLFgbl2Q9kbyyvi2MMEdNcH4kL4ngXiP9GA2IC7hlegvpBlJGzBKdl/3he0hJH7m8pugfg9RoaWEn9zV9WuHKuOaFlf0N0J7+xRsD1Oa9v2GqN/R9TNXL9kHr3BEr6iYPLbXXiostwLxgzm2ML7nLwwU30XJtqpz1XnY3vgx8SHm1zSvofQKx+hLNQ4G+oa3mKVqEpxCSuwiBEyAbG4Yf0NoVzB5qNmHiqFVkJLs+p2tmtEl2QpkH+UftbnPeFtYpkUAAAAASUVORK5CYII=" />
|
||||
</defs>
|
||||
<title>Service Configuration_Solution_dev</title>
|
||||
<g class="s-cls-1">
|
||||
<g id="service-configuration-solution-dev">
|
||||
<g id="dotted-lines">
|
||||
<line class="s-cls-2" x1="136" y1="92" x2="136" y2="91.5" />
|
||||
<line class="s-cls-3" x1="136" y1="88.5" x2="136" y2="50" />
|
||||
<line class="s-cls-2" x1="136" y1="48.5" x2="136" y2="48" />
|
||||
<line class="s-cls-2" x1="136" y1="224" x2="136" y2="223.5" />
|
||||
<line class="s-cls-3" x1="136" y1="220.5" x2="136" y2="182" />
|
||||
<line class="s-cls-2" x1="136" y1="180.5" x2="136" y2="180" />
|
||||
<line class="s-cls-2" x1="180" y1="136" x2="180.5" y2="136" />
|
||||
<line class="s-cls-3" x1="183.5" y1="136" x2="222" y2="136" />
|
||||
<line class="s-cls-2" x1="223.5" y1="136" x2="224" y2="136" />
|
||||
<line class="s-cls-2" x1="48" y1="136" x2="48.5" y2="136" />
|
||||
<line class="s-cls-3" x1="51.5" y1="136" x2="90" y2="136" />
|
||||
<line class="s-cls-2" x1="91.5" y1="136" x2="92" y2="136" />
|
||||
<line class="s-cls-2" x1="167.28" y1="104.72" x2="167.64" y2="104.36" />
|
||||
<line class="s-cls-4" x1="169.82" y1="102.18" x2="197.78" y2="74.22" />
|
||||
<line class="s-cls-2" x1="198.87" y1="73.13" x2="199.23" y2="72.77" />
|
||||
<line class="s-cls-2" x1="72.77" y1="199.23" x2="73.13" y2="198.87" />
|
||||
<line class="s-cls-4" x1="75.31" y1="196.69" x2="103.27" y2="168.73" />
|
||||
<line class="s-cls-2" x1="104.36" y1="167.64" x2="104.72" y2="167.28" />
|
||||
<line class="s-cls-2" x1="167.28" y1="167.28" x2="167.64" y2="167.64" />
|
||||
<line class="s-cls-4" x1="169.82" y1="169.82" x2="197.78" y2="197.78" />
|
||||
<line class="s-cls-2" x1="198.87" y1="198.87" x2="199.23" y2="199.23" />
|
||||
<line class="s-cls-2" x1="72.77" y1="72.77" x2="73.13" y2="73.13" />
|
||||
<line class="s-cls-4" x1="75.31" y1="75.31" x2="103.27" y2="103.27" />
|
||||
<line class="s-cls-2" x1="104.36" y1="104.36" x2="104.72" y2="104.72" />
|
||||
</g>
|
||||
<g id="configuration_lines" data-name="configuration lines">
|
||||
<line id="line-1" class="s-cls-5" x1="136" y1="96" x2="136" y2="40" />
|
||||
<line id="line-5" class="s-cls-5" x1="136" y1="176" x2="136" y2="232" />
|
||||
<line id="line-3" class="s-cls-5" x1="176" y1="136" x2="232" y2="136" />
|
||||
<line id="line-7" class="s-cls-5" x1="96" y1="136" x2="40" y2="136" />
|
||||
<line id="line-2" class="s-cls-5" x1="164.28" y1="107.72" x2="205.23" y2="66.77" />
|
||||
<line id="line-6" class="s-cls-5" x1="107.72" y1="164.28" x2="66.77" y2="205.23" />
|
||||
<line id="line-4" class="s-cls-5" x1="164.28" y1="164.28" x2="205.23" y2="205.23" />
|
||||
<line id="line-8" class="s-cls-5" x1="107.72" y1="107.72" x2="66.77" y2="66.77" />
|
||||
</g>
|
||||
<g id="service-boxes">
|
||||
<g id="service-box-8">
|
||||
<use class="s-cls-6" transform="translate(27 30)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-7" x="36" y="36" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-8">
|
||||
<path class="s-cls-8" d="M59.8,45.53a.65.65,0,0,1,0,.94L52.47,53.8a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L52,52.39l6.86-6.86A.66.66,0,0,1,59.8,45.53ZM58,51.33a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66H47.33a.67.67,0,0,1-.66-.66V47.33a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34H47.33a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V52A.67.67,0,0,0,58,51.33Z" />
|
||||
<rect class="s-cls-9" x="44" y="44" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-7">
|
||||
<use class="s-cls-6" transform="translate(-1 114)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-7" x="8" y="120.18" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-7">
|
||||
<path class="s-cls-8" d="M31.8,129.71a.65.65,0,0,1,0,.94L24.47,138a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L24,136.57l6.86-6.86A.66.66,0,0,1,31.8,129.71Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66H19.33a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34H19.33a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2v-4.67A.67.67,0,0,0,30,135.51Z" />
|
||||
<rect class="s-cls-9" x="16" y="128.18" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-6">
|
||||
<use class="s-cls-6" transform="translate(27 198)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-7" x="36" y="204" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-6">
|
||||
<path class="s-cls-8" d="M59.8,213.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L52,220.39l6.86-6.86A.66.66,0,0,1,59.8,213.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66H47.33a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34H47.33a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V220A.67.67,0,0,0,58,219.33Z" />
|
||||
<rect class="s-cls-9" x="44" y="212" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-5">
|
||||
<use class="s-cls-6" transform="translate(111 226)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-7" x="120" y="232" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-5">
|
||||
<path class="s-cls-8" d="M143.8,241.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94l1.53,1.53,6.86-6.86A.66.66,0,0,1,143.8,241.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V248A.67.67,0,0,0,142,247.33Z" />
|
||||
<rect class="s-cls-9" x="128" y="240" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-4">
|
||||
<use class="s-cls-6" transform="translate(195 198)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-7" x="204" y="204" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-4">
|
||||
<path class="s-cls-8" d="M227.8,213.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94l1.53,1.53,6.86-6.86A.66.66,0,0,1,227.8,213.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V220A.67.67,0,0,0,226,219.33Z" />
|
||||
<rect class="s-cls-9" x="212" y="212" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-3">
|
||||
<use class="s-cls-6" transform="translate(223 114)" xlink:href="#s-image-2" />
|
||||
<rect class="s-cls-7" x="232" y="120.18" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-3">
|
||||
<path class="s-cls-8" d="M255.8,129.71a.65.65,0,0,1,0,.94L248.47,138a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94l1.53,1.53,6.86-6.86A.66.66,0,0,1,255.8,129.71Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66v-9.34a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2v-4.67A.67.67,0,0,0,254,135.51Z" />
|
||||
<rect class="s-cls-9" x="240" y="128.18" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-2">
|
||||
<use class="s-cls-6" transform="translate(195 30)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-7" x="204" y="36" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-2">
|
||||
<path class="s-cls-8" d="M227.8,45.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,0,1,.94-.94L220,52.39l6.86-6.86A.66.66,0,0,1,227.8,45.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66V47.33a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V52A.67.67,0,0,0,226,51.33Z" />
|
||||
<rect class="s-cls-9" x="212" y="44" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="service-box-1">
|
||||
<use class="s-cls-6" transform="translate(111 2)" xlink:href="#s-image" />
|
||||
<rect class="s-cls-7" x="120" y="8" width="32" height="32" rx="2" ry="2" />
|
||||
<g id="check-1">
|
||||
<path class="s-cls-8" d="M143.8,17.53a.65.65,0,0,1,0,.94l-7.33,7.33a.65.65,0,0,1-.94,0l-2-2a.66.66,0,1,1,.94-.94L136,24.39l6.86-6.86A.66.66,0,0,1,143.8,17.53Zm-1.8,5.8a.67.67,0,0,0-.67.67v4.67a.67.67,0,0,1-.66.66h-9.34a.67.67,0,0,1-.66-.66V19.33a.67.67,0,0,1,.66-.66h7.34a.67.67,0,0,0,0-1.34h-7.34a2,2,0,0,0-2,2v9.34a2,2,0,0,0,2,2h9.34a2,2,0,0,0,2-2V24A.67.67,0,0,0,142,23.33Z" />
|
||||
<rect class="s-cls-9" x="128" y="16" width="16" height="16" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="dots">
|
||||
<circle id="dot-8" class="s-cls-10" cx="67.13" cy="67.13" r="3.5" />
|
||||
<circle id="dot-7" class="s-cls-10" cx="40.5" cy="136" r="3.5" />
|
||||
<circle id="dot-6" class="s-cls-10" cx="67.13" cy="204.87" r="3.5" />
|
||||
<circle id="dot-5" class="s-cls-10" cx="136" cy="231.5" r="3.5" />
|
||||
<circle id="dot-4" class="s-cls-10" cx="204.87" cy="204.87" r="3.5" />
|
||||
<circle id="dot-3" class="s-cls-10" cx="231.5" cy="136" r="3.5" />
|
||||
<circle id="dot-2" class="s-cls-10" cx="204.87" cy="67.13" r="3.5" />
|
||||
<circle id="dot-1" class="s-cls-10" cx="136" cy="40.5" r="3.5" />
|
||||
</g>
|
||||
<g id="consul-service">
|
||||
<image class="s-cls-6" width="98" height="98" transform="translate(87 90)" xlink:href="data:image/png;base64,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" />
|
||||
<rect class="s-cls-11" x="96" y="96" width="80" height="80" rx="40" ry="40" />
|
||||
<g class="s-cls-12">
|
||||
<path class="s-cls-13" d="M136,130.68a2.72,2.72,0,1,1,2.71-2.72,2.7,2.7,0,0,1-2.71,2.72" />
|
||||
<path class="s-cls-14" d="M141.29,129.22a1.25,1.25,0,0,1,0-2.5,1.25,1.25,0,0,1,0,2.5" />
|
||||
<path class="s-cls-14" d="M145.87,130.4h0a1.15,1.15,0,1,1,0-.1.54.54,0,0,1,0,.1" />
|
||||
<path class="s-cls-14" d="M145,127.18a1.26,1.26,0,1,1,.93-1.51,1.35,1.35,0,0,1,0,.49,1.22,1.22,0,0,1-.94,1" />
|
||||
<path class="s-cls-14" d="M149.44,130.26a1.25,1.25,0,1,1-1-1.45,1.26,1.26,0,0,1,1.05,1.34.23.23,0,0,0,0,.11" />
|
||||
<path class="s-cls-14" d="M148.42,127.12a1.25,1.25,0,1,1,1-1.44,1.2,1.2,0,0,1,0,.33,1.24,1.24,0,0,1-1,1.11" />
|
||||
<path class="s-cls-14" d="M147.55,134.6h0a1.29,1.29,0,1,1,.15-.52,1.11,1.11,0,0,1-.15.52" />
|
||||
<path class="s-cls-14" d="M147.1,123.09a1.25,1.25,0,1,1,.47-1.71,1.2,1.2,0,0,1,.16.73,1.26,1.26,0,0,1-.63,1" />
|
||||
<path class="s-cls-7" d="M136.06,140.59A12.59,12.59,0,1,1,143.7,118l-1.54,2a10.06,10.06,0,1,0,0,16l1.54,2A12.48,12.48,0,0,1,136.06,140.59Z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="progress-bar">
|
||||
<rect id="progress-bg" class="s-cls-15" x="116" y="152" width="40" height="4" />
|
||||
<rect id="progress-indicator" class="s-cls-16" x="116" y="152" width="20" height="4" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
66
website/source/assets/javascripts/animations.js
Normal file
66
website/source/assets/javascripts/animations.js
Normal file
@ -0,0 +1,66 @@
|
||||
//
|
||||
// configuration challenge animation
|
||||
//
|
||||
|
||||
var qs = document.querySelector.bind(document)
|
||||
var t = new TimelineLite({
|
||||
onComplete: function() {
|
||||
this.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')
|
||||
|
||||
t
|
||||
.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, 1, {})
|
||||
.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'
|
||||
)
|
||||
.to(line1, 2, {})
|
||||
@ -6,4 +6,5 @@
|
||||
//= require hashicorp/analytics
|
||||
|
||||
//= require analytics
|
||||
|
||||
//= require gsap-custom
|
||||
//= require animations
|
||||
|
||||
49
website/source/assets/javascripts/gsap-custom.js
Normal file
49
website/source/assets/javascripts/gsap-custom.js
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,28 @@
|
||||
#configuration-challenge-animation {
|
||||
& #c-line-8,
|
||||
& #c-line-7,
|
||||
& #c-line-6,
|
||||
& #c-line-5,
|
||||
& #c-line-4,
|
||||
& #c-line-3,
|
||||
& #c-line-2,
|
||||
& #c-line-1 {
|
||||
stroke-dasharray: 64;
|
||||
stroke-dashoffset: 64;
|
||||
}
|
||||
|
||||
& #c-box-1,
|
||||
& #c-box-2,
|
||||
& #c-box-3,
|
||||
& #c-box-4,
|
||||
& #c-box-5,
|
||||
& #c-box-6,
|
||||
& #c-box-7,
|
||||
& #c-box-8 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
& #c-loading-bar > rect:last-child {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
@ -14,4 +14,6 @@
|
||||
@import 'components/_timeline';
|
||||
@import 'components/_use-cases';
|
||||
|
||||
@import 'pages/_home';
|
||||
@import 'pages/_home';
|
||||
|
||||
@import '_animations';
|
||||
|
||||
@ -34,14 +34,18 @@ description: |-
|
||||
<span class='dot'></span>
|
||||
<h3>The Challenge</h3>
|
||||
<span class='sub-heading'>Runtime configuration management loses performace at scale.</span>
|
||||
<img src='//placehold.it/516x314'>
|
||||
<div id='configuration-challenge-animation'>
|
||||
<%= inline_svg 'consul-connect/svgs/configuration-challenge.svg' %>
|
||||
</div>
|
||||
<p>Services have many runtime configurations, such as feature flags or maintenance modes, that need to be propagated in real time. Distributing these updates using configuration management or by re-deploying services can take minutes to hours. During these rollout periods, infrastructure can be out of sync and service configurations could be incorrect.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class='dot'></span>
|
||||
<h3>The Solution</h3>
|
||||
<span class='sub-heading'>Real-time runtime configuration for distributed applications.</span>
|
||||
<img src='//placehold.it/516x314'>
|
||||
<div id='configuration-solution-animation'>
|
||||
<%= inline_svg 'consul-connect/svgs/configuration-solution.svg' %>
|
||||
</div>
|
||||
<p>Consul can update service configurations across thousands of services in a globally distributed fleet in real time. Configuration can be stored in a hierarchical key/value store, and efficient edge triggers allow changes to be pushed to applications quickly.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user