lib/components/BrandExpansion.vue
<template>
<span
class="brand-expansion"
:style="style"
:class="{ 'brand-expansion--dark': dark, 'brand-expansion--animated': animated }"
>
<svg
v-if="mode === 'short'"
:width="width"
:height="height"
viewBox="0 0 106.166 52.917"
xmlns="http://www.w3.org/2000/svg"
>
<path class="triangle" d="m11.947 52.917 7.52-12.283 7.52 12.283Z" />
<path
class="globe"
d="M28.229 23.417c.298-1.504.485-3.092.554-4.726h5.091a14.367 14.367 0 0 1-1.286 4.726Zm1.474 4.105a14.488 14.488 0 0 1-4.053 2.861c.24-.388.47-.801.688-1.239.45-.897.841-1.875 1.173-2.917h3.342c-.355.45-.739.883-1.15 1.295m-8.83-4.105V18.69h5.097a27.764 27.764 0 0 1-.61 4.726Zm2.952 4.47c-.857 1.714-1.887 2.919-2.953 3.493v-5.153h3.67a16.722 16.722 0 0 1-.717 1.66m-8.716 0c-.26-.521-.5-1.076-.716-1.66h3.669v5.153c-1.066-.574-2.096-1.779-2.953-3.493m-2.145-9.196h5.098v4.726h-4.488a27.764 27.764 0 0 1-.61-4.726m-3.733 8.831a14.704 14.704 0 0 1-1.15-1.295h3.342c.332 1.042.724 2.02 1.172 2.917.22.438.449.851.689 1.24a14.48 14.48 0 0 1-4.053-2.862m-2.885-4.105a14.363 14.363 0 0 1-1.287-4.726h5.092c.069 1.634.256 3.222.554 4.726zm4.359-12.262a31.079 31.079 0 0 0-.554 4.726H5.06a14.363 14.363 0 0 1 1.287-4.726zM9.231 7.05a14.485 14.485 0 0 1 4.052-2.86c-.24.387-.469.8-.688 1.238-.448.898-.84 1.876-1.172 2.917H8.08c.355-.45.738-.883 1.15-1.295m8.83 4.105v4.726h-5.097c.075-1.652.281-3.244.61-4.726zm-2.952-4.47c.857-1.714 1.887-2.918 2.953-3.493v5.153h-3.67c.217-.583.456-1.138.717-1.66m8.716 0c.26.522.5 1.077.716 1.66h-3.669V3.192c1.066.575 2.096 1.78 2.953 3.493m2.145 9.196h-5.098v-4.726h4.488c.328 1.482.535 3.074.61 4.726m3.733-8.83c.411.411.795.844 1.15 1.294h-3.342a20.314 20.314 0 0 0-1.173-2.917 15.822 15.822 0 0 0-.688-1.239 14.49 14.49 0 0 1 4.053 2.861m2.885 4.105a14.367 14.367 0 0 1 1.286 4.726h-5.091a31.079 31.079 0 0 0-.554-4.726Zm-.898-6.092A17.173 17.173 0 0 0 19.467 0 17.173 17.173 0 0 0 7.244 5.063 17.174 17.174 0 0 0 2.18 17.286c0 4.618 1.798 8.959 5.063 12.223a17.173 17.173 0 0 0 12.223 5.064c4.617 0 8.958-1.799 12.223-5.064a17.173 17.173 0 0 0 5.063-12.223c0-4.617-1.798-8.958-5.063-12.223"
/>
<path class="plate" d="M0 36.198h38.934v2.81H0Z" />
<g class="main-text">
<path d="M48.51 7.923h7.164v37.07H48.51z" />
<path
d="M60.788 42.793c-1.626-1.698-2.439-4.028-2.439-6.991v-17.09c0-3.683.734-6.459 2.201-8.33 1.468-1.87 3.769-2.804 6.905-2.804 2.733 0 4.934.748 6.603 2.244 1.668 1.496 2.503 3.654 2.503 6.473v6.387h-7.38v-5.48c0-1.065-.129-1.799-.388-2.202-.259-.402-.705-.604-1.338-.604-.662 0-1.115.23-1.36.69-.244.461-.366 1.137-.366 2.029v18.6c0 .979.144 1.69.431 2.136.288.447.72.67 1.295.67 1.15 0 1.726-.935 1.726-2.806v-6.689h7.466v6.991c0 6.215-3.122 9.322-9.365 9.322-2.704 0-4.87-.848-6.494-2.546"
/>
<path d="M78.762 7.923h7.164v37.07h-7.164z" />
<path
d="M92.528 44.346a7.609 7.609 0 0 1-3.258-2.913c-.792-1.28-1.187-2.826-1.187-4.639V29.03h7.294v7.333c0 .662.136 1.186.41 1.575.273.388.697.582 1.273.582.546 0 .956-.18 1.23-.539.273-.36.41-.87.41-1.532V7.923h7.466v27.792c0 1.928-.382 3.619-1.144 5.071-.763 1.453-1.827 2.575-3.194 3.366-1.366.792-2.927 1.187-4.682 1.187-1.698 0-3.237-.331-4.618-.993"
/>
</g>
</svg>
<svg
v-else-if="mode === 'medium'"
:width="width"
:height="height"
viewBox="0 0 901.24 200"
xmlns="http://www.w3.org/2000/svg"
>
<path class="triangle" d="m45.153 200 28.423-46.424L101.999 200Z" />
<path
class="globe"
d="M 106.692 88.5051 C 107.819 82.8227 108.526 76.8189 108.786 70.6453 L 128.03 70.6453 C 127.431 76.8914 125.785 82.9146 123.168 88.5051 Z M 112.263 104.021 C 107.739 108.545 102.563 112.178 96.9466 114.835 C 97.8831 113.313 98.751 111.751 99.5476 110.152 C 101.244 106.76 102.725 103.064 103.979 99.1273 L 116.611 99.1273 C 115.259 100.842 113.807 102.476 112.263 104.021 M 78.8877 88.5051 L 78.8877 70.6453 L 98.1543 70.6453 C 97.8706 76.8889 97.0908 82.9061 95.8503 88.5051 Z M 90.0467 105.401 C 86.8083 111.879 82.915 116.431 78.8877 118.601 L 78.8877 99.1273 L 92.7543 99.1273 C 91.9656 101.266 91.0617 103.36 90.0467 105.401 M 57.1059 105.401 C 56.0908 103.36 55.187 101.266 54.3983 99.1273 L 68.2649 99.1273 L 68.2649 118.601 C 64.237 116.431 60.3442 111.879 57.1059 105.401 M 48.9983 70.6453 L 68.2649 70.6453 L 68.2649 88.5051 L 51.3023 88.5051 C 50.0617 82.9061 49.282 76.8889 48.9983 70.6453 M 34.8894 104.021 C 33.3454 102.476 31.8937 100.842 30.5419 99.1273 L 43.1735 99.1273 C 44.4274 103.064 45.9091 106.76 47.6043 110.152 C 48.4014 111.751 49.2695 113.313 50.206 114.835 C 44.5894 112.179 39.4128 108.545 34.8894 104.021 M 23.9842 88.5051 C 21.3679 82.9146 19.7213 76.8914 19.1229 70.6453 L 38.367 70.6453 C 38.6263 76.8189 39.3337 82.8227 40.4604 88.5051 Z M 40.4604 42.1627 C 39.3337 47.8451 38.6263 53.8489 38.367 60.0225 L 19.1229 60.0225 C 19.7213 53.7764 21.3679 47.7532 23.9842 42.1627 Z M 34.8894 26.647 C 39.4128 22.123 44.5894 18.4895 50.206 15.8331 C 49.2695 17.3545 48.4014 18.9171 47.6043 20.516 C 45.9091 23.9078 44.4274 27.6045 43.1735 31.5405 L 30.5419 31.5405 C 31.8938 29.8255 33.3455 28.1915 34.8894 26.647 M 68.2649 42.1627 L 68.2649 60.0225 L 48.9983 60.0225 C 49.282 53.7795 50.0617 47.7617 51.3023 42.1627 Z M 57.1059 25.267 C 60.3442 18.789 64.237 14.237 68.2649 12.0663 L 68.2649 31.5405 L 54.3983 31.5405 C 55.1869 29.402 56.0907 27.3078 57.1059 25.267 M 90.0467 25.267 C 91.0619 27.3078 91.9657 29.402 92.7543 31.5405 L 78.8877 31.5405 L 78.8877 12.0663 C 82.915 14.237 86.8083 18.789 90.0467 25.267 M 98.1543 60.0225 L 78.8877 60.0225 L 78.8877 42.1627 L 95.8503 42.1627 C 97.0908 47.7617 97.8706 53.7795 98.1543 60.0225 M 112.263 26.647 C 113.807 28.1916 115.259 29.8256 116.611 31.5405 L 103.979 31.5405 C 102.725 27.6045 101.244 23.9078 99.5476 20.516 C 98.751 18.9169 97.8831 17.3544 96.9466 15.8331 C 102.563 18.4895 107.739 22.1236 112.263 26.647 M 123.168 42.1627 C 125.785 47.7532 127.431 53.7764 128.03 60.0225 L 108.786 60.0225 C 108.526 53.8489 107.819 47.8451 106.692 42.1627 Z M 119.774 19.136 C 107.434 6.79604 91.0274 0.00028712 73.576 0.00028712 C 56.1246 0.00028712 39.7178 6.79604 27.3778 19.136 C 15.0384 31.476 8.24207 47.8828 8.24207 65.3336 C 8.24207 82.7856 15.0384 99.1924 27.3778 111.532 C 39.7178 123.872 56.1246 130.668 73.576 130.668 C 91.0274 130.668 107.434 123.872 119.774 111.532 C 132.114 99.1924 138.91 82.7856 138.91 65.3336 C 138.91 47.8828 132.114 31.476 119.774 19.136"
/>
<path class="plate" d="M 2e-06 136.811 L 147.151 136.811 L 147.151 147.433 L 2e-06 147.433 Z" />
<path
class="main-text"
d="M187.413 29.944h27.076v140.112h-27.076zM233.817 161.737c-6.145-6.416-9.216-15.223-9.216-26.424V70.72c0-13.918 2.773-24.41 8.318-31.48 5.546-7.067 14.244-10.602 26.098-10.602 10.33 0 18.648 2.83 24.956 8.482 6.305 5.655 9.46 13.81 9.46 24.466v24.14h-27.892V65.013c0-4.021-.488-6.794-1.467-8.318-.98-1.522-2.666-2.284-5.057-2.284-2.502 0-4.215.872-5.138 2.61-.925 1.74-1.386 4.297-1.386 7.667v70.3c0 3.697.543 6.39 1.63 8.073 1.087 1.688 2.717 2.528 4.894 2.528 4.348 0 6.524-3.532 6.524-10.602v-25.282h28.218v26.424c0 23.488-11.8 35.232-35.394 35.232-10.223 0-18.406-3.206-24.548-9.623M301.752 29.944h27.076v140.112h-27.076zM353.782 167.609c-5.22-2.5-9.326-6.17-12.315-11.01-2.992-4.837-4.485-10.684-4.485-17.534l-.001-29.344h27.566v27.712c0 2.503.515 4.486 1.55 5.954 1.032 1.469 2.635 2.202 4.811 2.202 2.065 0 3.614-.678 4.65-2.039 1.03-1.358 1.548-3.287 1.548-5.79V29.944h28.219v105.043c0 7.286-1.443 13.676-4.323 19.166-2.882 5.491-6.906 9.732-12.07 12.722-5.166 2.992-11.066 4.485-17.697 4.485-6.418 0-12.233-1.251-17.453-3.751"
/>
<path
class="secondary-text"
d="M442.17 92.461c-2.644-2.948-3.965-7.703-3.965-14.262v-6.407h12.89v8.16c0 3.255 1.04 4.883 3.126 4.883 1.17 0 1.984-.344 2.441-1.03.458-.687.686-1.843.686-3.47 0-2.136-.254-3.903-.762-5.301-.509-1.399-1.158-2.567-1.945-3.51-.79-.939-2.2-2.402-4.233-4.385l-5.644-5.644c-4.374-4.27-6.56-9-6.56-14.186 0-5.593 1.284-9.851 3.852-12.776 2.567-2.923 6.318-4.385 11.25-4.385 5.898 0 10.145 1.563 12.737 4.69 2.594 3.128 3.89 8.022 3.89 14.682h-13.347l-.076-4.5c0-.863-.242-1.55-.725-2.059-.484-.507-1.157-.762-2.02-.762-1.019 0-1.782.28-2.289.839-.51.56-.763 1.322-.763 2.288 0 2.135 1.22 4.347 3.661 6.635l7.627 7.323c1.78 1.728 3.254 3.368 4.424 4.92 1.17 1.55 2.11 3.381 2.822 5.49.712 2.11 1.068 4.615 1.068 7.513 0 6.458-1.182 11.352-3.547 14.682-2.364 3.33-6.267 4.996-11.708 4.996-5.949 0-10.246-1.474-12.89-4.424M480.1 96.275V43.343h-7.779V30.758H501v12.585h-7.78v52.932ZM522.248 83.308c.406-1.016.61-2.44.61-4.27V47.003c0-1.422-.19-2.58-.572-3.47-.382-.889-1.158-1.334-2.327-1.334-2.187 0-3.279 1.652-3.279 4.957v31.958c0 1.881.229 3.306.686 4.271.457.966 1.297 1.45 2.517 1.45 1.17 0 1.957-.509 2.365-1.527m-14.415 8.734c-2.746-3.228-4.12-7.767-4.12-13.615V47.233c0-5.644 1.374-9.902 4.12-12.776 2.745-2.872 6.761-4.31 12.05-4.31 5.288 0 9.305 1.438 12.051 4.31 2.746 2.874 4.118 7.132 4.118 12.776v31.194c0 5.9-1.372 10.45-4.118 13.653-2.746 3.203-6.763 4.805-12.05 4.805-5.29 0-9.306-1.613-12.051-4.843M556.34 55.012c1.83 0 2.745-1.983 2.745-5.949 0-1.728-.076-3.025-.228-3.89-.153-.864-.433-1.46-.84-1.792-.407-.33-.99-.496-1.754-.496h-3.05v12.127Zm-16.475-24.254H560c3.204 0 5.683.725 7.437 2.174 1.754 1.449 2.937 3.483 3.547 6.101.61 2.62.915 5.963.915 10.03 0 3.713-.484 6.61-1.45 8.695-.966 2.086-2.644 3.534-5.033 4.348 1.983.407 3.419 1.399 4.309 2.974.89 1.577 1.335 3.712 1.335 6.407l-.152 24.788h-12.815V70.648c0-1.83-.356-3-1.067-3.508-.713-.509-2.01-.764-3.89-.764v29.899h-13.271zM574.965 30.758h12.66v65.517h-12.66zM591.583 96.275V30.758h26.237v12.661h-12.89v12.737h12.357v12.356H604.93v15.025h13.73v12.738ZM625.256 92.461c-2.644-2.948-3.966-7.703-3.966-14.262v-6.407h12.89v8.16c0 3.255 1.041 4.883 3.127 4.883 1.17 0 1.983-.344 2.44-1.03.458-.687.687-1.843.687-3.47 0-2.136-.255-3.903-.763-5.301-.508-1.399-1.157-2.567-1.945-3.51-.789-.939-2.2-2.402-4.232-4.385l-5.645-5.644c-4.374-4.27-6.559-9-6.559-14.186 0-5.593 1.283-9.851 3.851-12.776 2.567-2.923 6.318-4.385 11.25-4.385 5.898 0 10.145 1.563 12.738 4.69 2.593 3.128 3.89 8.022 3.89 14.682H639.67l-.076-4.5c0-.863-.242-1.55-.724-2.059-.484-.507-1.158-.762-2.021-.762-1.018 0-1.782.28-2.289.839-.51.56-.763 1.322-.763 2.288 0 2.135 1.221 4.347 3.661 6.635l7.628 7.323c1.779 1.728 3.253 3.368 4.423 4.92 1.17 1.55 2.11 3.381 2.822 5.49.712 2.11 1.068 4.615 1.068 7.513 0 6.458-1.182 11.352-3.546 14.682-2.365 3.33-6.268 4.996-11.708 4.996-5.95 0-10.246-1.474-12.89-4.424M681.239 96.275V43.343h-7.78V30.758h28.678v12.585h-7.78v52.932ZM705.126 96.275V30.758h13.042v23.415h6.178V30.758h13.043v65.517h-13.043V66.529h-6.178v29.746ZM755.12 75.224h5.95l-2.898-33.33h-.61Zm-14.49 21.05 6.33-65.516h22.195l6.254 65.517h-12.432l-.916-10.602h-7.931l-.763 10.602zM782.677 96.275V43.343h-7.78V30.758h28.679v12.585h-7.78v52.932ZM455.976 130.224c1.83 0 2.745-1.983 2.745-5.95 0-1.727-.076-3.024-.228-3.889-.153-.864-.433-1.46-.84-1.793-.407-.33-.99-.495-1.754-.495h-3.05v12.127ZM439.5 105.97h20.136c3.203 0 5.682.724 7.436 2.174 1.754 1.448 2.937 3.483 3.547 6.101.61 2.62.915 5.962.915 10.03 0 3.713-.484 6.61-1.45 8.695s-2.643 3.535-5.033 4.348c1.983.408 3.419 1.399 4.309 2.974.89 1.577 1.335 3.712 1.335 6.407l-.152 24.788h-12.815V145.86c0-1.83-.356-3-1.067-3.508-.712-.508-2.01-.763-3.89-.763v29.898h-13.271zM493.173 158.52c.406-1.016.61-2.44.61-4.27v-32.035c0-1.422-.19-2.58-.572-3.47-.382-.89-1.158-1.334-2.326-1.334-2.188 0-3.28 1.652-3.28 4.957v31.958c0 1.882.229 3.306.686 4.271.458.966 1.297 1.45 2.518 1.45 1.168 0 1.956-.509 2.364-1.526m-14.415 8.733c-2.746-3.229-4.119-7.767-4.119-13.615v-31.194c0-5.644 1.373-9.902 4.119-12.777 2.745-2.871 6.761-4.309 12.05-4.309 5.288 0 9.305 1.438 12.051 4.31 2.746 2.874 4.118 7.132 4.118 12.776v31.194c0 5.9-1.372 10.45-4.118 13.653-2.746 3.203-6.763 4.806-12.05 4.806-5.29 0-9.306-1.614-12.051-4.844M514.756 167.597c-2.873-3-4.309-7.118-4.309-12.355v-30.205c0-6.508 1.297-11.413 3.89-14.72 2.593-3.305 6.66-4.958 12.203-4.958 4.83 0 8.72 1.323 11.67 3.966 2.948 2.646 4.424 6.459 4.424 11.442v11.287H529.59v-9.686c0-1.88-.229-3.177-.686-3.89-.458-.711-1.246-1.067-2.365-1.067-1.17 0-1.97.408-2.403 1.22-.432.814-.648 2.01-.648 3.584v32.873c0 1.73.254 2.988.763 3.776.508.788 1.27 1.183 2.288 1.183 2.033 0 3.051-1.652 3.051-4.959v-11.822h13.195v12.356c0 10.983-5.518 16.476-16.55 16.476-4.78 0-8.607-1.5-11.48-4.5M546.088 171.487V105.97h12.967v26.239l6.1-26.239h13.196l-7.322 29.976 8.847 35.542H566.3l-7.17-31.729v31.73ZM605.578 171.487v-52.932H597.8V105.97h28.678v12.586h-7.78v52.932ZM629.466 171.487V105.97h13.043v23.416h6.178v-23.416h13.042v65.518h-13.042v-29.746h-6.178v29.746ZM665.93 171.487V105.97h26.238v12.662h-12.89v12.737h12.356v12.357h-12.356v15.025h13.729v12.737ZM720.31 171.487l-7.016-65.518h12.813l3.66 41.34 3.662-41.34h12.203l3.509 41.34 3.508-41.34h12.967l-7.17 65.518h-15.712l-3.28-31.577-3.126 31.577ZM786.254 158.52c.407-1.016.611-2.44.611-4.27v-32.035c0-1.422-.191-2.58-.572-3.47-.382-.89-1.158-1.334-2.327-1.334-2.187 0-3.279 1.652-3.279 4.957v31.958c0 1.882.228 3.306.686 4.271.457.966 1.297 1.45 2.517 1.45 1.169 0 1.957-.509 2.364-1.526m-14.415 8.733c-2.746-3.229-4.119-7.767-4.119-13.615v-31.194c0-5.644 1.373-9.902 4.12-12.777 2.745-2.871 6.761-4.309 12.05-4.309 5.288 0 9.305 1.438 12.051 4.31 2.745 2.874 4.118 7.132 4.118 12.776v31.194c0 5.9-1.373 10.45-4.118 13.653-2.746 3.203-6.763 4.806-12.05 4.806-5.29 0-9.306-1.614-12.052-4.844M820.347 130.224c1.83 0 2.745-1.983 2.745-5.95 0-1.727-.076-3.024-.228-3.889-.153-.864-.433-1.46-.84-1.793-.407-.33-.99-.495-1.754-.495h-3.05v12.127Zm-16.475-24.254h20.136c3.204 0 5.682.724 7.437 2.174 1.753 1.448 2.936 3.483 3.546 6.101.61 2.62.915 5.962.915 10.03 0 3.713-.484 6.61-1.449 8.695-.967 2.085-2.644 3.535-5.034 4.348 1.983.408 3.42 1.399 4.31 2.974.888 1.577 1.334 3.712 1.334 6.407l-.152 24.788H822.1V145.86c0-1.83-.356-3-1.067-3.508-.713-.508-2.01-.763-3.89-.763v29.898h-13.272zM839.246 171.487V105.97h13.12v54.382h13.499v11.136ZM884.383 159.893c2.389 0 3.584-1.168 3.584-3.508v-33.789c0-1.473-.114-2.58-.343-3.317-.229-.737-.648-1.232-1.258-1.488-.61-.253-1.552-.38-2.822-.38h-1.45v42.482Zm-15.484-53.924h18.077c4.678 0 8.186 1.297 10.525 3.891 2.338 2.593 3.534 6.433 3.585 11.516l.153 30.661c.05 6.459-1.069 11.315-3.356 14.568-2.288 3.255-6.077 4.882-11.364 4.882h-17.62z"
/>
</svg>
<svg
v-else-if="mode === 'long'"
:width="width"
:height="height"
viewBox="0 0 1047.01 200"
xmlns="http://www.w3.org/2000/svg"
>
<path class="triangle" d="m45.153 200 28.423-46.424L101.999 200Z" />
<path
class="globe"
d="M 106.691 88.5051 C 107.818 82.8227 108.526 76.8189 108.785 70.6453 L 128.029 70.6453 C 127.431 76.8914 125.784 82.9146 123.168 88.5051 Z M 112.262 104.021 C 107.739 108.545 102.563 112.178 96.9465 114.835 C 97.883 113.313 98.7509 111.751 99.5475 110.152 C 101.243 106.76 102.725 103.064 103.978 99.1273 L 116.611 99.1273 C 115.259 100.842 113.807 102.476 112.263 104.021 M 78.887 88.5051 L 78.887 70.6453 L 98.1536 70.6453 C 97.8699 76.8889 97.0901 82.9061 95.8502 88.5051 Z M 90.046 105.401 C 86.8076 111.879 82.9143 116.431 78.887 118.601 L 78.887 99.1273 L 92.7536 99.1273 C 91.9649 101.266 91.061 103.36 90.046 105.401 M 57.1052 105.401 C 56.0901 103.36 55.1863 101.266 54.3976 99.1273 L 68.2642 99.1273 L 68.2642 118.601 C 64.2363 116.431 60.3435 111.879 57.1052 105.401 M 48.9976 70.6453 L 68.2642 70.6453 L 68.2642 88.5051 L 51.3028 88.5051 C 50.0623 82.9061 49.2819 76.8889 48.9988 70.6453 M 34.8899 104.021 C 33.3459 102.476 31.8942 100.842 30.5424 99.1273 L 43.1734 99.1273 C 44.4273 103.064 45.9096 106.76 47.6049 110.152 C 48.4019 111.751 49.27 113.313 50.2065 114.835 C 44.5899 112.179 39.4133 108.545 34.8899 104.021 M 23.9841 88.5051 C 21.3678 82.9146 19.7212 76.8914 19.1229 70.6453 L 38.3669 70.6453 C 38.6262 76.8189 39.3336 82.8227 40.4609 88.5051 Z M 40.4603 42.1627 C 39.3342 47.8451 38.6262 53.8489 38.3669 60.0225 L 19.1229 60.0225 C 19.7212 53.7764 21.3678 47.7532 23.9841 42.1627 Z M 34.8893 26.647 C 39.4127 22.123 44.5893 18.4895 50.2059 15.8331 C 49.2694 17.3545 48.4013 18.9171 47.6043 20.516 C 45.909 23.9078 44.4273 27.6045 43.1734 31.5405 L 30.5424 31.5405 C 31.8943 29.8255 33.346 28.1915 34.8899 26.647 M 68.2648 42.1627 L 68.2648 60.0225 L 48.9988 60.0225 C 49.2819 53.7795 50.0617 47.7617 51.3022 42.1627 Z M 57.1064 25.267 C 60.3448 18.789 64.2375 14.237 68.2654 12.0663 L 68.2654 31.5405 L 54.3988 31.5405 C 55.1872 29.402 56.0908 27.3078 57.1058 25.267 M 90.0466 25.267 C 91.0618 27.3078 91.9656 29.402 92.7542 31.5405 L 78.8876 31.5405 L 78.8876 12.0663 C 82.9149 14.237 86.8083 18.789 90.0466 25.267 M 98.1548 60.0225 L 78.8876 60.0225 L 78.8876 42.1627 L 95.8502 42.1627 C 97.0908 47.7617 97.8711 53.7795 98.1542 60.0225 M 112.263 26.647 C 113.807 28.1916 115.258 29.8256 116.611 31.5405 L 103.978 31.5405 C 102.725 27.6045 101.243 23.9078 99.5475 20.516 C 98.7509 18.9169 97.883 17.3544 96.9465 15.8331 C 102.563 18.4895 107.739 22.1236 112.263 26.647 M 123.169 42.1627 C 125.785 47.7532 127.431 53.7764 128.03 60.0225 L 108.786 60.0225 C 108.526 53.8489 107.819 47.8451 106.692 42.1627 Z M 119.775 19.136 C 107.434 6.79604 91.0273 0.00028712 73.5759 0.00028712 C 56.1245 0.00028712 39.7177 6.79604 27.3777 19.136 C 15.0389 31.476 8.24198 47.8828 8.24198 65.3336 C 8.24198 82.7856 15.0383 99.1924 27.3777 111.532 C 39.7177 123.872 56.1245 130.668 73.5759 130.668 C 91.0279 130.668 107.434 123.872 119.774 111.532 C 132.114 99.1924 138.91 82.7856 138.91 65.3336 C 138.91 47.8828 132.114 31.476 119.774 19.136"
/>
<path class="plate" d="M -8.72e-05 136.811 L 147.151 136.811 L 147.151 147.433 L -8.72e-05 147.433 Z" />
<path
class="main-text"
d="M203.5 25.928h12.66v65.517H203.5zM220.118 91.445V25.928h13.5l6.026 31.348V25.928h12.661v65.517h-12.814l-6.559-32.796v32.796ZM263.073 91.445V38.513h-7.78V25.928h28.678v12.585h-7.78v52.932ZM286.96 91.445V25.928h26.237V38.59h-12.89v12.737h12.357v12.357h-12.357v15.024h13.73v12.738ZM333.813 50.183c1.83 0 2.745-1.984 2.745-5.95 0-1.728-.075-3.025-.228-3.89-.152-.864-.433-1.46-.839-1.792-.408-.33-.992-.495-1.755-.495h-3.05v12.127Zm-16.475-24.255h20.136c3.204 0 5.682.724 7.437 2.174 1.753 1.45 2.936 3.484 3.546 6.102.61 2.619.916 5.962.916 10.03 0 3.712-.485 6.61-1.45 8.694-.966 2.086-2.644 3.535-5.034 4.348 1.984.408 3.42 1.4 4.309 2.974.89 1.577 1.336 3.713 1.336 6.408l-.153 24.787h-12.814V65.818c0-1.83-.357-2.999-1.068-3.508-.712-.508-2.01-.763-3.89-.763v29.898h-13.271zM352.712 91.445V25.928h13.5l6.026 31.348V25.928H384.9v65.517h-12.815l-6.56-32.796v32.796ZM402.592 70.394h5.95l-2.898-33.33h-.61Zm-14.491 21.051 6.33-65.517h22.195l6.255 65.517h-12.433l-.915-10.601H401.6l-.762 10.601zM430.148 91.445V38.513h-7.78V25.928h28.678v12.585h-7.78v52.932ZM453.761 25.928h12.661v65.517h-12.66zM488.616 78.479c.407-1.017.611-2.441.611-4.27V42.173c0-1.423-.19-2.58-.572-3.47-.382-.89-1.158-1.335-2.327-1.335-2.187 0-3.279 1.653-3.279 4.957v31.958c0 1.881.228 3.306.687 4.272.457.966 1.296 1.448 2.517 1.448 1.168 0 1.956-.507 2.363-1.525m-14.414 8.733c-2.747-3.228-4.12-7.767-4.12-13.614V42.403c0-5.644 1.373-9.902 4.12-12.776 2.745-2.872 6.761-4.31 12.05-4.31 5.288 0 9.305 1.438 12.052 4.31 2.745 2.873 4.118 7.132 4.118 12.776v31.195c0 5.898-1.373 10.449-4.118 13.653-2.747 3.203-6.764 4.805-12.051 4.805-5.29 0-9.306-1.614-12.051-4.844M506.234 91.445V25.928h13.5l6.026 31.348V25.928h12.661v65.517h-12.814l-6.559-32.796v32.796ZM556.114 70.394h5.95l-2.898-33.33h-.61Zm-14.491 21.051 6.33-65.517h22.195l6.254 65.517H563.97l-.915-10.601h-7.932l-.763 10.601zM579.574 91.445V25.928h13.118V80.31h13.501v11.136ZM631.475 87.556c-2.873-3-4.308-7.119-4.308-12.356V44.996c0-6.508 1.296-11.414 3.89-14.72 2.592-3.305 6.659-4.958 12.202-4.958 4.83 0 8.72 1.323 11.67 3.966 2.949 2.645 4.424 6.458 4.424 11.44v11.289H646.31v-9.687c0-1.88-.23-3.176-.687-3.89-.458-.71-1.246-1.067-2.365-1.067-1.17 0-1.97.408-2.402 1.22-.433.814-.649 2.01-.649 3.585v32.873c0 1.73.255 2.988.764 3.775.507.79 1.27 1.183 2.287 1.183 2.033 0 3.052-1.652 3.052-4.958V63.225h13.194v12.356c0 10.983-5.517 16.475-16.55 16.475-4.78 0-8.607-1.5-11.48-4.5M681.097 78.479c.407-1.017.61-2.441.61-4.27V42.173c0-1.423-.19-2.58-.571-3.47-.382-.89-1.158-1.335-2.327-1.335-2.187 0-3.279 1.653-3.279 4.957v31.958c0 1.881.228 3.306.687 4.272.457.966 1.296 1.448 2.517 1.448 1.168 0 1.955-.507 2.363-1.525m-14.414 8.733c-2.747-3.228-4.12-7.767-4.12-13.614V42.403c0-5.644 1.373-9.902 4.12-12.776 2.745-2.872 6.76-4.31 12.05-4.31 5.288 0 9.305 1.438 12.051 4.31 2.746 2.873 4.118 7.132 4.118 12.776v31.195c0 5.898-1.372 10.449-4.118 13.653-2.746 3.203-6.762 4.805-12.05 4.805-5.29 0-9.306-1.614-12.051-4.844M698.716 91.445V25.928h13.5l6.025 31.348V25.928h12.661v65.517H718.09l-6.56-32.796v32.796ZM738.24 87.631c-2.645-2.947-3.967-7.703-3.967-14.262v-6.406h12.89v8.16c0 3.255 1.04 4.882 3.127 4.882 1.169 0 1.983-.343 2.44-1.03.459-.687.687-1.843.687-3.47 0-2.136-.256-3.902-.763-5.301-.508-1.398-1.157-2.567-1.945-3.509-.789-.94-2.2-2.402-4.232-4.385l-5.645-5.645c-4.373-4.27-6.56-9-6.56-14.186 0-5.592 1.284-9.85 3.851-12.776 2.568-2.922 6.319-4.385 11.25-4.385 5.9 0 10.145 1.563 12.738 4.691 2.594 3.127 3.89 8.021 3.89 14.682h-13.347l-.076-4.5c0-.864-.242-1.55-.725-2.06-.483-.507-1.156-.762-2.02-.762-1.018 0-1.782.28-2.288.84-.51.56-.764 1.322-.764 2.287 0 2.135 1.22 4.347 3.66 6.635l7.628 7.323c1.78 1.729 3.254 3.369 4.424 4.92 1.17 1.551 2.11 3.382 2.822 5.49.712 2.111 1.068 4.616 1.068 7.514 0 6.458-1.182 11.352-3.547 14.681-2.363 3.331-6.267 4.997-11.708 4.997-5.948 0-10.246-1.475-12.889-4.424M788.02 78.479c.407-1.017.611-2.441.611-4.27V42.173c0-1.423-.191-2.58-.572-3.47-.381-.89-1.158-1.335-2.326-1.335-2.187 0-3.28 1.653-3.28 4.957v31.958c0 1.881.229 3.306.686 4.272.456.966 1.296 1.448 2.517 1.448 1.169 0 1.957-.507 2.365-1.525m-14.416 8.733c-2.745-3.228-4.118-7.767-4.118-13.614V42.403c0-5.644 1.373-9.902 4.118-12.776 2.745-2.872 6.762-4.31 12.05-4.31s9.306 1.438 12.052 4.31c2.745 2.873 4.118 7.132 4.118 12.776v31.195c0 5.898-1.373 10.449-4.118 13.653-2.746 3.203-6.763 4.805-12.051 4.805-5.289 0-9.306-1.614-12.05-4.844M822.113 50.183c1.83 0 2.746-1.984 2.746-5.95 0-1.728-.076-3.025-.229-3.89-.153-.864-.432-1.46-.838-1.792-.408-.33-.993-.495-1.755-.495h-3.05v12.127Zm-16.475-24.255h20.136c3.203 0 5.682.724 7.436 2.174 1.755 1.45 2.937 3.484 3.547 6.102.61 2.619.915 5.962.915 10.03 0 3.712-.484 6.61-1.45 8.694-.965 2.086-2.643 3.535-5.033 4.348 1.983.408 3.419 1.4 4.31 2.974.888 1.577 1.334 3.713 1.334 6.408l-.152 24.787h-12.814V65.818c0-1.83-.356-2.999-1.068-3.508-.712-.508-2.009-.763-3.89-.763v29.898h-13.271zM847.709 91.445V38.513h-7.78V25.928h28.678v12.585h-7.78v52.932ZM871.322 25.928h12.66v65.517h-12.66zM891.472 87.479c-2.62-3.051-3.928-7.576-3.928-13.576V25.928h12.738v47.44c0 2.086.203 3.714.61 4.883.406 1.17 1.27 1.753 2.593 1.753s2.185-.571 2.593-1.716c.406-1.144.61-2.783.61-4.92v-47.44h12.737v47.975c0 6-1.31 10.525-3.928 13.576-2.62 3.051-6.623 4.576-12.012 4.576-5.39 0-9.395-1.525-12.013-4.576M923.17 91.445V25.928h19.983l5.493 39.966 5.49-39.966h20.136v65.517h-11.974V44.234l-7.551 47.211h-11.745l-8.01-47.212v47.212ZM222.11 153.69c.406-1.016.61-2.44.61-4.27v-32.035c0-1.422-.19-2.58-.573-3.47-.381-.89-1.157-1.334-2.326-1.334-2.187 0-3.28 1.652-3.28 4.957v31.958c0 1.881.229 3.306.687 4.271.457.966 1.296 1.45 2.517 1.45 1.17 0 1.956-.509 2.364-1.526m-14.414 8.733c-2.747-3.229-4.12-7.767-4.12-13.615v-31.194c0-5.644 1.373-9.902 4.12-12.777 2.745-2.871 6.76-4.308 12.05-4.308 5.288 0 9.305 1.437 12.051 4.308 2.746 2.875 4.118 7.133 4.118 12.777v31.194c0 5.9-1.372 10.449-4.118 13.653-2.746 3.203-6.763 4.805-12.05 4.805-5.29 0-9.306-1.613-12.051-4.843M239.728 166.657v-65.518h26.236v12.738h-13.04v10.45h12.355v12.584h-12.356v29.746ZM287.396 101.14h12.66v65.517h-12.66zM304.014 166.657v-65.518h13.5l6.026 31.35v-31.35h12.661v65.518h-12.814l-6.559-32.797v32.797ZM347.275 166.657l-8.085-65.593h12.508l4.805 44.619 4.272-44.62h12.508l-8.085 65.594ZM376.264 166.657v-65.518h26.238V113.8h-12.89v12.738h12.356v12.357h-12.356v15.024h13.73v12.738ZM409.937 162.843c-2.644-2.948-3.965-7.703-3.965-14.263v-6.406h12.89v8.161c0 3.254 1.04 4.882 3.126 4.882 1.17 0 1.983-.344 2.441-1.03.457-.686.686-1.843.686-3.47 0-2.136-.255-3.902-.762-5.3-.51-1.4-1.158-2.568-1.945-3.51-.79-.94-2.2-2.402-4.233-4.385l-5.644-5.644c-4.375-4.272-6.56-9-6.56-14.187 0-5.592 1.283-9.85 3.852-12.775 2.566-2.923 6.318-4.386 11.25-4.386 5.898 0 10.145 1.564 12.737 4.691 2.593 3.127 3.89 8.021 3.89 14.681h-13.347l-.077-4.498c0-.865-.242-1.551-.724-2.06-.484-.508-1.158-.763-2.021-.763-1.018 0-1.78.28-2.289.839-.508.56-.762 1.322-.762 2.288 0 2.136 1.22 4.348 3.661 6.636l7.627 7.323c1.78 1.727 3.253 3.367 4.424 4.918 1.169 1.552 2.11 3.383 2.822 5.492.712 2.11 1.067 4.614 1.067 7.512 0 6.458-1.182 11.353-3.546 14.683-2.365 3.33-6.268 4.996-11.708 4.996-5.949 0-10.246-1.474-12.89-4.425M447.867 166.657v-52.932h-7.78v-12.586h28.678v12.586h-7.779v52.932ZM471.48 101.14h12.661v65.517H471.48zM491.272 162.271c-2.314-3.33-3.47-8.377-3.47-15.14v-28.22c0-6.051 1.346-10.626 4.042-13.729 2.695-3.101 6.712-4.652 12.051-4.652 4.321 0 7.676.865 10.068 2.593 2.39 1.729 4.042 4.246 4.957 7.55.916 3.307 1.373 7.551 1.373 12.739h-12.814v-5.873c0-1.577-.216-2.797-.648-3.662-.433-.864-1.208-1.296-2.325-1.296-2.492 0-3.738 1.627-3.738 4.88v31.73c0 1.983.254 3.483.762 4.5.508 1.018 1.399 1.526 2.67 1.526 1.27 0 2.16-.508 2.67-1.526.507-1.017.763-2.517.763-4.5v-9.382h-3.51v-11.287h16.018v38.135h-5.263l-2.212-5.492c-2.34 4.069-5.949 6.102-10.831 6.102-4.728 0-8.25-1.665-10.563-4.996M537.56 145.606h5.949l-2.899-33.33H540Zm-14.492 21.05 6.33-65.516h22.195l6.255 65.517h-12.433l-.915-10.602h-7.932l-.763 10.602zM565.115 166.657v-52.932h-7.78v-12.586h28.679v12.586h-7.78v52.932ZM588.728 101.14h12.662v65.517h-12.662zM612.257 166.657l-8.084-65.593h12.509l4.805 44.619 4.27-44.62h12.51l-8.085 65.594ZM641.247 166.657v-65.518h26.238V113.8h-12.89v12.738h12.356v12.357h-12.357v15.024h13.73v12.738ZM696.924 165.513c-2.44-1.169-4.36-2.885-5.758-5.148-1.4-2.262-2.098-4.996-2.098-8.2v-16.398h12.89v15.635c0 1.17.241 2.099.725 2.785.482.686 1.232 1.03 2.25 1.03.965 0 1.69-.318 2.174-.954.482-.635.724-1.537.724-2.707V101.14h13.195v49.119c0 3.407-.675 6.395-2.021 8.961-1.349 2.569-3.23 4.552-5.645 5.95-2.415 1.4-5.174 2.097-8.275 2.097-3 0-5.72-.585-8.161-1.754M742.968 153.69c.407-1.016.61-2.44.61-4.27v-32.035c0-1.422-.191-2.58-.571-3.47-.382-.89-1.158-1.334-2.327-1.334-2.187 0-3.28 1.652-3.28 4.957v31.958c0 1.881.23 3.306.686 4.271.457.966 1.297 1.45 2.517 1.45 1.17 0 1.957-.509 2.365-1.526m-14.415 8.733c-2.746-3.229-4.12-7.767-4.12-13.615v-31.194c0-5.644 1.374-9.902 4.12-12.777 2.745-2.871 6.762-4.308 12.05-4.308 5.289 0 9.306 1.437 12.051 4.308 2.746 2.875 4.119 7.133 4.119 12.777v31.194c0 5.9-1.373 10.449-4.119 13.653-2.745 3.203-6.762 4.805-12.05 4.805s-9.306-1.613-12.051-4.843M764.126 162.691c-2.62-3.05-3.928-7.575-3.928-13.577V101.14h12.737v47.44c0 2.086.203 3.714.61 4.882.406 1.17 1.27 1.755 2.594 1.755 1.32 0 2.185-.573 2.593-1.717.406-1.144.61-2.783.61-4.92v-47.44h12.737v47.974c0 6.002-1.31 10.526-3.928 13.577-2.62 3.051-6.623 4.576-12.012 4.576-5.391 0-9.395-1.525-12.013-4.576M812.298 125.394c1.831 0 2.746-1.983 2.746-5.95 0-1.727-.076-3.024-.229-3.89-.152-.863-.432-1.46-.84-1.792-.406-.33-.99-.495-1.753-.495h-3.05v12.127Zm-16.474-24.255h20.135c3.205 0 5.683.726 7.438 2.175 1.753 1.448 2.935 3.483 3.545 6.101.61 2.62.917 5.962.917 10.03 0 3.713-.485 6.61-1.45 8.694-.967 2.086-2.644 3.535-5.034 4.349 1.983.407 3.42 1.398 4.309 2.974.89 1.576 1.335 3.712 1.335 6.407l-.153 24.788h-12.813V141.03c0-1.83-.357-3-1.068-3.508-.712-.509-2.01-.764-3.89-.764v29.899h-13.271zM831.197 166.657v-65.518h13.5l6.026 31.35v-31.35h12.662v65.518H850.57l-6.559-32.797v32.797ZM881.078 145.606h5.95l-2.899-33.33h-.61Zm-14.492 21.05 6.331-65.516h22.194l6.255 65.517h-12.432l-.915-10.602h-7.932l-.763 10.602zM904.538 166.657v-65.518h13.118v54.381h13.5v11.137ZM933.91 101.14h12.66v65.517h-12.66zM953.7 162.843c-2.644-2.948-3.965-7.703-3.965-14.263v-6.406h12.89v8.161c0 3.254 1.04 4.882 3.126 4.882 1.17 0 1.983-.344 2.441-1.03.457-.686.686-1.843.686-3.47 0-2.136-.255-3.902-.762-5.3-.51-1.4-1.158-2.568-1.945-3.51-.79-.94-2.2-2.402-4.233-4.385l-5.644-5.644c-4.375-4.272-6.56-9-6.56-14.187 0-5.592 1.283-9.85 3.852-12.775 2.566-2.923 6.318-4.386 11.25-4.386 5.898 0 10.145 1.564 12.737 4.691 2.593 3.127 3.89 8.021 3.89 14.681h-13.347l-.077-4.498c0-.865-.242-1.551-.724-2.06-.485-.508-1.158-.763-2.02-.763-1.02 0-1.782.28-2.29.839-.509.56-.762 1.322-.762 2.288 0 2.136 1.22 4.348 3.661 6.636l7.627 7.323c1.78 1.727 3.253 3.367 4.423 4.918 1.17 1.552 2.11 3.383 2.823 5.492.712 2.11 1.067 4.614 1.067 7.512 0 6.458-1.182 11.353-3.546 14.683-2.365 3.33-6.268 4.996-11.709 4.996-5.948 0-10.244-1.474-12.89-4.425M991.63 166.657v-52.932h-7.78v-12.586h28.678v12.586h-7.78v52.932ZM1018.866 162.843c-2.645-2.948-3.967-7.703-3.967-14.263v-6.406h12.89v8.161c0 3.254 1.042 4.882 3.128 4.882 1.168 0 1.983-.344 2.44-1.03.458-.686.687-1.843.687-3.47 0-2.136-.256-3.902-.764-5.3-.507-1.4-1.156-2.568-1.945-3.51-.788-.94-2.199-2.402-4.231-4.385l-5.645-5.644c-4.374-4.272-6.56-9-6.56-14.187 0-5.592 1.285-9.85 3.852-12.775 2.567-2.923 6.318-4.386 11.25-4.386 5.899 0 10.144 1.564 12.737 4.691 2.594 3.127 3.89 8.021 3.89 14.681h-13.348l-.075-4.498c0-.865-.242-1.551-.725-2.06-.484-.508-1.156-.763-2.02-.763-1.018 0-1.782.28-2.289.839-.509.56-.764 1.322-.764 2.288 0 2.136 1.221 4.348 3.662 6.636l7.627 7.323c1.78 1.727 3.254 3.367 4.424 4.918 1.17 1.552 2.109 3.383 2.822 5.492.712 2.11 1.068 4.614 1.068 7.512 0 6.458-1.182 11.353-3.547 14.683-2.364 3.33-6.267 4.996-11.708 4.996-5.949 0-10.246-1.474-12.89-4.425"
/>
</svg>
</span>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { isString } from 'lodash'
import { BrandMode } from '@/enums'
import type { BrandExpansionStyle } from '@/types'
/**
* A component to create variations of ICIJ logo with text
*/
export default defineComponent({
name: 'BrandExpansion',
props: {
/**
* Add a balancing effect to the globe
*/
animated: {
type: Boolean
},
/**
* Monochromatic logo's color
*/
color: {
type: String,
default: null
},
/**
* Logo's background color
*/
background: {
type: String,
default: null
},
/**
* Logo's size
*/
size: {
type: [Number, String],
default: '70px'
},
/**
* Brand mode ("short", "medium", "long")
*/
mode: {
type: String as PropType<BrandMode>,
default: BrandMode.Short
},
/**
* Reverse color of the main text to white if no `color` is given
*/
dark: {
type: Boolean
}
},
computed: {
baseWidth(): number {
const widths = {
[BrandMode.Short]: 401.256,
[BrandMode.Medium]: 901.24,
[BrandMode.Long]: 1047.01
}
return widths[this.mode]
},
width(): string {
return `${(this.baseWidth / 200) * this.sizeAsNumber}px`
},
height(): string {
return `${this.sizeAsNumber}px`
},
sizeAsNumber(): number {
return isString(this.size) ? parseInt(this.size) : this.size
},
style(): BrandExpansionStyle {
return {
'--monochrome-color': this.color,
background: this.background
}
}
}
})
</script>
<style scoped lang="scss">
@keyframes balancing-plate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(-7deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes balancing-globe {
0% {
transform: rotate(0deg);
}
35% {
transform: rotate(7deg);
}
65% {
transform: rotate(-7deg);
}
85% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
.brand-expansion {
display: inline-flex;
align-items: center;
justify-content: center;
svg {
.triangle,
.globe,
.secondary-text {
fill: var(--monochrome-color, #f00);
}
.plate {
fill: var(--monochrome-color, #999);
}
.main-text {
fill: var(--monochrome-color, #000);
}
}
&--dark svg .main-text {
fill: var(--monochrome-color, #fff);
}
&--animated svg {
.plate {
animation: balancing-plate 5s infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.globe {
animation: balancing-globe 5s infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.plate,
.globe {
animation-direction: repeat;
transform: rotate(0deg);
transform-origin: bottom center;
transform-box: fill-box;
}
}
}
</style>