"Circle Menu"
Bootstrap 4.0.0 Snippet by effa

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/gzuzkstro/pen/oemMyN" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'> <style class="cp-pen-styles">.container { width: 100%; height: 480px; } #learn-more { fill-opacity: 0; fill: #fff; stroke: #fff; stroke-width: 2; border-radius: 5px; stroke-linejoin: round; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; cursor: pointer; } #learn-more:hover { fill-opacity: 1; } #learn-more:hover ~ .learn-more-text { fill: #ea3636; } .learn-more-text { font-family: 'Roboto'; fill: #fff; pointer-events: none; font-size: 14px; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; } .center { fill: #ea3636; } .pointer { fill: #fff; stroke: #ea3636; stroke-width: 2; } .nav-copy { font-family: 'Roboto'; fill: #fff; fill-opacity: 1; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; } .nav-copy.changing { fill-opacity: 0; } .service { cursor: pointer; } .service text { font-size: 14px; font-family: 'Roboto'; text-anchor: middle; } .service .icon-wrapper { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .service .icon-wrapper, .service .icon-wrapper > * { -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; } .service circle { fill: #ea3636; } .service circle.shadow { fill-opacity: 0; -webkit-filter: url(#service-shadow); filter: url(#service-shadow); } .service use { fill: #fff; } .service text { fill: #4d4d4d; } .service.active .icon-wrapper, .service:hover .icon-wrapper { -webkit-transform: scale(1.15) translateY(-5px); transform: scale(1.15) translateY(-5px); } .service.active .icon-wrapper, .service.active .icon-wrapper > *, .service:hover .icon-wrapper, .service:hover .icon-wrapper > * { -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .service.active .icon-wrapper circle.shadow, .service:hover .icon-wrapper circle.shadow { fill-opacity: 0.4; } .service.active text, .service:hover text { fill: #ea3636; font-weight: bold; } </style></head><body> <div class="container"> <svg id="circle-nav-services" width="100%" height="100%" viewBox="0 0 650 550"> <defs> <filter id="service-shadow" height="2" width="2" y="-.5" x="-.5"> <feOffset result="offOut" in="SourceGraphic" dx="0" dy="5" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="12" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <symbol id="circle-nav-copy" viewBox="0 0 300 300"> <defs> <style> .cls-1 { font-size: 28px; font-family: Roboto-Bold, Roboto; font-weight: 700; } .cls-2 { letter-spacing: -0.02em; } .cls-3 { letter-spacing: -0.01em; } .cls-4 { letter-spacing: -0.01em; } .cls-5 { font-size: 16px; font-family: Roboto-Regular, Roboto; } .cls-6 { letter-spacing: -0.01em; } .cls-7 { letter-spacing: -0.01em; } .cls-8 { letter-spacing: -0.02em; } .cls-9 { letter-spacing: -0.01em; } .cls-10 { letter-spacing: 0.01em; } .cls-11 { letter-spacing: -0.01em; } .cls-12 { letter-spacing: -0.04em; } .cls-13 { letter-spacing: -0.02em; } .cls-14 { letter-spacing: 0.01em; } .cls-15 { letter-spacing: -0.01em; } .cls-16 { letter-spacing: -0.06em; } .cls-17 { letter-spacing: -0.02em; } .cls-18 { letter-spacing: 0.01em; } .cls-19 { letter-spacing: 0.02em; } .cls-20 { letter-spacing: -0.01em; } .cls-21 { letter-spacing: -0.03em; } </style> </defs> <title>Artboard 1</title> <text class="cls-1" transform="translate(99 1865)">P <tspan class="cls-2" x="18" y="0">r</tspan> <tspan x="28" y="0">ocess</tspan> <tspan class="cls-3" x="-22" y="28">A</tspan> <tspan x="-4" y="28">u</tspan> <tspan class="cls-4" x="12" y="28">t</tspan> <tspan x="21" y="28">omation</tspan> </text> <text class="cls-5" transform="translate(57 1930)">Our p <tspan class="cls-6" x="38" y="0">r</tspan> <tspan x="43" y="0">ocess and Industrial </tspan> <tspan class="cls-3" x="1" y="19">A</tspan> <tspan x="12" y="19">u</tspan> <tspan class="cls-6" x="21" y="19">t</tspan> <tspan x="26" y="19">omation personnel a</tspan> <tspan class="cls-7" x="172" y="19">r</tspan> <tspan x="177" y="19">e </tspan> <tspan x="12" y="38">t</tspan> <tspan class="cls-8" x="17" y="38">r</tspan> <tspan x="22" y="38">ained </tspan> <tspan class="cls-6" x="65" y="38">t</tspan> <tspan x="70" y="38">o of</tspan> <tspan class="cls-9" x="98" y="38">f</tspan> <tspan x="103" y="38">er a b</tspan> <tspan class="cls-6" x="143" y="38">r</tspan> <tspan x="148" y="38">oad </tspan> <tspan x="-7" y="58">scope of se</tspan> <tspan class="cls-10" x="75" y="58">r</tspan> <tspan x="81" y="58">vices </tspan> <tspan class="cls-6" x="121" y="58">t</tspan> <tspan x="126" y="58">o meet or </tspan> <tspan x="1" y="77">e</tspan> <tspan class="cls-6" x="9" y="77">x</tspan> <tspan x="17" y="77">ceed </tspan> <tspan class="cls-11" x="55" y="77">y</tspan> <tspan x="63" y="77">our p</tspan> <tspan class="cls-6" x="99" y="77">r</tspan> <tspan x="104" y="77">oject goals.</tspan> </text> <text class="cls-1" transform="translate(89 1566)"> <tspan x="16" y="0">Menu 6</tspan> </text> <text class="cls-5" transform="translate(47 1636)"> <tspan class="cls-13">W</tspan> <tspan x="14" y="0">e ensu</tspan> <tspan class="cls-7" x="61" y="0">r</tspan> <tspan x="66" y="0">e that </tspan> <tspan class="cls-11" x="110" y="0">y</tspan> <tspan x="118" y="0">our p</tspan> <tspan class="cls-6" x="154" y="0">r</tspan> <tspan x="159" y="0">ocess, </tspan> <tspan x="10" y="19">manufacturing, packaging </tspan> <tspan x="-5" y="38">equipment, facility and utilities </tspan> <tspan x="-10" y="58">pe</tspan> <tspan class="cls-14" x="7" y="58">r</tspan> <tspan x="13" y="58">form as the intended design.</tspan> </text> <text class="cls-1" transform="translate(105 966)"> <tspan x="-38" y="28">Menu 4</tspan> </text> <text class="cls-5" transform="translate(65 1037)"> <tspan class="cls-13">W</tspan> <tspan x="14" y="0">e help </tspan> <tspan class="cls-11" x="61" y="0">y</tspan> <tspan x="68" y="0">our ope</tspan> <tspan class="cls-8" x="122" y="0">r</tspan> <tspan x="127" y="0">ations </tspan> <tspan x="-23" y="19">complete their p</tspan> <tspan class="cls-6" x="93" y="19">r</tspan> <tspan x="98" y="19">oject on time, </tspan> <tspan x="-8" y="38">under budget and meeting </tspan> <tspan x="-8" y="58">100% of the </tspan> <tspan class="cls-7" x="80" y="58">r</tspan> <tspan x="85" y="58">equi</tspan> <tspan class="cls-7" x="116" y="58">r</tspan> <tspan x="121" y="58">ements.</tspan> </text> <text class="cls-1" transform="translate(75 666)">Menu 3</text> <text class="cls-5" transform="translate(83 710)">Cost <tspan class="cls-7" x="37" y="0">r</tspan> <tspan x="42" y="0">eduction and </tspan> <tspan x="-27" y="19">p</tspan> <tspan class="cls-6" x="-18" y="19">r</tspan> <tspan x="-13" y="19">oductivity enhancement.</tspan> <tspan x="-19" y="38">Principia engineers h</tspan> <tspan class="cls-11" x="129" y="38">a</tspan> <tspan class="cls-15" x="138" y="38">v</tspan> <tspan x="145" y="38">e </tspan> <tspan x="-15" y="58">hands-on experience in </tspan> <tspan x="-23" y="77">driving successful Ene</tspan> <tspan class="cls-7" x="136" y="77">r</tspan> <tspan x="141" y="77">gy </tspan> <tspan x="-19" y="96">Managment P</tspan> <tspan class="cls-6" x="90" y="96">r</tspan> <tspan x="95" y="96">og</tspan> <tspan class="cls-8" x="113" y="96">r</tspan> <tspan x="118" y="96">ams.</tspan> </text> <text class="cls-1" transform="translate(87 65)">Menu 1</text> <text class="cls-5" transform="translate(63 108)">Our highly skilled staff is <tspan x="-9" y="19">disciplined </tspan> <tspan class="cls-6" x="71" y="19">t</tspan> <tspan x="76" y="19">o work within a </tspan> <tspan class="cls-8" x="-1" y="38">r</tspan> <tspan x="4" y="38">ange of industries in the </tspan> <tspan x="-18" y="58">dynamic Li</tspan> <tspan class="cls-9" x="59" y="58">f</tspan> <tspan x="64" y="58">e Sciences sec</tspan> <tspan class="cls-6" x="170" y="58">t</tspan> <tspan x="175" y="58">o</tspan> <tspan class="cls-16" x="184" y="58">r</tspan> <tspan x="189" y="58">, </tspan> <tspan class="cls-6" x="3" y="77">t</tspan> <tspan x="8" y="77">o meet demanding and </tspan> <tspan class="cls-15" x="8" y="96">e</tspan> <tspan class="cls-11" x="16" y="96">v</tspan> <tspan x="24" y="96">olving expectations.</tspan> </text> <text class="cls-1" transform="translate(87 365)"> <tspan class="cls-17">V</tspan> <tspan x="18" y="0">alidation</tspan> <tspan x="-32" y="28">(Q&C and CS</tspan> <tspan class="cls-18" x="130" y="28">V</tspan> <tspan x="149" y="28">)</tspan> </text> <text class="cls-5" transform="translate(46 437)">As pa <tspan class="cls-19" x="40" y="0">r</tspan> <tspan x="46" y="0">t of our wide expe</tspan> <tspan class="cls-19" x="173" y="0">r</tspan> <tspan x="178" y="0">tise, </tspan> <tspan x="1" y="19">we p</tspan> <tspan class="cls-6" x="34" y="19">r</tspan> <tspan class="cls-11" x="39" y="19">o</tspan> <tspan x="48" y="19">vide Commissioning & </tspan> <tspan x="6" y="38">Qualification and Computer </tspan> <tspan x="2" y="58">System </tspan> <tspan class="cls-17" x="59" y="58">V</tspan> <tspan x="69" y="58">alidation Solutions.</tspan> </text> <text class="cls-1" transform="translate(138 1266)"> <tspan x="-80" y="28">Menu 5</tspan> </text> <text class="cls-5" transform="translate(47 1323)">Our Manufacturing E <tspan class="cls-6" x="146" y="0">x</tspan> <tspan x="154" y="0">ecution </tspan> <tspan x="38" y="19">Systems comprise </tspan> <tspan x="0" y="38">applications that connect the </tspan> <tspan class="cls-7" x="-5" y="58">r</tspan> <tspan x="0" y="58">eal-time data originated at the </tspan> <tspan x="-1" y="77">shop floor with the enterprise </tspan> <tspan x="40" y="96">l</tspan> <tspan class="cls-15" x="44" y="96">ev</tspan> <tspan x="60" y="96">el applications. </tspan> </text> </symbol> <symbol id="industries" viewBox="0 0 512 512"> <path d="M17.528 189.7l29.46 5.893c1.875 5.74 4.193 11.33 6.924 16.708l-16.667 25.002c-5.745 8.618-4.6 20.188 2.725 27.51l13.196 13.197c7.32 7.322 18.892 8.47 27.51 2.724l25.002-16.666c5.378 2.732 10.97 5.05 16.708 6.922l5.893 29.46c2.03 10.157 11.022 17.53 21.378 17.53h18.663c10.357 0 19.35-7.373 21.38-17.528l5.893-29.462c5.74-1.874 11.33-4.19 16.708-6.922l25.003 16.666c8.617 5.745 20.188 4.602 27.51-2.724l13.197-13.197c7.323-7.323 8.47-18.893 2.724-27.51L264.067 212.3c2.73-5.377 5.05-10.97 6.923-16.707l29.46-5.892c10.157-2.03 17.53-11.022 17.53-21.378v-1.248h26.946V277.2c0 4.464 3.618 8.083 8.084 8.083 4.466 0 8.084-3.62 8.084-8.084V167.073H478.82c3.464 8.69 6.444 17.646 8.902 26.85 1.153 4.314 5.583 6.876 9.897 5.725 4.313-1.152 6.876-5.584 5.724-9.898C473.492 78.03 371.78 0 256 0c-14.635 0-29.312 1.246-43.626 3.704-4.4.756-7.354 4.936-6.6 9.336s4.928 7.356 9.337 6.6c13.412-2.303 27.17-3.47 40.89-3.47 92.894 0 176.116 53.604 215.667 134.736H361.095v-45.81c0-24.357-8.524-48.1-24.003-66.854-2.84-3.443-7.937-3.93-11.38-1.09-3.444 2.842-3.93 7.938-1.09 11.382 13.094 15.864 20.304 35.952 20.304 56.56v45.812H317.98v-1.247c0-10.357-7.373-19.35-17.53-21.38l-29.46-5.892c-1.874-5.74-4.192-11.33-6.923-16.708l16.668-25c5.745-8.62 4.6-20.19-2.725-27.512l-13.196-13.196c-7.32-7.323-18.89-8.47-27.51-2.725l-25.002 16.667c-5.378-2.732-10.97-5.05-16.708-6.923L189.7 17.53C187.67 7.372 178.68 0 168.32 0H149.66c-10.356 0-19.348 7.372-21.38 17.527l-5.892 29.462c-5.74 1.873-11.33 4.19-16.708 6.922L80.676 37.244c-8.617-5.745-20.188-4.602-27.51 2.724L39.97 53.165c-7.323 7.323-8.47 18.893-2.724 27.51l16.667 25.002c-2.73 5.378-5.048 10.97-6.922 16.708l-29.46 5.892C7.37 130.31 0 139.3 0 149.657v18.664c0 10.358 7.372 19.35 17.528 21.38zm-1.36-40.042c0-2.676 1.906-5 4.53-5.524l34.205-6.84c2.985-.598 5.38-2.82 6.2-5.75 2.18-7.793 5.298-15.315 9.263-22.355 1.494-2.653 1.37-5.92-.318-8.453l-19.35-29.03c-1.485-2.226-1.19-5.216.703-7.11l13.2-13.196c1.89-1.892 4.88-2.188 7.108-.703l29.03 19.353c2.532 1.688 5.8 1.81 8.452.317 7.04-3.966 14.56-7.082 22.353-9.262 2.93-.82 5.152-3.215 5.75-6.2l6.84-34.207c.525-2.625 2.85-4.53 5.525-4.53h18.663c2.676 0 5 1.906 5.525 4.53l6.842 34.208c.597 2.984 2.82 5.38 5.75 6.2 7.792 2.18 15.313 5.296 22.353 9.26 2.652 1.494 5.918 1.373 8.452-.316l29.03-19.353c2.225-1.483 5.215-1.19 7.11.704L266.578 64.6c1.894 1.893 2.19 4.883.705 7.11l-19.353 29.03c-1.688 2.532-1.812 5.798-.318 8.45 3.966 7.04 7.082 14.562 9.263 22.357.82 2.93 3.215 5.15 6.2 5.748l34.206 6.84c2.626.526 4.53 2.85 4.53 5.525v18.663c0 2.677-1.906 5-4.53 5.525l-34.205 6.84c-2.985.598-5.38 2.82-6.2 5.75-2.18 7.793-5.298 15.315-9.263 22.355-1.494 2.652-1.37 5.92.318 8.452l19.353 29.03c1.484 2.226 1.19 5.216-.704 7.11l-13.2 13.196c-1.89 1.892-4.88 2.188-7.108.704l-29.03-19.353c-2.534-1.69-5.8-1.812-8.452-.318-7.04 3.966-14.562 7.082-22.353 9.262-2.93.82-5.152 3.215-5.75 6.2l-6.84 34.207c-.525 2.626-2.85 4.53-5.525 4.53H149.66c-2.676 0-5-1.905-5.525-4.53l-6.842-34.207c-.597-2.984-2.82-5.38-5.75-6.2-7.792-2.18-15.313-5.296-22.353-9.26-1.235-.696-2.602-1.04-3.968-1.04-1.566 0-3.13.454-4.484 1.357l-29.03 19.353c-2.226 1.483-5.215 1.19-7.11-.704l-13.195-13.2c-1.894-1.892-2.19-4.882-.705-7.11l19.353-29.028c1.69-2.533 1.813-5.8.32-8.452-3.967-7.04-7.083-14.56-9.264-22.356-.82-2.93-3.215-5.15-6.2-5.748l-34.206-6.84c-2.625-.525-4.53-2.85-4.53-5.525V149.66z"/> <path d="M158.99 212.345c14.046 0 27.31-5.413 37.34-15.244 3.19-3.124 3.24-8.243.115-11.43-3.126-3.193-8.245-3.24-11.43-.117-6.993 6.85-16.236 10.624-26.027 10.624-20.505 0-37.187-16.683-37.187-37.187 0-20.505 16.684-37.187 37.188-37.187 20.505 0 37.187 16.683 37.187 37.187 0 4.465 3.62 8.084 8.084 8.084 4.465 0 8.083-3.62 8.083-8.084 0-29.42-23.936-53.356-53.356-53.356S105.63 129.57 105.63 158.99c.004 29.42 23.94 53.355 53.36 53.355zM353.01 369.718c-20.505 0-37.187 16.683-37.187 37.187 0 20.505 16.683 37.187 37.187 37.187 20.505 0 37.187-16.683 37.187-37.187 0-20.505-16.682-37.187-37.187-37.187zm0 58.206c-11.59 0-21.02-9.43-21.02-21.02s9.43-21.018 21.02-21.018 21.02 9.43 21.02 21.02-9.43 21.018-21.02 21.018z"/> <path d="M509.79 222.216c-.584-4.427-4.652-7.538-9.073-6.958-4.426.584-7.542 4.646-6.958 9.073 1.373 10.42 2.07 21.077 2.07 31.67 0 30.53-5.84 60.79-17.047 88.927h-42.726c-.696-2.988-2.206-5.808-4.493-8.093l-8.483-8.483c-5.678-5.677-14.648-6.564-21.327-2.11l-14.686 9.79c-2.61-1.255-5.288-2.365-8.022-3.323l-3.46-17.306c-1.576-7.873-8.547-13.587-16.576-13.587h-12c-8.028 0-15 5.715-16.574 13.588l-3.46 17.307c-2.735.96-5.413 2.068-8.023 3.323l-14.686-9.79c-6.68-4.454-15.65-3.566-21.327 2.11l-8.485 8.485c-5.678 5.678-6.565 14.65-2.11 21.33l9.788 14.684c-1.255 2.61-2.365 5.287-3.323 8.02l-17.308 3.462c-7.873 1.575-13.587 8.546-13.587 16.575v11.998c0 8.03 5.715 15 13.588 16.575l17.307 3.46c.958 2.735 2.068 5.413 3.323 8.023l-9.79 14.684c-4.454 6.68-3.567 15.652 2.113 21.33l8.483 8.484c5.68 5.68 14.65 6.566 21.327 2.113l14.686-9.79c2.61 1.254 5.288 2.364 8.022 3.322l3.46 17.306c1.576 7.875 8.547 13.59 16.576 13.59h12c8.028 0 15-5.716 16.574-13.59l3.46-17.305c2.735-.96 5.413-2.068 8.023-3.323l14.686 9.79c6.682 4.456 15.652 3.566 21.327-2.11l8.485-8.485c5.678-5.678 6.565-14.65 2.11-21.33l-9.788-14.684c1.255-2.61 2.365-5.288 3.323-8.022l17.308-3.46c7.873-1.575 13.587-8.546 13.587-16.575v-11.998c0-8.03-5.715-15-13.587-16.575l-17.308-3.46c-.958-2.735-2.068-5.413-3.323-8.023l7.834-11.754h39.914c-1.742 3.575-3.575 7.11-5.5 10.595-2.156 3.91-.736 8.828 3.173 10.985 3.908 2.158 8.826.737 10.983-3.173 4.11-7.446 7.833-15.09 11.164-22.902.14-.282.264-.575.372-.874C505.076 324.34 512 290.324 512 256c0-11.298-.744-22.665-2.21-33.784zm-68.444 177.97c.342.07.59.372.59.72v11.998c0 .35-.247.652-.59.72l-21.99 4.398c-2.985.597-5.38 2.82-6.2 5.75-1.34 4.787-3.253 9.407-5.69 13.73-1.493 2.653-1.37 5.92.32 8.453l12.44 18.662c.193.29.155.68-.092.926l-8.485 8.484c-.248.246-.638.285-.927.092l-18.662-12.442c-2.533-1.69-5.8-1.81-8.45-.317-4.327 2.437-8.946 4.35-13.733 5.69-2.93.82-5.15 3.216-5.748 6.2l-4.4 21.99c-.067.343-.37.592-.72.592h-11.997c-.348 0-.65-.248-.72-.59l-4.398-21.99c-.597-2.986-2.82-5.38-5.748-6.2-4.787-1.34-9.408-3.255-13.732-5.69-1.235-.696-2.602-1.04-3.968-1.04-1.566 0-3.13.454-4.484 1.357L295.3 474.12c-.29.194-.68.154-.926-.092l-8.483-8.483c-.246-.247-.285-.636-.09-.928l12.44-18.662c1.687-2.533 1.81-5.8.317-8.452-2.437-4.325-4.35-8.944-5.69-13.73-.82-2.932-3.214-5.153-6.2-5.75l-21.988-4.4c-.344-.068-.593-.37-.593-.72v-11.998c0-.35.248-.652.59-.72l21.99-4.398c2.986-.597 5.38-2.82 6.2-5.75 1.34-4.787 3.254-9.407 5.69-13.73 1.494-2.653 1.37-5.92-.318-8.453l-12.44-18.662c-.195-.29-.157-.68.09-.926l8.485-8.484c.245-.247.637-.286.926-.092l18.663 12.44c2.532 1.69 5.8 1.81 8.452.318 4.326-2.436 8.945-4.35 13.732-5.69 2.93-.82 5.15-3.215 5.748-6.2l4.398-21.99c.068-.342.372-.59.72-.59h11.998c.35 0 .652.247.72.59l4.4 21.99c.596 2.985 2.818 5.38 5.747 6.2 4.787 1.34 9.408 3.254 13.732 5.69 2.65 1.493 5.917 1.37 8.45-.317l18.663-12.44c.29-.195.68-.156.927.092l8.483 8.483c.247.247.286.636.092.928l-12.44 18.662c-1.688 2.533-1.812 5.8-.318 8.452 2.437 4.324 4.35 8.944 5.69 13.73.82 2.932 3.214 5.153 6.2 5.75l21.99 4.4zM271.08 495.365c-4.99.31-10.062.467-15.08.467-64.06 0-124.29-24.947-169.586-70.244-3.158-3.158-8.276-3.156-11.433 0s-3.156 8.275 0 11.432C123.334 485.372 187.62 512 256 512c5.35 0 10.76-.167 16.08-.497 4.456-.276 7.845-4.113 7.568-8.57-.275-4.454-4.075-7.85-8.568-7.568z"/> <path d="M40.313 361.095h110.592v45.81c0 20.864 6.1 41.026 17.646 58.306 1.558 2.335 4.12 3.596 6.73 3.596 1.542 0 3.103-.442 4.483-1.362 3.712-2.48 4.71-7.5 2.23-11.213-9.76-14.612-14.92-31.67-14.92-49.323v-45.81h80.842c4.466 0 8.084-3.62 8.084-8.085 0-4.465-3.62-8.084-8.085-8.084h-80.842V339c0-4.465-3.618-8.084-8.084-8.084-4.467 0-8.085 3.62-8.085 8.084v5.928H33.137c-11.19-27.992-16.97-58.004-16.97-88.928 0-17.193 1.828-34.352 5.433-50.998.945-4.363-1.826-8.667-6.19-9.612-4.37-.943-8.666 1.827-9.612 6.19C1.95 219.348 0 237.657 0 256c0 55.886 17.686 108.983 51.146 153.554 2.68 3.57 7.748 4.292 11.32 1.61 3.57-2.68 4.29-7.747 1.61-11.318-9.212-12.272-17.15-25.234-23.763-38.75z"/> </symbol> <symbol id="validation" viewBox="0 0 512 512"> <path d="M245.221 328.758h21.558c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084h-21.558c-4.465 0-8.084 3.62-8.084 8.084 0 4.464 3.619 8.084 8.084 8.084zM299.116 328.758h21.558c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084h-21.558c-4.465 0-8.084 3.62-8.084 8.084 0 4.464 3.619 8.084 8.084 8.084zM243.884 206.589c1.505 2.258 4.034 3.6 6.725 3.6.167 0 .335-.005.503-.016 2.876-.179 5.44-1.876 6.728-4.453l32.337-64.674c1.997-3.994.378-8.85-3.615-10.846-3.991-1.996-8.848-.377-10.846 3.615l-26.108 52.213-13.831-20.745c-2.477-3.714-7.496-4.719-11.21-2.242-3.716 2.476-4.719 7.496-2.242 11.21l21.559 32.338zM191.326 328.758h21.558c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084h-21.558c-4.465 0-8.084 3.62-8.084 8.084 0 4.464 3.62 8.084 8.084 8.084z"/> <path d="M493.137 32.337H361.095V18.863c0-10.4-8.463-18.863-18.863-18.863H169.768c-10.401 0-18.863 8.463-18.863 18.863v13.474H18.863C8.463 32.337 0 40.799 0 51.2v291.032c0 10.401 8.463 18.863 18.863 18.863h175.158v13.474c0 10.401 8.463 18.863 18.863 18.863h13.474v59.284h-35.032c-10.401 0-18.863 8.463-18.863 18.863v24.253H148.21c-4.465 0-8.084 3.62-8.084 8.084 0 4.465 3.62 8.084 8.084 8.084h118.568c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084h-78.147v-24.253c0-1.485 1.209-2.695 2.695-2.695h129.347c1.485 0 2.695 1.209 2.695 2.695v24.253h-24.253c-4.465 0-8.084 3.62-8.084 8.084 0 4.465 3.62 8.084 8.084 8.084h64.674c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084h-24.253v-24.253c0-10.401-8.463-18.863-18.863-18.863h-35.032v-59.284h13.474c10.401 0 18.863-8.463 18.863-18.863v-13.474h175.158c10.401 0 18.863-8.463 18.863-18.863V51.2c.001-10.401-8.462-18.863-18.862-18.863zM269.474 452.716h-26.947v-59.284h26.947v59.284zm226.358-110.484c0 1.485-1.209 2.695-2.695 2.695h-204.8c-4.465 0-8.084 3.62-8.084 8.084 0 4.465 3.62 8.084 8.084 8.084h13.474v13.474c0 1.485-1.209 2.695-2.695 2.695h-86.232c-1.485 0-2.695-1.209-2.695-2.695v-13.474H256c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084H18.863c-1.485 0-2.695-1.209-2.695-2.695v-45.81h479.663v45.81zm0-61.979H16.168v-102.4H78.54l14.504 29.007c2.297 4.594 6.915 7.447 12.051 7.447s9.754-2.854 12.051-7.448l14.504-29.006h41.201c4.08 42.284 39.814 75.453 83.149 75.453s79.069-33.169 83.149-75.453h46.199c3.062 0 5.862-1.73 7.231-4.469l14.327-28.654 14.327 28.654c1.369 2.739 4.168 4.469 7.231 4.469h67.368v102.4zm-307.2-110.485c0-37.146 30.222-67.368 67.368-67.368s67.368 30.222 67.368 67.368-30.222 67.369-67.368 67.369-67.368-30.222-67.368-67.369zm307.2-8.084H433.46l-14.504-29.007c-2.297-4.594-6.915-7.447-12.051-7.447s-9.754 2.854-12.051 7.448l-14.503 29.006h-41.203c-4.08-42.284-39.814-75.453-83.149-75.453S176.93 119.4 172.85 161.684h-46.198c-3.062 0-5.861 1.73-7.231 4.469l-14.327 28.655-14.327-28.655c-1.369-2.739-4.168-4.469-7.231-4.469H16.168V51.2c0-1.485 1.209-2.695 2.695-2.695h269.474c4.465 0 8.084-3.62 8.084-8.084 0-4.465-3.62-8.084-8.084-8.084H167.074V18.863c0-1.485 1.209-2.695 2.695-2.695h172.463c1.485 0 2.695 1.209 2.695 2.695v13.474h-24.253c-4.465 0-8.084 3.62-8.084 8.084 0 4.465 3.62 8.084 8.084 8.084h172.463c1.485 0 2.695 1.209 2.695 2.695v110.484z"/> </symbol> <symbol id="engineering" viewBox="0 0 512 512"> <path d="M482.358 0H105.095c-4.465 0-8.084 3.619-8.084 8.084s3.62 8.084 8.084 8.084h377.263c7.43 0 13.474 6.044 13.474 13.474v261.389h-45.81c-4.465 0-8.084 3.619-8.084 8.084 0 4.466 3.62 8.084 8.084 8.084h45.81v78.147c0 4.796-2.584 9.271-6.742 11.676-3.864 2.236-5.186 7.181-2.95 11.046 1.498 2.589 4.213 4.037 7.005 4.037 1.373 0 2.766-.35 4.041-1.088 9.137-5.286 14.815-15.123 14.815-25.671V29.642C512 13.298 498.703 0 482.358 0z"/> <path d="M420.379 353.01c0 16.344 13.297 29.642 29.642 29.642s29.642-13.298 29.642-29.642-13.297-29.642-29.642-29.642-29.642 13.298-29.642 29.642zm29.642-13.473c7.43 0 13.474 6.044 13.474 13.474s-6.044 13.474-13.474 13.474-13.474-6.044-13.474-13.474 6.044-13.474 13.474-13.474zM177.853 406.905c0-4.466-3.62-8.084-8.084-8.084H29.642c-7.43 0-13.474-6.044-13.474-13.474V307.2h196.716c4.465 0 8.084-3.618 8.084-8.084 0-4.466-3.62-8.084-8.084-8.084H16.168V29.642c0-7.43 6.044-13.474 13.474-13.474h43.116c4.465 0 8.084-3.619 8.084-8.084S77.223 0 72.758 0H29.642C13.297 0 0 13.298 0 29.642v355.705c0 16.344 13.297 29.642 29.642 29.642h140.126c4.465 0 8.085-3.618 8.085-8.084z"/> <path d="M453.953 400.724l-71.302-21.391v-25.285c5.782-2.746 11.217-6.263 16.143-10.489 13.183-11.309 21.896-26.992 24.537-44.158l8.985-58.407c8.768-3.359 15.009-11.862 15.009-21.796 0-6.231-2.426-12.089-6.832-16.495v-.001l-15.744-15.743-11.127-33.382c-6.435-19.303-23.528-32.768-43.452-34.755-2.979-6.503-9.551-11.032-17.16-11.032h-43.116c-7.609 0-14.18 4.529-17.16 11.032-19.924 1.987-37.017 15.452-43.452 34.755l-11.127 33.382-15.744 15.743c-4.406 4.406-6.833 10.265-6.833 16.496 0 9.934 6.241 18.438 15.009 21.796l8.985 58.407c2.641 17.167 11.356 32.849 24.537 44.158 4.926 4.225 10.361 7.741 16.143 10.489v25.285l-71.302 21.391c-21.824 6.547-36.488 26.255-36.488 49.041v43.372c0 10.401 8.463 18.863 18.863 18.863h194.021c4.465 0 8.084-3.618 8.084-8.084 0-4.466-3.62-8.084-8.084-8.084H258.695v-24.253c0-4.466-3.62-8.084-8.084-8.084s-8.084 3.618-8.084 8.084v24.253h-51.2c-1.485 0-2.695-1.208-2.695-2.695v-43.372c0-15.59 10.033-29.075 24.965-33.555l75.926-22.778h83.859l75.927 22.778c14.932 4.48 24.965 17.965 24.965 33.555v43.372c0 1.486-1.209 2.695-2.695 2.695h-51.2v-24.253c0-4.466-3.62-8.084-8.084-8.084s-8.084 3.618-8.084 8.084v32.337c0 4.466 3.62 8.084 8.084 8.084h59.284c10.401 0 18.863-8.463 18.863-18.863v-43.372c0-22.786-14.664-42.494-36.489-49.041zM238.908 226.357c-3.948 0-7.159-3.212-7.159-7.16 0-1.912.745-3.71 2.096-5.062l17.093-17.092c.887-.888 1.557-1.97 1.953-3.16l11.731-35.192c4.041-12.123 14.224-20.88 26.411-23.287v34.365c0 4.466 3.62 8.084 8.084 8.084 4.465 0 8.084-3.619 8.084-8.084v-43.116c0-1.486 1.209-2.695 2.695-2.695h43.116c1.485 0 2.695 1.208 2.695 2.695v43.116c0 4.466 3.62 8.084 8.084 8.084s8.084-3.619 8.084-8.084v-34.364c12.187 2.407 22.368 11.164 26.409 23.287l11.731 35.192c.397 1.191 1.066 2.273 1.953 3.16l17.092 17.091c1.333 1.333 2.098 3.179 2.098 5.063 0 3.949-3.211 7.16-7.159 7.16v-.001H238.908zm112.514 134.738c5.093 0 10.142-.536 15.064-1.578v17.746h-70.063v-17.746c4.922 1.042 9.969 1.578 15.064 1.578h9.189c4.465 0 8.084-3.618 8.084-8.084 0-4.466-3.62-8.084-8.084-8.084h-9.189c-28.132 0-51.655-20.181-55.932-47.986l-8.372-54.414h168.542l-8.371 54.414c-4.278 27.804-27.8 47.986-55.932 47.986-4.465 0-8.084 3.618-8.084 8.084-.002 4.465 3.618 8.084 8.084 8.084zM61.979 323.368c-16.345 0-29.642 13.298-29.642 29.642s13.297 29.642 29.642 29.642h75.453c16.345 0 29.642-13.298 29.642-29.642s-13.297-29.642-29.642-29.642H61.979zm88.926 29.642c0 7.43-6.044 13.474-13.474 13.474H61.979c-7.43 0-13.474-6.044-13.474-13.474s6.044-13.474 13.474-13.474h75.453c7.429.001 13.473 6.045 13.473 13.474z"/> <path d="M153.6 43.116H78.147c-7.43 0-13.474 6.044-13.474 13.474v32.337c0 7.43 6.044 13.474 13.474 13.474h29.642v19.257l-35.665 17.833c-4.596 2.296-7.45 6.915-7.45 12.052v4.118c0 5.137 2.854 9.756 7.448 12.051l35.668 17.834V204.8H78.147c-7.43 0-13.474 6.044-13.474 13.474v32.337c0 7.43 6.044 13.474 13.474 13.474H153.6c7.43 0 13.474-6.044 13.474-13.474v-8.084h24.253c4.465 0 8.084-3.618 8.084-8.084 0-4.466-3.62-8.084-8.084-8.084h-24.253v-8.084c0-7.43-6.044-13.474-13.474-13.474h-29.642v-19.257l35.665-17.833c4.596-2.296 7.45-6.915 7.45-12.052v-4.118c0-5.137-2.854-9.756-7.448-12.051l-35.668-17.834V102.4H153.6c7.43 0 13.474-6.044 13.474-13.474v-8.084h264.084v78.147c0 4.466 3.62 8.084 8.084 8.084 4.465 0 8.084-3.618 8.084-8.084V72.758c0-4.466-3.62-8.084-8.084-8.084H167.074V56.59c0-7.43-6.044-13.474-13.474-13.474zm-2.695 177.852v26.947H80.842v-26.947h70.063zm0-67.76v.786l-35.032 17.516-35.032-17.516v-.786l35.032-17.516 35.032 17.516zm0-66.976H80.842V59.284h70.063v26.948zM183.242 353.01c0 16.344 13.297 29.642 29.642 29.642s29.642-13.298 29.642-29.642-13.297-29.642-29.642-29.642-29.642 13.298-29.642 29.642zm43.116 0c0 7.43-6.044 13.474-13.474 13.474s-13.474-6.044-13.474-13.474 6.044-13.474 13.474-13.474 13.474 6.045 13.474 13.474z"/> </symbol> <symbol id="management" viewBox="0 0 512 512"> <path d="M174.91 70.063h97.505c6.268 0 12.107-3.097 15.621-8.287 3.514-5.19 4.222-11.763 1.895-17.582l-12.935-32.337C274.115 4.654 267.24 0 259.482 0h-71.636c-7.76 0-14.635 4.654-17.516 11.858l-12.935 32.337c-2.327 5.82-1.619 12.393 1.895 17.582s9.353 8.286 15.62 8.286zm-2.502-19.864l12.935-32.337c.412-1.028 1.394-1.693 2.502-1.693h71.636c1.108 0 2.09.665 2.502 1.693l12.935 32.337c.462 1.155.028 2.068-.271 2.511-.299.443-.987 1.185-2.231 1.185H174.91c-1.244 0-1.933-.743-2.231-1.185-.299-.442-.732-1.356-.271-2.511zM177.853 115.874c0-4.466-3.619-8.084-8.084-8.084H94.316c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.619 8.084 8.084 8.084h75.453c4.465 0 8.084-3.619 8.084-8.084zM496.836 176.277l-22.163-4.432c-1.332-3.935-2.926-7.781-4.765-11.503l12.537-18.806c4.97-7.456 3.98-17.465-2.356-23.802l-10.369-10.369c-5.945-5.945-15.123-7.185-22.393-3.208V61.979c0-16.344-13.298-29.642-29.642-29.642H309.895c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h67.369v26.981c-8.639.347-16.037 6.592-17.744 15.13l-4.432 22.162c-3.935 1.332-7.78 2.926-11.504 4.766l-18.805-12.537c-7.457-4.97-17.466-3.979-23.802 2.356l-10.369 10.369c-6.336 6.337-7.326 16.346-2.356 23.802l12.537 18.805c-1.84 3.724-3.434 7.57-4.766 11.504l-22.161 4.432c-8.786 1.757-15.164 9.536-15.164 18.497v14.664c0 8.961 6.378 16.74 15.164 18.497l22.161 4.432c1.332 3.935 2.927 7.78 4.766 11.504l-12.537 18.805c-4.97 7.456-3.98 17.465 2.356 23.802l10.369 10.369c6.337 6.335 16.346 7.329 23.802 2.356l18.805-12.537c3.724 1.84 7.57 3.434 11.504 4.766l4.432 22.161c1.757 8.786 9.536 15.164 18.497 15.164h14.664c8.961 0 16.74-6.378 18.497-15.164l4.432-22.161c3.935-1.332 7.78-2.926 11.504-4.766l18.805 12.537c7.458 4.971 17.467 3.98 23.802-2.356l10.369-10.369c6.336-6.337 7.326-16.346 2.356-23.802l-12.537-18.805c1.84-3.724 3.434-7.57 4.766-11.504l22.161-4.432c8.786-1.757 15.164-9.536 15.164-18.497v-14.664c0-8.959-6.378-16.738-15.164-18.495zM393.432 48.505h24.253c7.43 0 13.474 6.044 13.474 13.474v52.869l-4.045 2.697c-3.724-1.84-7.57-3.434-11.504-4.766l-4.432-22.161c-1.707-8.538-9.105-14.783-17.744-15.13V48.505zm102.4 160.932c0 1.279-.911 2.392-2.167 2.642l-26.877 5.375c-2.985.597-5.38 2.819-6.2 5.749-1.674 5.986-4.069 11.767-7.118 17.181-1.494 2.653-1.37 5.919.318 8.452l15.205 22.807c.71 1.065.568 2.495-.337 3.4l-10.369 10.369c-.905.906-2.334 1.048-3.4.337l-22.807-15.205c-2.534-1.69-5.8-1.811-8.452-.318-5.413 3.049-11.194 5.443-17.181 7.118-2.931.82-5.152 3.215-5.75 6.2l-5.375 26.877c-.25 1.256-1.361 2.167-2.642 2.167h-14.664c-1.279 0-2.392-.911-2.642-2.167l-5.375-26.877c-.597-2.985-2.819-5.38-5.75-6.2-5.986-1.674-11.767-4.069-17.181-7.118-1.235-.695-2.602-1.04-3.968-1.04-1.567 0-3.13.455-4.484 1.358l-22.807 15.205c-1.066.71-2.494.569-3.4-.337l-10.369-10.369c-.905-.904-1.048-2.335-.337-3.4l15.205-22.807c1.688-2.533 1.812-5.799.318-8.452-3.049-5.413-5.443-11.194-7.118-17.181-.82-2.931-3.215-5.152-6.2-5.75l-26.877-5.375c-1.256-.25-2.167-1.361-2.167-2.642v-14.664c0-1.279.911-2.392 2.167-2.642l26.877-5.375c2.985-.597 5.38-2.819 6.2-5.75 1.674-5.986 4.069-11.767 7.118-17.181 1.494-2.653 1.37-5.919-.318-8.452l-15.205-22.807c-.71-1.065-.568-2.495.337-3.4l10.369-10.369c.904-.907 2.333-1.049 3.4-.337l22.807 15.205c2.533 1.689 5.799 1.81 8.452.318 5.413-3.049 11.194-5.443 17.181-7.118 2.931-.82 5.152-3.215 5.75-6.2l5.375-26.877c.25-1.256 1.361-2.167 2.642-2.167h14.664c1.279 0 2.392.911 2.642 2.167l5.375 26.877c.597 2.985 2.819 5.38 5.75 6.2 5.986 1.674 11.767 4.069 17.181 7.118 2.653 1.494 5.919 1.372 8.452-.318l22.807-15.205c1.066-.711 2.495-.569 3.4.337l10.369 10.369c.905.904 1.048 2.335.337 3.4l-15.205 22.807c-1.688 2.533-1.812 5.799-.318 8.452 3.047 5.41 5.442 11.191 7.118 17.182.82 2.93 3.215 5.151 6.2 5.748l26.877 5.375c1.256.25 2.167 1.361 2.167 2.642v14.666z"/> <path d="M385.347 158.451c-24.072 0-43.655 19.583-43.655 43.655s19.583 43.655 43.655 43.655c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084-15.156 0-27.486-12.33-27.486-27.486s12.33-27.486 27.486-27.486 27.486 12.33 27.486 27.486c0 6.079-1.942 11.837-5.617 16.653-2.709 3.549-2.028 8.622 1.522 11.331 3.549 2.71 8.623 2.026 11.331-1.522 5.844-7.657 8.932-16.809 8.932-26.462.001-24.073-19.582-43.656-43.654-43.656zM94.316 140.126c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.619 8.084 8.084 8.084h53.895c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084H94.316z"/> <path d="M439.242 312.589c-4.466 0-8.084 3.618-8.084 8.084v161.684c0 7.43-6.044 13.474-13.474 13.474H29.642c-7.43 0-13.474-6.044-13.474-13.474V61.979c0-7.43 6.044-13.474 13.474-13.474h24.253v390.737c0 10.401 8.463 18.863 18.863 18.863h226.358c4.466 0 8.084-3.619 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084H72.758c-1.486 0-2.695-1.208-2.695-2.695v-24.253h307.2v24.254c0 1.486-1.208 2.695-2.695 2.695h-43.116c-4.466 0-8.084 3.619-8.084 8.084s3.619 8.084 8.084 8.084h43.116c10.401 0 18.863-8.463 18.863-18.863v-86.232c0-4.466-3.618-8.084-8.084-8.084-4.466 0-8.084 3.618-8.084 8.084v45.81h-307.2V317.98h35.449c4.115 0 7.949 1.843 10.521 5.056l30.17 37.712c5.655 7.07 14.092 11.125 23.147 11.125h57.547c8.602 0 16.768-3.728 22.4-10.23l40.263-46.456c2.924-3.374 2.559-8.48-.815-11.404-3.374-2.923-8.479-2.559-11.404.815l-40.263 46.457c-2.56 2.955-6.27 4.649-10.181 4.649h-57.546c-4.117 0-7.951-1.843-10.521-5.056l-30.17-37.713c-5.657-7.069-14.095-11.124-23.147-11.124h-35.45V210.19h158.451c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084H70.063V48.505h67.369c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084H29.642C13.298 32.337 0 45.635 0 61.979v420.379C0 498.702 13.298 512 29.642 512h388.042c16.344 0 29.642-13.298 29.642-29.642V320.674c0-4.466-3.618-8.085-8.084-8.085z"/> </symbol> <symbol id="manufacturing" viewBox="0 0 512 512"> <path d="M503.916 495.832h-13.474V299.116c0-4.465-3.62-8.084-8.084-8.084H331.453c-4.465 0-8.084 3.62-8.084 8.084s3.62 8.084 8.084 8.084h142.821v37.726H256c-4.465 0-8.084 3.62-8.084 8.084v75.453c0 4.465 3.62 8.084 8.084 8.084h218.274v59.284h-67.368c-4.465 0-8.084 3.62-8.084 8.084 0 4.465 3.62 8.084 8.084 8.084h97.01c4.465 0 8.084-3.62 8.084-8.084 0-4.464-3.62-8.083-8.084-8.083zm-29.642-75.453H414.99v-35.032c0-4.465-3.62-8.084-8.084-8.084-4.465 0-8.084 3.62-8.084 8.084v35.032h-59.284v-35.032c0-4.465-3.62-8.084-8.084-8.084s-8.084 3.62-8.084 8.084v35.032h-59.284v-59.284h210.189v59.284zM212.884 156.295c22.289 0 40.421-18.132 40.421-40.421s-18.132-40.421-40.421-40.421-40.421 18.132-40.421 40.421c0 22.288 18.133 40.421 40.421 40.421zm0-64.674c13.373 0 24.253 10.879 24.253 24.253 0 13.373-10.879 24.253-24.253 24.253s-24.253-10.879-24.253-24.253c.001-13.374 10.88-24.253 24.253-24.253z"/> <path d="M374.568 495.832H206.949c2.931-5.731 3.932-12.305 2.756-18.776l-13.719-75.453c-2.564-14.103-14.829-24.34-29.164-24.34h-7.132c-14.335 0-26.599 10.237-29.164 24.34l-13.719 75.453c-1.177 6.471-.175 13.045 2.756 18.776H37.726V93.456l38.714 7.97c4.372.902 8.648-1.914 9.548-6.287.9-4.373-1.914-8.648-6.287-9.548L31.273 75.62c-2.379-.492-4.854.115-6.738 1.651-1.884 1.535-2.977 3.836-2.977 6.266v412.295H8.084c-4.465 0-8.084 3.62-8.084 8.084C0 508.38 3.62 512 8.084 512h366.484c4.465 0 8.084-3.62 8.084-8.084.001-4.465-3.619-8.084-8.084-8.084zm-183.683-4.841c-2.568 3.076-6.338 4.841-10.345 4.841h-9.201v-45.81c0-4.465-3.62-8.084-8.084-8.084s-8.084 3.62-8.084 8.084v45.81h-9.201c-4.007 0-7.777-1.764-10.345-4.841-2.568-3.076-3.628-7.101-2.912-11.043l13.719-75.453c1.166-6.411 6.74-11.064 13.256-11.064h7.132c6.516 0 12.091 4.652 13.256 11.064l13.719 75.453c.72 3.942-.342 7.966-2.91 11.043zM338.942 155.469l49.1 10.11v101.2c0 4.465 3.62 8.084 8.084 8.084s8.084-3.62 8.084-8.084v-107.79c0-3.836-2.697-7.145-6.454-7.918l-55.555-11.438c-4.372-.903-8.648 1.913-9.548 6.287-.9 4.374 1.916 8.649 6.289 9.549z"/> <path d="M111.386 140.076l19.732 3.946c1.148 3.335 2.5 6.598 4.045 9.765L124 170.531c-4.713 7.069-3.773 16.559 2.234 22.566l9.426 9.426c6.007 6.007 15.498 6.947 22.566 2.234l16.745-11.163c3.167 1.547 6.429 2.897 9.765 4.045l3.946 19.733c1.666 8.33 9.041 14.376 17.536 14.376h13.33c8.495 0 15.87-6.046 17.536-14.376l3.946-19.732c3.335-1.148 6.598-2.5 9.765-4.045l16.745 11.163c7.069 4.711 16.559 3.773 22.566-2.234l9.426-9.426c6.007-6.007 6.947-15.497 2.234-22.566l-11.163-16.745c1.547-3.167 2.898-6.43 4.045-9.765l19.733-3.946c8.33-1.666 14.376-9.041 14.376-17.536v-13.33c0-8.495-6.046-15.87-14.376-17.536l-19.732-3.946c-1.148-3.335-2.5-6.598-4.045-9.765l11.163-16.744c4.713-7.069 3.773-16.559-2.234-22.566l-9.426-9.426c-6.006-6.007-15.497-6.946-22.566-2.234l-16.745 11.163c-3.167-1.547-6.429-2.897-9.765-4.045l-3.946-19.733C235.419 6.046 228.044 0 219.55 0h-13.33c-8.495 0-15.87 6.046-17.536 14.376l-3.946 19.732c-3.335 1.148-6.598 2.5-9.765 4.045L158.229 26.99c-7.07-4.713-16.56-3.773-22.566 2.234l-9.426 9.426c-6.007 6.007-6.947 15.497-2.234 22.566l11.163 16.745c-1.547 3.167-2.897 6.429-4.045 9.765l-19.733 3.946c-8.33 1.666-14.376 9.041-14.376 17.535v13.33c-.001 8.496 6.044 15.871 14.374 17.539zm1.793-30.868c0-.815.58-1.522 1.379-1.682l24.433-4.886c2.984-.597 5.38-2.819 6.2-5.748 1.508-5.389 3.663-10.59 6.405-15.457 1.494-2.653 1.371-5.92-.317-8.452l-13.823-20.735c-.452-.677-.361-1.588.214-2.163l9.426-9.426c.577-.577 1.486-.666 2.164-.214l20.734 13.823c2.532 1.688 5.799 1.811 8.452.317 4.867-2.741 10.066-4.896 15.457-6.405 2.93-.82 5.151-3.216 5.748-6.2l4.886-24.433c.16-.799.867-1.379 1.682-1.379h13.33c.815 0 1.522.58 1.682 1.379l4.886 24.433c.597 2.984 2.819 5.38 5.748 6.2 5.389 1.508 10.59 3.663 15.457 6.405 2.653 1.494 5.92 1.371 8.452-.317l20.734-13.823c.677-.453 1.587-.363 2.164.213l9.426 9.426c.576.577.666 1.486.214 2.164l-13.823 20.734c-1.689 2.533-1.812 5.799-.317 8.452 2.741 4.867 4.896 10.066 6.405 15.457.82 2.93 3.216 5.151 6.2 5.748l24.433 4.886c.799.16 1.379.867 1.379 1.682v13.33c0 .815-.58 1.522-1.379 1.682l-24.433 4.886c-2.985.597-5.38 2.819-6.2 5.749-1.507 5.387-3.662 10.587-6.404 15.456-1.494 2.652-1.371 5.919.317 8.452l13.823 20.735c.452.677.361 1.588-.214 2.163l-9.426 9.426c-.577.577-1.486.666-2.164.214l-20.734-13.823c-2.532-1.689-5.799-1.811-8.452-.317-4.867 2.741-10.066 4.896-15.457 6.405-2.93.82-5.151 3.216-5.748 6.2l-4.886 24.433c-.16.799-.867 1.379-1.682 1.379h-13.33c-.815 0-1.522-.58-1.682-1.379l-4.886-24.433c-.597-2.984-2.819-5.38-5.748-6.2-5.389-1.508-10.59-3.663-15.457-6.405-1.235-.695-2.603-1.04-3.968-1.04-1.567 0-3.131.455-4.485 1.358l-20.735 13.823c-.676.453-1.588.362-2.163-.214l-9.426-9.426c-.576-.577-.666-1.486-.215-2.164l13.823-20.734c1.689-2.533 1.812-5.799.317-8.452-2.741-4.867-4.896-10.066-6.405-15.457-.82-2.93-3.216-5.151-6.2-5.748l-24.433-4.886c-.799-.16-1.379-.867-1.379-1.682v-13.33zM158.989 291.032c-4.465 0-8.084 3.62-8.084 8.084v53.895c0 4.465 3.62 8.084 8.084 8.084 4.465 0 8.084-3.62 8.084-8.084V307.2h132.042c4.465 0 8.084-3.62 8.084-8.084s-3.62-8.084-8.084-8.084H158.989z"/> </symbol> <symbol id="technical" viewBox="0 0 512 512"> <path d="M83.537 350.316h64.674c10.401 0 18.863-8.463 18.863-18.863v-64.674c0-10.401-8.463-18.863-18.863-18.863H83.537c-10.401 0-18.863 8.463-18.863 18.863v10.779c0 4.466 3.62 8.084 8.084 8.084 4.465 0 8.084-3.618 8.084-8.084v-10.779c0-1.486 1.209-2.695 2.695-2.695h64.674c1.485 0 2.695 1.208 2.695 2.695v64.674c0 1.486-1.209 2.695-2.695 2.695H83.537c-1.485 0-2.695-1.208-2.695-2.695v-21.558c0-4.466-3.62-8.084-8.084-8.084-4.465 0-8.084 3.618-8.084 8.084v21.558c0 10.4 8.462 18.863 18.863 18.863zM444.632 377.263h-307.2c-4.465 0-8.084 3.618-8.084 8.084 0 4.466 3.62 8.084 8.084 8.084h307.2c28.231 0 51.2 22.969 51.2 51.2s-22.969 51.2-51.2 51.2H67.368c-28.231 0-51.2-22.969-51.2-51.2s22.969-51.2 51.2-51.2h37.726c4.465 0 8.084-3.618 8.084-8.084 0-4.466-3.62-8.084-8.084-8.084H67.368C30.222 377.263 0 407.484 0 444.632 0 481.779 30.222 512 67.368 512h377.263C481.778 512 512 481.779 512 444.632c0-37.148-30.222-67.369-67.368-67.369z"/> <path d="M59.284 443.554v2.156c0 4.466 3.62 8.084 8.084 8.084 4.465 0 8.084-3.619 8.084-8.084v-2.156c0-4.466-3.62-8.084-8.084-8.084-4.464-.001-8.084 3.618-8.084 8.084zM363.789 350.316h64.674c10.401 0 18.863-8.463 18.863-18.863V18.863c0-10.4-8.462-18.863-18.863-18.863h-64.674c-10.401 0-18.863 8.463-18.863 18.863v21.558c0 4.466 3.62 8.084 8.084 8.084 4.465 0 8.084-3.618 8.084-8.084V18.863c0-1.486 1.209-2.695 2.695-2.695h64.674c1.485 0 2.695 1.208 2.695 2.695v312.589c0 1.486-1.209 2.695-2.695 2.695h-64.674c-1.485 0-2.695-1.208-2.695-2.695V72.758c0-4.466-3.62-8.084-8.084-8.084-4.465 0-8.084 3.618-8.084 8.084v258.695c0 10.4 8.463 18.863 18.863 18.863zM223.663 350.316h64.674c10.401 0 18.863-8.463 18.863-18.863V180.547c0-10.401-8.463-18.863-18.863-18.863h-64.674c-10.401 0-18.863 8.463-18.863 18.863v21.558c0 4.466 3.62 8.084 8.084 8.084s8.084-3.618 8.084-8.084v-21.558c0-1.486 1.209-2.695 2.695-2.695h64.674c1.485 0 2.695 1.208 2.695 2.695v150.905c0 1.486-1.209 2.695-2.695 2.695h-64.674c-1.485 0-2.695-1.208-2.695-2.695v-97.011c0-4.466-3.62-8.084-8.084-8.084s-8.084 3.618-8.084 8.084v97.011c0 10.401 8.463 18.864 18.863 18.864zM291.032 444.632c0-19.317-15.716-35.032-35.032-35.032s-35.032 15.715-35.032 35.032c0 19.317 15.716 35.032 35.032 35.032s35.032-15.716 35.032-35.032zm-53.895 0c0-10.401 8.463-18.863 18.863-18.863 10.401 0 18.863 8.463 18.863 18.863 0 10.401-8.463 18.863-18.863 18.863-10.401 0-18.863-8.463-18.863-18.863zM452.716 445.709v-2.156c0-4.466-3.62-8.084-8.084-8.084-4.465 0-8.084 3.618-8.084 8.084v2.156c0 4.466 3.62 8.084 8.084 8.084 4.464.001 8.084-3.618 8.084-8.084z"/> <path d="M479.663 444.632c0-19.317-15.716-35.032-35.032-35.032-19.316 0-35.032 15.715-35.032 35.032 0 19.317 15.716 35.032 35.032 35.032 19.316-.001 35.032-15.716 35.032-35.032zm-53.895 0c0-10.401 8.463-18.863 18.863-18.863 10.401 0 18.863 8.463 18.863 18.863 0 10.401-8.463 18.863-18.863 18.863s-18.863-8.463-18.863-18.863zM32.337 444.632c0 19.317 15.716 35.032 35.032 35.032 19.316 0 35.032-15.715 35.032-35.032 0-19.317-15.716-35.032-35.032-35.032-19.316 0-35.032 15.715-35.032 35.032zm53.895 0c0 10.401-8.463 18.863-18.863 18.863-10.401 0-18.863-8.463-18.863-18.863 0-10.401 8.463-18.863 18.863-18.863 10.4-.001 18.863 8.462 18.863 18.863zM264.084 445.709v-2.156c0-4.466-3.62-8.084-8.084-8.084-4.465 0-8.084 3.618-8.084 8.084v2.156c0 4.466 3.62 8.084 8.084 8.084 4.465.001 8.084-3.618 8.084-8.084z"/> </symbol> <symbol id="process" viewBox="0 0 512 512"> <path d="M153.6 247.916h-10.779c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084H153.6c4.466 0 8.084-3.619 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084zM379.884 142.436c10.442 0 18.936-8.494 18.936-18.936 0-3.431-.932-6.799-2.698-9.742l-36.868-61.445c-3.402-5.672-9.623-9.195-16.238-9.195h-1.568c-6.614 0-12.837 3.523-16.237 9.194l-36.869 61.446c-1.766 2.943-2.698 6.311-2.698 9.742 0 10.442 8.494 18.936 18.936 18.936h75.304zm-78.072-18.937c0-.501.137-.994.395-1.424l36.868-61.448c.497-.828 1.407-1.343 2.373-1.343h1.568c.967 0 1.877.514 2.374 1.344l36.867 61.448c.258.43.395.923.395 1.424 0 1.526-1.242 2.768-2.768 2.768h-75.305c-1.527 0-2.768-1.243-2.767-2.769zM110.484 247.916H99.705c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h10.779c4.466 0 8.084-3.619 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084zM196.716 264.084c4.466 0 8.084-3.619 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084h-10.779c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h10.779zM188.632 164.379v-21.558c0-4.466-3.618-8.084-8.084-8.084-4.466 0-8.084 3.618-8.084 8.084v21.558c0 4.466 3.618 8.084 8.084 8.084 4.465 0 8.084-3.618 8.084-8.084z"/> <path d="M220.968 191.326v-75.453c0-4.466-3.619-8.084-8.084-8.084h-32.338c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084H204.8v59.284H91.621v-59.284h56.589c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084H83.537c-4.466 0-8.084 3.618-8.084 8.084v75.453c0 4.466 3.619 8.084 8.084 8.084h129.347c4.466.001 8.084-3.618 8.084-8.084z"/> <path d="M148.211 134.737c-4.466 0-8.084 3.618-8.084 8.084v21.558c0 4.466 3.618 8.084 8.084 8.084 4.466 0 8.084-3.618 8.084-8.084v-21.558c0-4.466-3.619-8.084-8.084-8.084zM107.79 142.821v21.558c0 4.466 3.618 8.084 8.084 8.084 4.466 0 8.084-3.618 8.084-8.084v-21.558c0-4.466-3.618-8.084-8.084-8.084-4.466 0-8.084 3.618-8.084 8.084zM482.358 495.832h-13.474V29.642C468.884 13.298 455.586 0 439.242 0H245.221c-16.344 0-29.642 13.298-29.642 29.642V51.2c0 4.466 3.618 8.084 8.084 8.084 4.466 0 8.084-3.619 8.084-8.084V29.642c0-7.43 6.044-13.474 13.474-13.474h194.021c7.43 0 13.474 6.044 13.474 13.474v142.821H277.558c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h175.158v199.411H256c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.619 8.084 8.084 8.084h196.716v91.621h-45.81c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h75.453c4.466 0 8.084-3.618 8.084-8.084-.001-4.465-3.619-8.083-8.085-8.083z"/> <path d="M396.126 274.863c16.344 0 29.642-13.298 29.642-29.642s-13.298-29.642-29.642-29.642-29.642 13.298-29.642 29.642 13.298 29.642 29.642 29.642zm0-43.116c7.43 0 13.474 6.044 13.474 13.474s-6.044 13.474-13.474 13.474c-7.43 0-13.474-6.044-13.474-13.474s6.044-13.474 13.474-13.474zM374.568 495.832H231.747V320.674c0-4.466-3.618-8.084-8.084-8.084-4.466 0-8.084 3.618-8.084 8.084v35.032h-40.421c-1.486 0-2.695-1.208-2.695-2.695v-24.444c9.13-1.312 16.168-9.185 16.168-18.671v-13.474h45.811c10.401 0 18.863-8.463 18.863-18.863V94.316c0-10.401-8.463-18.863-18.863-18.863H61.979c-10.401 0-18.863 8.463-18.863 18.863v183.242c0 10.401 8.463 18.863 18.863 18.863h45.811v13.474c0 9.487 7.039 17.359 16.168 18.671v24.444c0 28.231 22.969 51.2 51.2 51.2h40.421v91.621H29.642c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h344.926c4.466 0 8.084-3.618 8.084-8.084.001-4.465-3.618-8.083-8.084-8.083zM61.979 280.253c-1.486 0-2.695-1.208-2.695-2.695v-45.811h13.474c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.618-8.084-8.084-8.084H59.284V94.316c0-1.486 1.208-2.695 2.695-2.695h172.463c1.486 0 2.695 1.208 2.695 2.695v121.263H105.095c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.618 8.084 8.084 8.084h132.042v45.811c0 1.486-1.208 2.695-2.695 2.695H61.979zm64.674 32.336c-1.486 0-2.695-1.208-2.695-2.695V296.42h48.505v13.474c0 1.486-1.208 2.695-2.695 2.695h-43.115zm88.926 75.453h-40.421c-19.317 0-35.032-15.715-35.032-35.032v-24.253h16.168v24.253c0 10.401 8.463 18.863 18.863 18.863h40.421v16.169zM342.232 114.719c4.466 0 8.084-3.619 8.084-8.084v-13.86c0-4.466-3.618-8.084-8.084-8.084-4.466 0-8.084 3.618-8.084 8.084v13.858c-.001 4.467 3.618 8.086 8.084 8.086z"/> <path d="M331.453 274.863c10.401 0 18.863-8.463 18.863-18.863v-21.558c0-10.401-8.463-18.863-18.863-18.863h-32.337c-10.401 0-18.863 8.463-18.863 18.863V256c0 10.401 8.463 18.863 18.863 18.863h32.337zM296.421 256v-21.558c0-1.486 1.208-2.695 2.695-2.695h32.337c1.486 0 2.695 1.208 2.695 2.695V256c0 1.486-1.208 2.695-2.695 2.695h-32.337c-1.487 0-2.695-1.209-2.695-2.695zM258.695 320.674v21.558c0 10.401 8.463 18.863 18.863 18.863h53.895c10.401 0 18.863-8.463 18.863-18.863v-21.558c0-10.401-8.463-18.863-18.863-18.863h-53.895c-10.401 0-18.863 8.462-18.863 18.863zm75.452 0v21.558c0 1.486-1.208 2.695-2.695 2.695h-53.895c-1.486 0-2.695-1.208-2.695-2.695v-21.558c0-1.486 1.208-2.695 2.695-2.695h53.895c1.487 0 2.695 1.208 2.695 2.695zM385.347 458.105h-86.232c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.619 8.084 8.084 8.084h86.232c4.466 0 8.084-3.618 8.084-8.084.001-4.465-3.618-8.084-8.084-8.084zM385.347 425.768h-86.232c-4.466 0-8.084 3.618-8.084 8.084 0 4.466 3.619 8.084 8.084 8.084h86.232c4.466 0 8.084-3.618 8.084-8.084.001-4.465-3.618-8.084-8.084-8.084zM396.126 361.095c16.344 0 29.642-13.298 29.642-29.642s-13.298-29.642-29.642-29.642-29.642 13.298-29.642 29.642 13.298 29.642 29.642 29.642zm0-43.116c7.43 0 13.474 6.044 13.474 13.474s-6.044 13.474-13.474 13.474c-7.43 0-13.474-6.044-13.474-13.474s6.044-13.474 13.474-13.474z"/> </symbol> <!-- arc travelled by the pointer --> <svg x="150" y="0" width="350" height="350" viewBox="0 0 500 500"> <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="250.2542" y1="496.283" x2="250.2542" y2="-.2102"> <stop offset="0" stop-color="#0F68A9"/> <stop offset="1" stop-color="#3DDEED" stop-opacity="0"/> </linearGradient> <path fill="url(#a)" d="M250.3 0c137 0 248.1 111.1 248.1 248.1S387.3 496.2 250.3 496.2 2.2 385.1 2.2 248.1 113.2 0 250.3 0C112.5 0 .8 111.7.8 249.5S112.5 499 250.3 499s249.5-111.7 249.5-249.5S388 0 250.3 0z"/> </svg> <g id="service-collection"> <!-- this gets filled dynamically --> </g> <circle cx="325" cy="170" r="140" class="center"/> <use x="185" y="30" width="280" height="280" xlink:href="#circle-nav-copy" class="nav-copy"/> <rect data-url="/industries" id="learn-more" x="280" y="250" width="90" height="30" /> <text x="290" y="270" class="learn-more-text">Learn more</text> </svg> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <script >"use strict"; var center = { x: 325, y: 175 }; var serv_dist = 250; var pointer_dist = 172; var pointer_time = 2; var icon_size = 42; var circle_radius = 38; var text_top_margin = 18; var tspan_delta = 16; //name is used as the title for the bubble //icon is the id of the corresponding svg symbol var services_data = [{ name: "Menu 1", icon: "industries" }, { name: "Menu 2", icon: "validation" }, { name: "Menu 3", icon: "engineering" }, { name: "Menu 4", icon: "management" }, { name: "Menu 5", icon: "manufacturing" }, { name: "Menu 6", icon: "technical" }, { name: "Menu 7", icon: "process" }]; var services = document.getElementById("service-collection"); var nav_container = document.getElementById("circle-nav-services"); var symbol_copy = document.getElementById("circle-nav-copy"); var use_copy = document.querySelector("use.nav-copy"); //Keeps code DRY avoiding namespace for element creation function createSVGElement(el) { return document.createElementNS("http://www.w3.org/2000/svg", el); } //Quick setup for multiple attributes function setAttributes(el, options) { Object.keys(options).forEach(function (attr) { el.setAttribute(attr, options[attr]); }); } //Service bubbles are created dynamically function addService(serv, index) { var group = createSVGElement("g"); group.setAttribute("class", "service serv-" + index); /* This group is needed to apply animations in the icon and its background at the same time */ var icon_group = createSVGElement("g"); icon_group.setAttribute("class", "icon-wrapper"); var circle = createSVGElement("circle"); setAttributes(circle, { r: circle_radius, cx: center.x, cy: center.y }); var circle_shadow = circle.cloneNode(); setAttributes(circle, { class: 'shadow' }); icon_group.appendChild(circle_shadow); icon_group.appendChild(circle); var symbol = createSVGElement("use"); setAttributes(symbol, { 'x': center.x - icon_size / 2, 'y': center.y - icon_size / 2, 'width': icon_size, 'height': icon_size }); symbol.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#" + serv.icon); icon_group.appendChild(symbol); group.appendChild(icon_group); var text = createSVGElement("text"); setAttributes(text, { x: center.x, y: center.y + circle_radius + text_top_margin }); var tspan = createSVGElement("tspan"); if (serv.name.indexOf('\n') >= 0) { var tspan2 = tspan.cloneNode(); var name = serv.name.split('\n'); jQuery(tspan).text(name[0]); jQuery(tspan2).text(name[1]); setAttributes(tspan2, { x: center.x, dy: tspan_delta }); text.appendChild(tspan); text.appendChild(tspan2); } else { jQuery(tspan).text(serv.name); text.appendChild(tspan); } group.appendChild(text); services.appendChild(group); var service_bubble = jQuery(".serv-" + index); //Uses tween to look for right position twn_pivot_path.seek(index); TweenLite.set(service_bubble, { x: pivot_path.x, y: pivot_path.y, transformOrigin: "center center" }); service_bubble.click(serviceClick); } //Creates pointer function createPointer() { var service_pointer = createSVGElement("circle"); setAttributes(service_pointer, { cx: center.x - pointer_dist, cy: center.y, r: 12, class: "pointer" }); nav_container.appendChild(service_pointer); service_pointer = document.querySelector("svg .pointer"); var pointer_circle = [{ x: 0, y: 0 }, { x: pointer_dist, y: pointer_dist }, { x: pointer_dist * 2, y: 0 }, { x: pointer_dist, y: -pointer_dist }, { x: 0, y: 0 }]; twn_pointer_path.to(service_pointer, pointer_time, { bezier: { values: pointer_circle, curviness: 1.5 }, ease: Power0.easeNone, transformOrigin: "center center" }); } //Defines behavior for service bubbles function serviceClick(ev) { //There's always an active service jQuery(".service.active").removeClass("active"); var current = jQuery(ev.currentTarget); current.addClass("active"); //There's a "serv-*" class for each bubble var current_class = current.attr("class").split(" ")[1]; var class_index = current_class.split('-')[1]; //Hides current text of the main bubble jQuery(use_copy).addClass("changing"); //Sets pointer to the right position twn_pointer_path.tweenTo(class_index * (pointer_time / (2 * 6))); //After it's completely hidden, the text changes and becomes visible setTimeout(function () { var viewBoxY = 300 * class_index; symbol_copy.setAttribute("viewBox", "0 " + viewBoxY + " 300 300"); jQuery(use_copy).removeClass("changing"); }, 250); } //Array describes points for a whole circle in order to get //the right curve var half_circle = [{ x: -serv_dist, y: 0 }, { x: 0, y: serv_dist }, { x: serv_dist, y: 0 }, { x: 0, y: -serv_dist }, { x: -serv_dist, y: 0 }]; //A simple object is used in the tween to retrieve its values var pivot_path = { x: half_circle[0].x, y: half_circle[0].y }; //The object is animated with a duration based on how many bubbles //should be placed var twn_pivot_path = TweenMax.to(pivot_path, 12, { bezier: { values: half_circle, curviness: 1.5 }, ease: Linear.easeNone }); services_data.reduce(function (count, serv) { addService(serv, count); return ++count; }, 0); //The variable is modified inside the function //but its also used later to toggle its class var twn_pointer_path = new TimelineMax({ paused: true }); createPointer(); //Adding it immediately triggers a bug for the transform setTimeout(function () { return jQuery("#service-collection .serv-0").addClass("active"); }, 200); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: