A Pen by Nik Ches

Thumbnail
This awesome code was written by nikches, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nikches ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Nik Ches</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg version="1.1" id="telephone-systems" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px"  viewBox="0 0 1100.146 710" enable-background="new 0 0 1100.146 710"
	 xml:space="preserve">
<path  fill="#43ABE0" d="M745.66,376.595c-35.374-85.122-115.489-141.654-206.587-147.146
	c-1.615-0.163-3.392-0.163-5.168-0.324c-0.163,0-0.484,0-0.647,0c-0.969,0-1.938-0.161-2.907-0.161c-0.162,0-0.323,0-0.485,0
	c-1.776,0-3.553-0.163-5.491-0.163c-31.498,0-62.187,6.138-91.422,18.252c-59.117,24.39-105.15,70.424-129.541,129.54
	c-24.552,59.118-24.552,124.211,0,183.168c37.15,89.806,124.05,147.953,221.286,147.953c1.292,0,2.422,0,3.714-0.16
	c0.646,0,1.453,0.16,2.1,0.16c0.324,0,0.646,0,0.808-0.16c1.454,0,2.746-0.161,4.199-0.161c0.486,0,0.97,0,1.616,0
	c0.484,0,0.808,0,1.292-0.163c26.652-1.452,52.818-7.43,77.854-17.768c59.117-24.39,105.152-70.423,129.542-129.54
	c24.39-59.118,24.551-124.211,0-183.168C745.66,376.757,745.66,376.757,745.66,376.595
	C745.66,376.757,745.66,376.757,745.66,376.595z M441.029,278.553c-17.768,23.098-31.982,53.302-41.35,88.351H343.63
	C365.436,327.818,399.355,296.967,441.029,278.553z M329.094,399.047h63.639c-3.715,21.806-5.653,45.065-5.653,69.455
	c0,24.066,2.1,47.488,6.138,69.456h-64.124C312.94,492.731,312.94,444.112,329.094,399.047z M343.63,569.778h57.018
	c10.014,35.696,25.198,66.546,43.772,90.13C402.101,642.139,366.405,610.804,343.63,569.778z M514.36,673.474
	c-33.436-9.853-63.155-49.91-80.115-103.696h80.115V673.474L514.36,673.474z M514.36,537.796h-88.353
	c-4.522-21.967-6.946-45.388-6.946-69.456c0-24.389,2.261-47.809,6.138-69.453h89.161V537.796z M514.36,367.066h-81.569
	c16.313-55.563,46.033-94.813,81.569-103.859V367.066z M705.441,366.904h-44.419c-8.238-30.85-20.029-57.823-34.891-79.468
	C658.923,305.849,686.543,333.147,705.441,366.904z M546.341,263.046c35.535,9.207,65.094,48.457,81.569,103.858h-81.569V263.046z
	 M546.341,399.047h89.16c4.038,21.645,6.139,44.904,6.139,69.455c0,24.066-2.422,47.488-6.946,69.456h-88.353V399.047z
	 M546.341,673.474V569.778h80.115C609.496,623.564,579.776,663.622,546.341,673.474z M622.902,651.022
	c15.668-22.128,28.428-49.909,37.312-81.244h45.227C686.219,604.343,657.791,632.286,622.902,651.022z M719.977,537.796h-52.493
	c4.037-21.967,6.137-45.228,6.137-69.456c0-24.389-1.938-47.648-5.653-69.453h52.01C736.13,444.112,736.13,492.731,719.977,537.796z
	"/>
<path  fill="#43ABE0" d="M730.773,499.481c-1.782,15.663-5.375,23.189-10.796,38.314h-52.493c4.037-21.967,6.137-45.228,6.137-69.456
	c0-24.389-1.938-47.648-5.653-69.453h52.01c7.136,19.979,11.113,32.622,11.944,53.328c9.51-0.812,20.531-1.921,31.977-3.502
	c-1.315-27.15-7.326-46.142-18.076-71.956c-0.162,0-0.162,0-0.162-0.161c-35.374-85.122-115.489-141.654-206.587-147.146
	c-1.615-0.163-3.392-0.163-5.168-0.324c-0.163,0-0.484,0-0.647,0c-0.969,0-1.938-0.161-2.907-0.161c-0.162,0-0.323,0-0.485,0
	c-1.776,0-3.553-0.163-5.491-0.163c-31.498,0-62.187,6.138-91.422,18.252c-59.117,24.39-105.15,70.424-129.541,129.54
	c-24.552,59.118-24.552,124.211,0,183.168c37.15,89.806,124.05,147.953,221.286,147.953c1.292,0,2.422,0,3.714-0.16
	c0.646,0,1.453,0.16,2.1,0.16c0.324,0,0.646,0,0.808-0.16c1.454,0,2.746-0.161,4.199-0.161c0.486,0,0.97,0,1.616,0
	c0.484,0,0.808,0,1.292-0.163c26.652-1.452,52.818-7.43,77.854-17.768c59.117-24.39,105.152-70.423,129.542-129.54
	c9.67-23.438,15.516-39.816,17.538-64.378C752.328,497.226,741.345,498.465,730.773,499.481z M441.029,278.553
	c-17.768,23.098-31.982,53.302-41.35,88.351H343.63C365.436,327.818,399.355,296.967,441.029,278.553z M329.094,399.047h63.639
	c-3.715,21.806-5.653,45.065-5.653,69.455c0,24.066,2.1,47.488,6.138,69.456h-64.124C312.94,492.731,312.94,444.112,329.094,399.047
	z M343.63,569.778h57.018c10.014,35.696,25.198,66.546,43.772,90.13C402.101,642.139,366.405,610.804,343.63,569.778z
	 M514.36,673.474c-33.436-9.853-63.155-49.91-80.115-103.696h80.115V673.474z M514.36,537.796h-88.353
	c-4.522-21.967-6.946-45.388-6.946-69.456c0-24.389,2.261-47.809,6.138-69.453h89.161V537.796z M514.36,367.066h-81.569
	c16.313-55.563,46.033-94.813,81.569-103.859V367.066z M705.441,366.904h-44.419c-8.238-30.85-20.029-57.823-34.891-79.468
	C658.923,305.849,686.543,333.147,705.441,366.904z M546.341,263.046c35.535,9.207,65.094,48.457,81.569,103.858h-81.569V263.046z
	 M546.341,399.047h89.16c4.038,21.645,6.139,44.904,6.139,69.455c0,24.066-2.422,47.488-6.946,69.456h-88.353V399.047z
	 M546.341,673.474V569.778h80.115C609.496,623.564,579.776,663.622,546.341,673.474z M622.902,651.022
	c15.668-22.128,28.428-49.909,37.312-81.244h45.227C686.219,604.343,657.791,632.286,622.902,651.022z"/>
<g >
	<path fill="#FD774B" d="M944.073,225.31v-61.9H928.8l-70.954-30.709l-3.962,9.169l49.714,21.54h-61.485v11.426
		c-40.453,0.875-97.354,4.722-111.268,46.304c-11.06,32.943,27.137,66.991,46.811,87.793c26.008,27.413,65.517,58.742,74.386,97.398
		c11.242,49.022-122.856,53.769-146.792,55.91c-15.664,1.383-30.224,34.096-10.344,32.345
		c55.565-4.931,143.567-8.224,178.583-60.864c22.553-33.887,0.553-70.446-21.7-97.606c-26.724-32.619-61.324-59.733-84.408-95.21
		c-6.242-9.629-9.883-18.729-5.759-21.17c22.161-13.201,54.713-12.486,80.468-12.764v18.361h101.984V225.31z"/>
</g>
<g id="small-items">
	<g id="network_1_">
		<g id="topNet">
			<path fill="none" stroke="#CFE3E9" stroke-width="6.7579" stroke-miterlimit="10" d="M222.689,126.429
				c-6.705,0-12.684,3.195-16.509,8.133l-32.024-17.888c0.75-2.155,1.162-4.478,1.162-6.875c0-2.42-0.412-4.72-1.186-6.898
				l32-17.864c3.8,4.962,9.804,8.182,16.533,8.182c11.474,0,20.841-9.343,20.841-20.841c0-11.499-9.343-20.842-20.841-20.842
				c-11.499,0-20.842,9.343-20.842,20.842c0,2.42,0.412,4.744,1.186,6.898L171.033,97.14c-3.8-4.986-9.803-8.182-16.533-8.182
				c-11.474,0-20.841,9.344-20.841,20.842c0,11.499,9.368,20.842,20.866,20.842c6.729,0,12.732-3.22,16.557-8.206l32,17.889
				c-0.774,2.178-1.21,4.526-1.21,6.947c0,11.474,9.343,20.841,20.842,20.841c11.498,0,20.841-9.343,20.841-20.841
				S234.187,126.429,222.689,126.429z M222.689,58.095c7.892,0,14.306,6.415,14.306,14.306s-6.414,14.306-14.306,14.306
				c-7.891,0-14.306-6.415-14.306-14.306S214.823,58.095,222.689,58.095z M154.525,124.105c-7.891,0-14.306-6.414-14.306-14.306
				c0-7.891,6.415-14.305,14.306-14.305c7.891,0,14.306,6.414,14.306,14.305C168.831,117.691,162.392,124.105,154.525,124.105z
				 M222.689,161.552c-7.891,0-14.306-6.415-14.306-14.306c0-7.891,6.415-14.306,14.306-14.306c7.892,0,14.306,6.415,14.306,14.306
				C236.995,155.137,230.581,161.552,222.689,161.552z"/>
		</g>
		<g id="rightNet">
			<path  fill="none" stroke="#CFE3E9" stroke-width="7.1713" stroke-miterlimit="10" d="M907.856,563.287
				c7.115,0,13.46-3.392,17.52-8.631l33.982,18.982c-0.796,2.286-1.232,4.752-1.232,7.295c0,2.568,0.437,5.009,1.259,7.321
				l-33.959,18.956c-4.032-5.266-10.402-8.683-17.544-8.683c-12.175,0-22.116,9.916-22.116,22.117s9.915,22.116,22.116,22.116
				c12.202,0,22.117-9.915,22.117-22.116c0-2.568-0.437-5.035-1.259-7.321l33.933-18.956c4.032,5.291,10.403,8.682,17.544,8.682
				c12.175,0,22.115-9.916,22.115-22.116c0-12.201-9.94-22.116-22.141-22.116c-7.142,0-13.513,3.416-17.57,8.708l-33.958-18.983
				c0.822-2.312,1.284-4.804,1.284-7.371c0-12.176-9.915-22.117-22.116-22.117s-22.116,9.915-22.116,22.117
				C885.715,553.371,895.655,563.287,907.856,563.287z M907.856,635.801c-8.374,0-15.18-6.808-15.18-15.181
				c0-8.374,6.806-15.182,15.18-15.182c8.375,0,15.182,6.808,15.182,15.182C923.038,628.993,916.204,635.801,907.856,635.801z
				 M980.191,565.753c8.373,0,15.181,6.807,15.181,15.181s-6.808,15.181-15.181,15.181c-8.375,0-15.182-6.807-15.182-15.181
				S971.843,565.753,980.191,565.753z M907.856,526.014c8.375,0,15.182,6.808,15.182,15.181c0,8.375-6.807,15.182-15.182,15.182
				c-8.374,0-15.18-6.807-15.18-15.182C892.677,532.822,899.482,526.014,907.856,526.014z"/>
		</g>
	</g>
	<g id="cable">
		<path id="leftUsb" fill="#CFE3E9" d="M205.802,392.751h-6.293v-25.994c0-16.883-13.735-30.619-30.619-30.619
			c-16.882,0-30.617,13.735-30.617,30.619v64.468c0,11.248-9.152,20.401-20.4,20.401c-11.251,0-20.404-9.153-20.404-20.401v-26.701
			h6.293c1.227,0,2.219-0.994,2.219-2.221v-31.264c0-1.227-0.993-2.221-2.219-2.221h-2.083v-11.68c0-1.228-0.995-2.222-2.221-2.222
			H85.264c-1.227,0-2.222,0.995-2.222,2.222v11.681h-2.082c-1.227,0-2.221,0.994-2.221,2.221v31.263
			c0,1.227,0.994,2.221,2.221,2.221h6.292v26.701c0,16.883,13.736,30.617,30.621,30.617c16.882,0,30.616-13.734,30.616-30.617
			v-64.468c0-11.249,9.152-20.402,20.401-20.402c11.251,0,20.404,9.152,20.404,20.402v25.994h-6.292
			c-1.226,0-2.222,0.994-2.222,2.221v31.263c0,1.228,0.996,2.222,2.222,2.222h2.082v11.681c0,1.227,0.994,2.221,2.22,2.221h14.196
			c1.227,0,2.221-0.994,2.221-2.221v-11.681h2.082c1.227,0,2.221-0.994,2.221-2.222v-31.263
			C208.023,393.745,207.029,392.751,205.802,392.751z M87.484,359.358h9.755v9.461h-9.755V359.358z M199.279,437.916h-9.754v-9.46
			h9.754V437.916z"/>
		<path id="topUsb" fill="#CFE3E9" d="M637.839,90.794h-5.952V66.207c0-15.968-12.991-28.96-28.961-28.96c-15.969,0-28.96,12.991-28.96,28.96
			v60.978c0,10.64-8.656,19.297-19.295,19.297c-10.643,0-19.3-8.657-19.3-19.297V101.93h5.952c1.16,0,2.1-0.94,2.1-2.102v-29.57
			c0-1.16-0.939-2.101-2.1-2.101h-1.97V57.11c0-1.16-0.94-2.101-2.101-2.101h-13.426c-1.16,0-2.102,0.94-2.102,2.101v11.049h-1.969
			c-1.16,0-2.101,0.94-2.101,2.101v29.569c0,1.161,0.94,2.102,2.101,2.102h5.951v25.255c0,15.969,12.992,28.96,28.963,28.96
			c15.968,0,28.958-12.991,28.958-28.96V66.207c0-10.64,8.656-19.297,19.297-19.297c10.642,0,19.299,8.656,19.299,19.297v24.587
			h-5.951c-1.16,0-2.102,0.94-2.102,2.101v29.57c0,1.161,0.941,2.101,2.102,2.101h1.969v11.049c0,1.16,0.94,2.101,2.101,2.101
			h13.428c1.16,0,2.101-0.94,2.101-2.101v-11.049h1.969c1.16,0,2.101-0.939,2.101-2.101v-29.57
			C639.939,91.735,638.999,90.794,637.839,90.794z M525.927,59.21h9.227v8.948h-9.227V59.21z M631.669,133.514h-9.227v-8.948h9.227
			V133.514z"/>
	</g>
	<g id="wifi">
		<path fill="#CFE3E9" d="M1055.861,55.031c-32.687-22.476-76.186-21.883-108.241,1.474c-3.219,2.344-3.927,6.854-1.582,10.074
			c1.411,1.937,3.607,2.964,5.834,2.964c1.473,0,2.959-0.451,4.24-1.383c27.12-19.761,63.923-20.264,91.578-1.247
			c3.282,2.256,7.771,1.425,10.026-1.856C1059.973,61.776,1059.142,57.288,1055.861,55.031z"/>
		<path fill="#CFE3E9" d="M1036.433,80.692c-20.953-14.407-48.837-14.03-69.388,0.944c-3.218,2.345-3.926,6.855-1.581,10.074
			c1.411,1.937,3.607,2.964,5.834,2.964c1.473,0,2.959-0.45,4.238-1.383c15.617-11.377,36.805-11.665,52.726-0.717
			c3.282,2.255,7.771,1.426,10.027-1.856C1040.547,87.437,1039.716,82.948,1036.433,80.692z"/>
		<path fill="#CFE3E9" d="M1017.37,108.416c-4.365-3-9.535-4.587-14.953-4.587c-5.604,0-11.128,1.776-15.555,5.001
			c-3.219,2.344-3.928,6.854-1.584,10.073c1.411,1.938,3.607,2.966,5.834,2.966c1.474-0.001,2.959-0.45,4.24-1.385
			c1.979-1.441,4.487-2.235,7.064-2.235c2.452,0,4.862,0.729,6.784,2.051c3.283,2.257,7.771,1.424,10.026-1.857
			C1021.483,115.16,1020.651,110.672,1017.37,108.416z"/>
	</g>
	<g id="dots">
		<circle id="topLDotGlobe" fill="none" stroke="#CFE3E9" stroke-width="14" stroke-miterlimit="10" cx="111.834" cy="225.596" r="18"/>
		<circle id="bottomLdotGlobe" fill="none" stroke="#CFE3E9" stroke-width="14" stroke-miterlimit="10" cx="146.884" cy="609.82" r="18"/>
		<circle id="topMidDotGlobe" fill="none" stroke="#CFE3E9" stroke-width="14" stroke-miterlimit="10" cx="408.672" cy="107.696" r="18"/>
		<circle id="topRiDotGlobe" fill="none" stroke="#CFE3E9" stroke-width="14" stroke-miterlimit="10" cx="770.953" cy="87.696" r="18"/>
		<circle id="MidRdotGlobe" fill="none" stroke="#CFE3E9" stroke-width="14" stroke-miterlimit="10" cx="974.945" cy="342.055" r="17.999"/>
	</g>
</g>
	<path class="cls-7" d="M751.23,451c-9.48-110.54-85.07-207.66-222.56-211.28C390.29,233,281.52,362.22,300.11,484.05,299.41,587.21,398,707.2,532.44,693.83c122.31-11.49,201.16-75.46,215.79-194.74" transform="translate(-78.74 -37.25)"/>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nikches/a-pen-by-nik-ches-EXRdwO */
		#globe {
			stroke-dasharray: 1000px;
			stroke-dashoffset: 1000px;
			-webkit-animation: dashGlobe 1s .3s cubic-bezier(0.86, 0, 0.07, 1) forwards;
			        animation: dashGlobe 1s .3s cubic-bezier(0.86, 0, 0.07, 1) forwards;
		}

		@-webkit-keyframes dashGlobe {
			100% {
				stroke-dashoffset: 0;
			}
		}

		@keyframes dashGlobe {
			100% {
				stroke-dashoffset: 0;
			}
		}
		
		#bottomLdotGlobe {
			-webkit-transform: translate(-180px, 0px);
			        transform: translate(-180px, 0px);
			-webkit-animation: floatBoLeGlobe 10s 3.4s linear forwards;
			        animation: floatBoLeGlobe 10s 3.4s linear forwards;
		}
		@-webkit-keyframes floatBoLeGlobe {
		  0% {
			-webkit-transform: translate(-180px, 0px);
			        transform: translate(-180px, 0px);
		  }
		 70% {
			 -webkit-animation-timing-function: ease;
			         animation-timing-function: ease;
			-webkit-transform: translate(145px, 0px);
			        transform: translate(145px, 0px);
		  }
			100% {
				-webkit-animation-timing-function: ease-out;
				        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}
		@keyframes floatBoLeGlobe {
		  0% {
			-webkit-transform: translate(-180px, 0px);
			        transform: translate(-180px, 0px);
		  }
		 70% {
			 -webkit-animation-timing-function: ease;
			         animation-timing-function: ease;
			-webkit-transform: translate(145px, 0px);
			        transform: translate(145px, 0px);
		  }
			100% {
				-webkit-animation-timing-function: ease-out;
				        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}

		#MidRdotGlobe {
			-webkit-transform: translate(170px, 0px);
			        transform: translate(170px, 0px);
			-webkit-animation: floatBoRiGlobe 14s 4.3s linear forwards;
			        animation: floatBoRiGlobe 14s 4.3s linear forwards;
		}
		@-webkit-keyframes floatBoRiGlobe {
		  0% {
			-webkit-transform: translate(170px, 0px);
			        transform: translate(170px, 0px);
		  }
		 70% {
			 -webkit-animation-timing-function: linear;
			         animation-timing-function: linear;
			-webkit-transform: translate(-85px, 0px);
			        transform: translate(-85px, 0px);
		  }
			100% {
				-webkit-animation-timing-function: ease-out;
				        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}
		@keyframes floatBoRiGlobe {
		  0% {
			-webkit-transform: translate(170px, 0px);
			        transform: translate(170px, 0px);
		  }
		 70% {
			 -webkit-animation-timing-function: linear;
			         animation-timing-function: linear;
			-webkit-transform: translate(-85px, 0px);
			        transform: translate(-85px, 0px);
		  }
			100% {
				-webkit-animation-timing-function: ease-out;
				        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}

		#topLDotGlobe {
			-webkit-transform: translate(-210px, 0px);
			        transform: translate(-210px, 0px);
			-webkit-animation: floatTopLeGlobe 12s 3.7s linear forwards;
			        animation: floatTopLeGlobe 12s 3.7s linear forwards;
		}
		@-webkit-keyframes floatTopLeGlobe {
		  0% {
			-webkit-transform: translate(-210px, 0px);
			        transform: translate(-210px, 0px);
		  }
		 70% {
			 -webkit-animation-timing-function: linear;
			         animation-timing-function: linear;
			-webkit-transform: translate(215px, 45px);
			        transform: translate(215px, 45px);
		  }
			100% {
				-webkit-animation-timing-function: ease-out;
				        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}
		@keyframes floatTopLeGlobe {
		  0% {
			-webkit-transform: translate(-210px, 0px);
			        transform: translate(-210px, 0px);
		  }
		 70% {
			 -webkit-animation-timing-function: linear;
			         animation-timing-function: linear;
			-webkit-transform: translate(215px, 45px);
			        transform: translate(215px, 45px);
		  }
			100% {
				-webkit-animation-timing-function: ease-out;
				        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}

		#topMidDotGlobe {
			-webkit-transform: translate(0px, -135px);
			        transform: translate(0px, -135px);
			-webkit-animation: floatMiDotGlobe 14s 3.9s linear  forwards;
			        animation: floatMiDotGlobe 14s 3.9s linear  forwards;
		}
		@-webkit-keyframes floatMiDotGlobe {
		  0% {
			-webkit-transform: translate(0px, -135px);
			        transform: translate(0px, -135px);
		  }
		 70% {
			-webkit-animation-timing-function: linear;
			        animation-timing-function: linear;
			-webkit-transform: translate( 0px, 120px);
			        transform: translate( 0px, 120px);
		  }
			100% {
			-webkit-animation-timing-function: ease-out;
			        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}
		@keyframes floatMiDotGlobe {
		  0% {
			-webkit-transform: translate(0px, -135px);
			        transform: translate(0px, -135px);
		  }
		 70% {
			-webkit-animation-timing-function: linear;
			        animation-timing-function: linear;
			-webkit-transform: translate( 0px, 120px);
			        transform: translate( 0px, 120px);
		  }
			100% {
			-webkit-animation-timing-function: ease-out;
			        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}

		#topRiDotGlobe {
			-webkit-transform: translate(20px, -120px);
			        transform: translate(20px, -120px);
			-webkit-animation: floatTopRiGlobe 16s 4.1s linear forwards;
			        animation: floatTopRiGlobe 16s 4.1s linear forwards;
		}
		@-webkit-keyframes floatTopRiGlobe {
		  0% {
			-webkit-transform: translate(20px, -110px);
			        transform: translate(20px, -110px);
		  }
		 70% {
			 -webkit-animation-timing-function: linear;
			         animation-timing-function: linear;
			-webkit-transform: translate(-15px, 65px);
			        transform: translate(-15px, 65px);
		  }
			100% {
			-webkit-animation-timing-function: ease-out;
			        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}
		@keyframes floatTopRiGlobe {
		  0% {
			-webkit-transform: translate(20px, -110px);
			        transform: translate(20px, -110px);
		  }
		 70% {
			 -webkit-animation-timing-function: linear;
			         animation-timing-function: linear;
			-webkit-transform: translate(-15px, 65px);
			        transform: translate(-15px, 65px);
		  }
			100% {
			-webkit-animation-timing-function: ease-out;
			        animation-timing-function: ease-out;
			-webkit-transform: translate(0px, 0px);
			        transform: translate(0px, 0px);
		  }
		}

		#leftUsb {
					-webkit-transform: translate(-210px, 0px);
					        transform: translate(-210px, 0px);
					-webkit-animation: toPositionGlobe 10s 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
					        animation: toPositionGlobe 10s 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
				}
		#topUsb {
				-webkit-transform:  translate(0px, -180px);
				        transform:  translate(0px, -180px);
				-webkit-animation: toPositionGlobe 11s 4.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
				        animation: toPositionGlobe 11s 4.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
			}
		#rightNet {
			-webkit-transform:  translate(0px, 200px);
			        transform:  translate(0px, 200px);
			-webkit-animation: toPositionGlobe 14s 4.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
			        animation: toPositionGlobe 14s 4.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
		}
		#topNet {
					-webkit-transform:  translate(-140px, -180px);
					        transform:  translate(-140px, -180px);
					-webkit-animation: toPositionGlobe 9s 4.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
					        animation: toPositionGlobe 9s 4.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
				}
		#wifi {
					-webkit-transform: translate(160px, 0px);
					        transform: translate(160px, 0px);
					-webkit-animation: toPositionGlobe 13s 4.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
					        animation: toPositionGlobe 13s 4.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
				}
		@-webkit-keyframes toPositionGlobe {
					to {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
					}
				}
		@keyframes toPositionGlobe {
					to {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
					}
				}

Comments