Skip to content

Instantly share code, notes, and snippets.

@MohammadTaseenKhan
Last active October 31, 2021 13:32
Show Gist options
  • Save MohammadTaseenKhan/49be0d2ceef037e2220c693fe01767fc to your computer and use it in GitHub Desktop.
Save MohammadTaseenKhan/49be0d2ceef037e2220c693fe01767fc to your computer and use it in GitHub Desktop.
Pixelated Globe Icon Animation
<div class="main-container">
<div class="countries-container">
<svg class="countries" width="246" height="60" viewBox="0 0 246 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39 9H36V12H39V9Z" fill="white"/>
<path d="M39 12H36V15H39V12Z" fill="white"/>
<path d="M36 15H33V18H36V15Z" fill="white"/>
<path d="M36 12H33V15H36V12Z" fill="white"/>
<path d="M63 12H60V15H63V12Z" fill="white"/>
<path d="M60 12H57V15H60V12Z" fill="white"/>
<path d="M60 15H57V18H60V15Z" fill="white"/>
<path d="M60 18H57V21H60V18Z" fill="white"/>
<path d="M63 18H60V21H63V18Z" fill="white"/>
<path d="M63 15H60V18H63V15Z" fill="white"/>
<path d="M66 15H63V18H66V15Z" fill="white"/>
<path d="M60 21H57V24H60V21Z" fill="white"/>
<path d="M63 24H60V27H63V24Z" fill="white"/>
<path d="M66 24H63V27H66V24Z" fill="white"/>
<path d="M69 24H66V27H69V24Z" fill="white"/>
<path d="M69 27H66V30H69V27Z" fill="white"/>
<path d="M66 27H63V30H66V27Z" fill="white"/>
<path d="M63 27H60V30H63V27Z" fill="white"/>
<path d="M69 30H66V33H69V30Z" fill="white"/>
<path d="M66 30H63V33H66V30Z" fill="white"/>
<path d="M63 30H60V33H63V30Z" fill="white"/>
<path d="M60 30H57V33H60V30Z" fill="white"/>
<path d="M57 30H54V33H57V30Z" fill="white"/>
<path d="M60 27H57V30H60V27Z" fill="white"/>
<path d="M69 33H66V36H69V33Z" fill="white"/>
<path d="M66 33H63V36H66V33Z" fill="white"/>
<path d="M66 36H63V39H66V36Z" fill="white"/>
<path d="M66 39H63V42H66V39Z" fill="white"/>
<path d="M66 42H63V45H66V42Z" fill="white"/>
<path d="M63 33H60V36H63V33Z" fill="white"/>
<path d="M69 36H66V39H69V36Z" fill="white"/>
<path d="M69 39H66V42H69V39Z" fill="white"/>
<path d="M69 42H66V45H69V42Z" fill="white"/>
<path d="M69 45H66V48H69V45Z" fill="white"/>
<path d="M69 48H66V51H69V48Z" fill="white"/>
<path d="M72 30H69V33H72V30Z" fill="white"/>
<path d="M72 33H69V36H72V33Z" fill="white"/>
<path d="M72 36H69V39H72V36Z" fill="white"/>
<path d="M72 39H69V42H72V39Z" fill="white"/>
<path d="M72 42H69V45H72V42Z" fill="white"/>
<path d="M72 45H69V48H72V45Z" fill="white"/>
<path d="M75 30H72V33H75V30Z" fill="white"/>
<path d="M75 24H72V27H75V24Z" fill="white"/>
<path d="M75 21H72V24H75V21Z" fill="white"/>
<path d="M75 15H72V18H75V15Z" fill="white"/>
<path d="M72 15H69V18H72V15Z" fill="white"/>
<path d="M69 18H66V21H69V18Z" fill="white"/>
<path d="M69 15H66V18H69V15Z" fill="white"/>
<path d="M72 12H69V15H72V12Z" fill="white"/>
<path d="M75 9H72V12H75V9Z" fill="white"/>
<path d="M78 6H75V9H78V6Z" fill="white"/>
<path d="M78 9H75V12H78V9Z" fill="white"/>
<path d="M78 12H75V15H78V12Z" fill="white"/>
<path d="M78 15H75V18H78V15Z" fill="white"/>
<path d="M81 15H78V18H81V15Z" fill="white"/>
<path d="M84 15H81V18H84V15Z" fill="white"/>
<path d="M84 18H81V21H84V18Z" fill="white"/>
<path d="M84 21H81V24H84V21Z" fill="white"/>
<path d="M84 24H81V27H84V24Z" fill="white"/>
<path d="M81 12H78V15H81V12Z" fill="white"/>
<path d="M84 12H81V15H84V12Z" fill="white"/>
<path d="M81 9H78V12H81V9Z" fill="white"/>
<path d="M84 9H81V12H84V9Z" fill="white"/>
<path d="M81 6H78V9H81V6Z" fill="white"/>
<path d="M84 6H81V9H84V6Z" fill="white"/>
<path d="M87 9H84V12H87V9Z" fill="white"/>
<path d="M90 9H87V12H90V9Z" fill="white"/>
<path d="M93 6H90V9H93V6Z" fill="white"/>
<path d="M93 3H90V6H93V3Z" fill="white"/>
<path d="M96 3H93V6H96V3Z" fill="white"/>
<path d="M99 3H96V6H99V3Z" fill="white"/>
<path d="M102 3H99V6H102V3Z" fill="white"/>
<path d="M105 3H102V6H105V3Z" fill="white"/>
<path d="M108 3H105V6H108V3Z" fill="white"/>
<path d="M111 3H108V6H111V3Z" fill="white"/>
<path d="M114 3H111V6H114V3Z" fill="white"/>
<path d="M117 3H114V6H117V3Z" fill="white"/>
<path d="M120 6H117V9H120V6Z" fill="white"/>
<path d="M117 6H114V9H117V6Z" fill="white"/>
<path d="M114 6H111V9H114V6Z" fill="white"/>
<path d="M111 6H108V9H111V6Z" fill="white"/>
<path d="M108 6H105V9H108V6Z" fill="white"/>
<path d="M105 6H102V9H105V6Z" fill="white"/>
<path d="M102 6H99V9H102V6Z" fill="white"/>
<path d="M99 6H96V9H99V6Z" fill="white"/>
<path d="M96 6H93V9H96V6Z" fill="white"/>
<path d="M93 9H90V12H93V9Z" fill="white"/>
<path d="M96 9H93V12H96V9Z" fill="white"/>
<path d="M99 9H96V12H99V9Z" fill="white"/>
<path d="M102 9H99V12H102V9Z" fill="white"/>
<path d="M105 9H102V12H105V9Z" fill="white"/>
<path d="M105 12H102V15H105V12Z" fill="white"/>
<path d="M102 12H99V15H102V12Z" fill="white"/>
<path d="M99 12H96V15H99V12Z" fill="white"/>
<path d="M96 12H93V15H96V12Z" fill="white"/>
<path d="M93 12H90V15H93V12Z" fill="white"/>
<path d="M90 12H87V15H90V12Z" fill="white"/>
<path d="M87 12H84V15H87V12Z" fill="white"/>
<path d="M87 15H84V18H87V15Z" fill="white"/>
<path d="M90 15H87V18H90V15Z" fill="white"/>
<path d="M93 15H90V18H93V15Z" fill="white"/>
<path d="M96 15H93V18H96V15Z" fill="white"/>
<path d="M99 15H96V18H99V15Z" fill="white"/>
<path d="M102 15H99V18H102V15Z" fill="white"/>
<path d="M102 18H99V21H102V18Z" fill="white"/>
<path d="M99 18H96V21H99V18Z" fill="white"/>
<path d="M96 18H93V21H96V18Z" fill="white"/>
<path d="M93 18H90V21H93V18Z" fill="white"/>
<path d="M90 18H87V21H90V18Z" fill="white"/>
<path d="M87 18H84V21H87V18Z" fill="white"/>
<path d="M87 21H84V24H87V21Z" fill="white"/>
<path d="M90 21H87V24H90V21Z" fill="white"/>
<path d="M93 21H90V24H93V21Z" fill="white"/>
<path d="M96 21H93V24H96V21Z" fill="white"/>
<path d="M99 21H96V24H99V21Z" fill="white"/>
<path d="M108 9H105V12H108V9Z" fill="white"/>
<path d="M108 12H105V15H108V12Z" fill="white"/>
<path d="M105 15H102V18H105V15Z" fill="white"/>
<path d="M105 18H102V21H105V18Z" fill="white"/>
<path d="M111 19H108V22H111V19Z" fill="white"/>
<path d="M108 22H105V25H108V22Z" fill="white"/>
<path d="M111 22H108V25H111V22Z" fill="white"/>
<path d="M102 21H99V24H102V21Z" fill="white"/>
<path d="M102 24H99V27H102V24Z" fill="white"/>
<path d="M99 24H96V27H99V24Z" fill="white"/>
<path d="M96 24H93V27H96V24Z" fill="white"/>
<path d="M93 24H90V27H93V24Z" fill="white"/>
<path d="M90 24H87V27H90V24Z" fill="white"/>
<path d="M87 24H84V27H87V24Z" fill="white"/>
<path d="M99 27H96V30H99V27Z" fill="white"/>
<path d="M123 6H120V9H123V6Z" fill="white"/>
<path d="M72 6H69V9H72V6Z" fill="white"/>
<path d="M69 6H66V9H69V6Z" fill="white"/>
<path d="M66 6H63V9H66V6Z" fill="white"/>
<path d="M75 12H72V15H75V12Z" fill="white"/>
<path d="M78 21H75V24H78V21Z" fill="white"/>
<path d="M78 24H75V27H78V24Z" fill="white"/>
<path d="M81 24H78V27H81V24Z" fill="white"/>
<path d="M84 27H81V30H84V27Z" fill="white"/>
<path d="M87 27H84V30H87V27Z" fill="white"/>
<path d="M90 30H87V33H90V30Z" fill="white"/>
<path d="M90 27H87V30H90V27Z" fill="white"/>
<path d="M93 27H90V30H93V27Z" fill="white"/>
<path d="M96 27H93V30H96V27Z" fill="white"/>
<path d="M96 30H93V33H96V30Z" fill="white"/>
<path d="M99 30H96V33H99V30Z" fill="white"/>
<path d="M99 33H96V36H99V33Z" fill="white"/>
<path d="M99 39H96V42H99V39Z" fill="white"/>
<path d="M111 42H108V45H111V42Z" fill="white"/>
<path d="M111 48H108V51H111V48Z" fill="white"/>
<path d="M108 48H105V51H108V48Z" fill="white"/>
<path d="M105 51H102V54H105V51Z" fill="white"/>
<path d="M102 54H99V57H102V54Z" fill="white"/>
<path d="M108 51H105V54H108V51Z" fill="white"/>
<path d="M111 51H108V54H111V51Z" fill="white"/>
<path d="M111 54H108V57H111V54Z" fill="white"/>
<path d="M114 51H111V54H114V51Z" fill="white"/>
<path d="M114 54H111V57H114V54Z" fill="white"/>
<path d="M108 39H105V42H108V39Z" fill="white"/>
<path d="M72 27H69V30H72V27Z" fill="white"/>
<path d="M72 24H69V27H72V24Z" fill="white"/>
<path d="M75 33H72V36H75V33Z" fill="white"/>
<path d="M75 36H72V39H75V36Z" fill="white"/>
<path d="M75 39H72V42H75V39Z" fill="white"/>
<path d="M75 42H72V45H75V42Z" fill="white"/>
<path d="M78 48H75V51H78V48Z" fill="white"/>
<path d="M36 18H33V21H36V18Z" fill="white"/>
<path d="M36 21H33V24H36V21Z" fill="white"/>
<path d="M33 18H30V21H33V18Z" fill="white"/>
<path d="M30 18H27V21H30V18Z" fill="white"/>
<path d="M27 18H24V21H27V18Z" fill="white"/>
<path d="M33 21H30V24H33V21Z" fill="white"/>
<path d="M30 21H27V24H30V21Z" fill="white"/>
<path d="M27 21H24V24H27V21Z" fill="white"/>
<path d="M24 21H21V24H24V21Z" fill="white"/>
<path d="M27 24H24V27H27V24Z" fill="white"/>
<path d="M24 24H21V27H24V24Z" fill="white"/>
<path d="M21 24H18V27H21V24Z" fill="white"/>
<path d="M21 21H18V24H21V21Z" fill="white"/>
<path d="M21 18H18V21H21V18Z" fill="white"/>
<path d="M18 18H15V21H18V18Z" fill="white"/>
<path d="M18 15H15V18H18V15Z" fill="white"/>
<path d="M15 12H12V15H15V12Z" fill="white"/>
<path d="M18 12H15V15H18V12Z" fill="white"/>
<path d="M21 12H18V15H21V12Z" fill="white"/>
<path d="M21 15H18V18H21V15Z" fill="white"/>
<path d="M24 15H21V18H24V15Z" fill="white"/>
<path d="M27 15H24V18H27V15Z" fill="white"/>
<path d="M30 15H27V18H30V15Z" fill="white"/>
<path d="M33 15H30V18H33V15Z" fill="white"/>
<path d="M24 12H21V15H24V12Z" fill="white"/>
<path d="M12 9H9V12H12V9Z" fill="white"/>
<path d="M9 9H6V12H9V9Z" fill="white"/>
<path d="M6 9H3V12H6V9Z" fill="white"/>
<path d="M3 6H0V9H3V6Z" fill="white"/>
<path d="M6 6H3V9H6V6Z" fill="white"/>
<path d="M9 3H6V6H9V3Z" fill="white"/>
<path d="M9 6H6V9H9V6Z" fill="white"/>
<path d="M15 6H12V9H15V6Z" fill="white"/>
<path d="M18 6H15V9H18V6Z" fill="white"/>
<path d="M21 6H18V9H21V6Z" fill="white"/>
<path d="M15 9H12V12H15V9Z" fill="white"/>
<path d="M18 9H15V12H18V9Z" fill="white"/>
<path d="M21 9H18V12H21V9Z" fill="white"/>
<path d="M24 9H21V12H24V9Z" fill="white"/>
<path d="M18 21H15V24H18V21Z" fill="white"/>
<path d="M24 27H21V30H24V27Z" fill="white"/>
<path d="M30 24H27V27H30V24Z" fill="white"/>
<path d="M27 27H24V30H27V27Z" fill="white"/>
<path d="M27 30H24V33H27V30Z" fill="white"/>
<path d="M30 33H27V36H30V33Z" fill="white"/>
<path d="M30 36H27V39H30V36Z" fill="white"/>
<path d="M30 39H27V42H30V39Z" fill="white"/>
<path d="M39 36H36V39H39V36Z" fill="white"/>
<path d="M39 39H36V42H39V39Z" fill="white"/>
<path d="M39 42H36V45H39V42Z" fill="white"/>
<path d="M39 45H36V48H39V45Z" fill="white"/>
<path d="M39 48H36V51H39V48Z" fill="white"/>
<path d="M39 51H36V54H39V51Z" fill="white"/>
<path d="M39 54H36V57H39V54Z" fill="white"/>
<path d="M39 57H36V60H39V57Z" fill="white"/>
<path d="M33 33H30V36H33V33Z" fill="white"/>
<path d="M33 36H30V39H33V36Z" fill="white"/>
<path d="M33 39H30V42H33V39Z" fill="white"/>
<path d="M33 42H30V45H33V42Z" fill="white"/>
<path d="M42 36H39V39H42V36Z" fill="white"/>
<path d="M42 39H39V42H42V39Z" fill="white"/>
<path d="M42 42H39V45H42V42Z" fill="white"/>
<path d="M42 45H39V48H42V45Z" fill="white"/>
<path d="M42 48H39V51H42V48Z" fill="white"/>
<path d="M42 51H39V54H42V51Z" fill="white"/>
<path d="M42 54H39V57H42V54Z" fill="white"/>
<path d="M36 33H33V36H36V33Z" fill="white"/>
<path d="M36 36H33V39H36V36Z" fill="white"/>
<path d="M36 39H33V42H36V39Z" fill="white"/>
<path d="M36 42H33V45H36V42Z" fill="white"/>
<path d="M36 45H33V48H36V45Z" fill="white"/>
<path d="M45 36H42V39H45V36Z" fill="white"/>
<path d="M45 39H42V42H45V39Z" fill="white"/>
<path d="M45 42H42V45H45V42Z" fill="white"/>
<path d="M45 45H42V48H45V45Z" fill="white"/>
<path d="M45 48H42V51H45V48Z" fill="white"/>
<path d="M48 39H45V42H48V39Z" fill="white"/>
<path d="M42 9H39V12H42V9Z" fill="white"/>
<path d="M45 6H42V9H45V6Z" fill="white"/>
<path d="M48 3H45V6H48V3Z" fill="white"/>
<path d="M45 3H42V6H45V3Z" fill="white"/>
<path d="M42 3H39V6H42V3Z" fill="white"/>
<path d="M42 0H39V3H42V0Z" fill="white"/>
<path d="M45 0H42V3H45V0Z" fill="white"/>
<path d="M48 0H45V3H48V0Z" fill="white"/>
<path d="M51 0H48V3H51V0Z" fill="white"/>
<path d="M42 12H39V15H42V12Z" fill="white"/>
<path d="M21 18H24V21H21V18Z" fill="white"/>
<path d="M162 9H159V12H162V9Z" fill="white"/>
<path d="M162 12H159V15H162V12Z" fill="white"/>
<path d="M159 15H156V18H159V15Z" fill="white"/>
<path d="M159 12H156V15H159V12Z" fill="white"/>
<path d="M186 12H183V15H186V12Z" fill="white"/>
<path d="M183 12H180V15H183V12Z" fill="white"/>
<path d="M183 15H180V18H183V15Z" fill="white"/>
<path d="M183 18H180V21H183V18Z" fill="white"/>
<path d="M186 18H183V21H186V18Z" fill="white"/>
<path d="M186 15H183V18H186V15Z" fill="white"/>
<path d="M189 15H186V18H189V15Z" fill="white"/>
<path d="M183 21H180V24H183V21Z" fill="white"/>
<path d="M186 24H183V27H186V24Z" fill="white"/>
<path d="M189 24H186V27H189V24Z" fill="white"/>
<path d="M192 24H189V27H192V24Z" fill="white"/>
<path d="M192 27H189V30H192V27Z" fill="white"/>
<path d="M189 27H186V30H189V27Z" fill="white"/>
<path d="M186 27H183V30H186V27Z" fill="white"/>
<path d="M192 30H189V33H192V30Z" fill="white"/>
<path d="M189 30H186V33H189V30Z" fill="white"/>
<path d="M186 30H183V33H186V30Z" fill="white"/>
<path d="M183 30H180V33H183V30Z" fill="white"/>
<path d="M180 30H177V33H180V30Z" fill="white"/>
<path d="M183 27H180V30H183V27Z" fill="white"/>
<path d="M192 33H189V36H192V33Z" fill="white"/>
<path d="M189 33H186V36H189V33Z" fill="white"/>
<path d="M189 36H186V39H189V36Z" fill="white"/>
<path d="M189 39H186V42H189V39Z" fill="white"/>
<path d="M189 42H186V45H189V42Z" fill="white"/>
<path d="M186 33H183V36H186V33Z" fill="white"/>
<path d="M192 36H189V39H192V36Z" fill="white"/>
<path d="M192 39H189V42H192V39Z" fill="white"/>
<path d="M192 42H189V45H192V42Z" fill="white"/>
<path d="M192 45H189V48H192V45Z" fill="white"/>
<path d="M192 48H189V51H192V48Z" fill="white"/>
<path d="M195 30H192V33H195V30Z" fill="white"/>
<path d="M195 33H192V36H195V33Z" fill="white"/>
<path d="M195 36H192V39H195V36Z" fill="white"/>
<path d="M195 39H192V42H195V39Z" fill="white"/>
<path d="M195 42H192V45H195V42Z" fill="white"/>
<path d="M195 45H192V48H195V45Z" fill="white"/>
<path d="M198 30H195V33H198V30Z" fill="white"/>
<path d="M198 24H195V27H198V24Z" fill="white"/>
<path d="M198 21H195V24H198V21Z" fill="white"/>
<path d="M198 15H195V18H198V15Z" fill="white"/>
<path d="M195 15H192V18H195V15Z" fill="white"/>
<path d="M192 18H189V21H192V18Z" fill="white"/>
<path d="M192 15H189V18H192V15Z" fill="white"/>
<path d="M195 12H192V15H195V12Z" fill="white"/>
<path d="M198 9H195V12H198V9Z" fill="white"/>
<path d="M201 6H198V9H201V6Z" fill="white"/>
<path d="M201 9H198V12H201V9Z" fill="white"/>
<path d="M201 12H198V15H201V12Z" fill="white"/>
<path d="M201 15H198V18H201V15Z" fill="white"/>
<path d="M204 15H201V18H204V15Z" fill="white"/>
<path d="M207 15H204V18H207V15Z" fill="white"/>
<path d="M207 18H204V21H207V18Z" fill="white"/>
<path d="M207 21H204V24H207V21Z" fill="white"/>
<path d="M207 24H204V27H207V24Z" fill="white"/>
<path d="M204 12H201V15H204V12Z" fill="white"/>
<path d="M207 12H204V15H207V12Z" fill="white"/>
<path d="M204 9H201V12H204V9Z" fill="white"/>
<path d="M207 9H204V12H207V9Z" fill="white"/>
<path d="M204 6H201V9H204V6Z" fill="white"/>
<path d="M207 6H204V9H207V6Z" fill="white"/>
<path d="M210 9H207V12H210V9Z" fill="white"/>
<path d="M213 9H210V12H213V9Z" fill="white"/>
<path d="M216 6H213V9H216V6Z" fill="white"/>
<path d="M216 3H213V6H216V3Z" fill="white"/>
<path d="M219 3H216V6H219V3Z" fill="white"/>
<path d="M222 3H219V6H222V3Z" fill="white"/>
<path d="M225 3H222V6H225V3Z" fill="white"/>
<path d="M228 3H225V6H228V3Z" fill="white"/>
<path d="M231 3H228V6H231V3Z" fill="white"/>
<path d="M234 3H231V6H234V3Z" fill="white"/>
<path d="M237 3H234V6H237V3Z" fill="white"/>
<path d="M240 3H237V6H240V3Z" fill="white"/>
<path d="M243 6H240V9H243V6Z" fill="white"/>
<path d="M240 6H237V9H240V6Z" fill="white"/>
<path d="M237 6H234V9H237V6Z" fill="white"/>
<path d="M234 6H231V9H234V6Z" fill="white"/>
<path d="M231 6H228V9H231V6Z" fill="white"/>
<path d="M228 6H225V9H228V6Z" fill="white"/>
<path d="M225 6H222V9H225V6Z" fill="white"/>
<path d="M222 6H219V9H222V6Z" fill="white"/>
<path d="M219 6H216V9H219V6Z" fill="white"/>
<path d="M216 9H213V12H216V9Z" fill="white"/>
<path d="M219 9H216V12H219V9Z" fill="white"/>
<path d="M222 9H219V12H222V9Z" fill="white"/>
<path d="M225 9H222V12H225V9Z" fill="white"/>
<path d="M228 9H225V12H228V9Z" fill="white"/>
<path d="M228 12H225V15H228V12Z" fill="white"/>
<path d="M225 12H222V15H225V12Z" fill="white"/>
<path d="M222 12H219V15H222V12Z" fill="white"/>
<path d="M219 12H216V15H219V12Z" fill="white"/>
<path d="M216 12H213V15H216V12Z" fill="white"/>
<path d="M213 12H210V15H213V12Z" fill="white"/>
<path d="M210 12H207V15H210V12Z" fill="white"/>
<path d="M210 15H207V18H210V15Z" fill="white"/>
<path d="M213 15H210V18H213V15Z" fill="white"/>
<path d="M216 15H213V18H216V15Z" fill="white"/>
<path d="M219 15H216V18H219V15Z" fill="white"/>
<path d="M222 15H219V18H222V15Z" fill="white"/>
<path d="M225 15H222V18H225V15Z" fill="white"/>
<path d="M225 18H222V21H225V18Z" fill="white"/>
<path d="M222 18H219V21H222V18Z" fill="white"/>
<path d="M219 18H216V21H219V18Z" fill="white"/>
<path d="M216 18H213V21H216V18Z" fill="white"/>
<path d="M213 18H210V21H213V18Z" fill="white"/>
<path d="M210 18H207V21H210V18Z" fill="white"/>
<path d="M210 21H207V24H210V21Z" fill="white"/>
<path d="M213 21H210V24H213V21Z" fill="white"/>
<path d="M216 21H213V24H216V21Z" fill="white"/>
<path d="M219 21H216V24H219V21Z" fill="white"/>
<path d="M222 21H219V24H222V21Z" fill="white"/>
<path d="M231 9H228V12H231V9Z" fill="white"/>
<path d="M231 12H228V15H231V12Z" fill="white"/>
<path d="M228 15H225V18H228V15Z" fill="white"/>
<path d="M228 18H225V21H228V18Z" fill="white"/>
<path d="M234 19H231V22H234V19Z" fill="white"/>
<path d="M231 22H228V25H231V22Z" fill="white"/>
<path d="M234 22H231V25H234V22Z" fill="white"/>
<path d="M225 21H222V24H225V21Z" fill="white"/>
<path d="M225 24H222V27H225V24Z" fill="white"/>
<path d="M222 24H219V27H222V24Z" fill="white"/>
<path d="M219 24H216V27H219V24Z" fill="white"/>
<path d="M216 24H213V27H216V24Z" fill="white"/>
<path d="M213 24H210V27H213V24Z" fill="white"/>
<path d="M210 24H207V27H210V24Z" fill="white"/>
<path d="M222 27H219V30H222V27Z" fill="white"/>
<path d="M246 6H243V9H246V6Z" fill="white"/>
<path d="M195 6H192V9H195V6Z" fill="white"/>
<path d="M192 6H189V9H192V6Z" fill="white"/>
<path d="M189 6H186V9H189V6Z" fill="white"/>
<path d="M198 12H195V15H198V12Z" fill="white"/>
<path d="M201 21H198V24H201V21Z" fill="white"/>
<path d="M201 24H198V27H201V24Z" fill="white"/>
<path d="M204 24H201V27H204V24Z" fill="white"/>
<path d="M207 27H204V30H207V27Z" fill="white"/>
<path d="M210 27H207V30H210V27Z" fill="white"/>
<path d="M213 30H210V33H213V30Z" fill="white"/>
<path d="M213 27H210V30H213V27Z" fill="white"/>
<path d="M216 27H213V30H216V27Z" fill="white"/>
<path d="M219 27H216V30H219V27Z" fill="white"/>
<path d="M219 30H216V33H219V30Z" fill="white"/>
<path d="M222 30H219V33H222V30Z" fill="white"/>
<path d="M222 33H219V36H222V33Z" fill="white"/>
<path d="M222 39H219V42H222V39Z" fill="white"/>
<path d="M234 42H231V45H234V42Z" fill="white"/>
<path d="M234 48H231V51H234V48Z" fill="white"/>
<path d="M231 48H228V51H231V48Z" fill="white"/>
<path d="M228 51H225V54H228V51Z" fill="white"/>
<path d="M225 54H222V57H225V54Z" fill="white"/>
<path d="M231 51H228V54H231V51Z" fill="white"/>
<path d="M234 51H231V54H234V51Z" fill="white"/>
<path d="M234 54H231V57H234V54Z" fill="white"/>
<path d="M237 51H234V54H237V51Z" fill="white"/>
<path d="M237 54H234V57H237V54Z" fill="white"/>
<path d="M231 39H228V42H231V39Z" fill="white"/>
<path d="M195 27H192V30H195V27Z" fill="white"/>
<path d="M195 24H192V27H195V24Z" fill="white"/>
<path d="M198 33H195V36H198V33Z" fill="white"/>
<path d="M198 36H195V39H198V36Z" fill="white"/>
<path d="M198 39H195V42H198V39Z" fill="white"/>
<path d="M198 42H195V45H198V42Z" fill="white"/>
<path d="M201 48H198V51H201V48Z" fill="white"/>
<path d="M159 18H156V21H159V18Z" fill="white"/>
<path d="M159 21H156V24H159V21Z" fill="white"/>
<path d="M156 18H153V21H156V18Z" fill="white"/>
<path d="M153 18H150V21H153V18Z" fill="white"/>
<path d="M150 18H147V21H150V18Z" fill="white"/>
<path d="M156 21H153V24H156V21Z" fill="white"/>
<path d="M153 21H150V24H153V21Z" fill="white"/>
<path d="M150 21H147V24H150V21Z" fill="white"/>
<path d="M147 21H144V24H147V21Z" fill="white"/>
<path d="M150 24H147V27H150V24Z" fill="white"/>
<path d="M147 24H144V27H147V24Z" fill="white"/>
<path d="M144 24H141V27H144V24Z" fill="white"/>
<path d="M144 21H141V24H144V21Z" fill="white"/>
<path d="M144 18H141V21H144V18Z" fill="white"/>
<path d="M141 18H138V21H141V18Z" fill="white"/>
<path d="M141 15H138V18H141V15Z" fill="white"/>
<path d="M138 12H135V15H138V12Z" fill="white"/>
<path d="M141 12H138V15H141V12Z" fill="white"/>
<path d="M144 12H141V15H144V12Z" fill="white"/>
<path d="M144 15H141V18H144V15Z" fill="white"/>
<path d="M147 15H144V18H147V15Z" fill="white"/>
<path d="M150 15H147V18H150V15Z" fill="white"/>
<path d="M153 15H150V18H153V15Z" fill="white"/>
<path d="M156 15H153V18H156V15Z" fill="white"/>
<path d="M147 12H144V15H147V12Z" fill="white"/>
<path d="M135 9H132V12H135V9Z" fill="white"/>
<path d="M132 9H129V12H132V9Z" fill="white"/>
<path d="M129 9H126V12H129V9Z" fill="white"/>
<path d="M126 6H123V9H126V6Z" fill="white"/>
<path d="M129 6H126V9H129V6Z" fill="white"/>
<path d="M132 3H129V6H132V3Z" fill="white"/>
<path d="M132 6H129V9H132V6Z" fill="white"/>
<path d="M138 6H135V9H138V6Z" fill="white"/>
<path d="M141 6H138V9H141V6Z" fill="white"/>
<path d="M144 6H141V9H144V6Z" fill="white"/>
<path d="M138 9H135V12H138V9Z" fill="white"/>
<path d="M141 9H138V12H141V9Z" fill="white"/>
<path d="M144 9H141V12H144V9Z" fill="white"/>
<path d="M147 9H144V12H147V9Z" fill="white"/>
<path d="M141 21H138V24H141V21Z" fill="white"/>
<path d="M147 27H144V30H147V27Z" fill="white"/>
<path d="M153 24H150V27H153V24Z" fill="white"/>
<path d="M150 27H147V30H150V27Z" fill="white"/>
<path d="M150 30H147V33H150V30Z" fill="white"/>
<path d="M153 33H150V36H153V33Z" fill="white"/>
<path d="M153 36H150V39H153V36Z" fill="white"/>
<path d="M153 39H150V42H153V39Z" fill="white"/>
<path d="M162 36H159V39H162V36Z" fill="white"/>
<path d="M162 39H159V42H162V39Z" fill="white"/>
<path d="M162 42H159V45H162V42Z" fill="white"/>
<path d="M162 45H159V48H162V45Z" fill="white"/>
<path d="M162 48H159V51H162V48Z" fill="white"/>
<path d="M162 51H159V54H162V51Z" fill="white"/>
<path d="M162 54H159V57H162V54Z" fill="white"/>
<path d="M162 57H159V60H162V57Z" fill="white"/>
<path d="M156 33H153V36H156V33Z" fill="white"/>
<path d="M156 36H153V39H156V36Z" fill="white"/>
<path d="M156 39H153V42H156V39Z" fill="white"/>
<path d="M156 42H153V45H156V42Z" fill="white"/>
<path d="M165 36H162V39H165V36Z" fill="white"/>
<path d="M165 39H162V42H165V39Z" fill="white"/>
<path d="M165 42H162V45H165V42Z" fill="white"/>
<path d="M165 45H162V48H165V45Z" fill="white"/>
<path d="M165 48H162V51H165V48Z" fill="white"/>
<path d="M165 51H162V54H165V51Z" fill="white"/>
<path d="M165 54H162V57H165V54Z" fill="white"/>
<path d="M159 33H156V36H159V33Z" fill="white"/>
<path d="M159 36H156V39H159V36Z" fill="white"/>
<path d="M159 39H156V42H159V39Z" fill="white"/>
<path d="M159 42H156V45H159V42Z" fill="white"/>
<path d="M159 45H156V48H159V45Z" fill="white"/>
<path d="M168 36H165V39H168V36Z" fill="white"/>
<path d="M168 39H165V42H168V39Z" fill="white"/>
<path d="M168 42H165V45H168V42Z" fill="white"/>
<path d="M168 45H165V48H168V45Z" fill="white"/>
<path d="M168 48H165V51H168V48Z" fill="white"/>
<path d="M171 39H168V42H171V39Z" fill="white"/>
<path d="M165 9H162V12H165V9Z" fill="white"/>
<path d="M168 6H165V9H168V6Z" fill="white"/>
<path d="M171 3H168V6H171V3Z" fill="white"/>
<path d="M168 3H165V6H168V3Z" fill="white"/>
<path d="M165 3H162V6H165V3Z" fill="white"/>
<path d="M165 0H162V3H165V0Z" fill="white"/>
<path d="M168 0H165V3H168V0Z" fill="white"/>
<path d="M171 0H168V3H171V0Z" fill="white"/>
<path d="M174 0H171V3H174V0Z" fill="white"/>
<path d="M165 12H162V15H165V12Z" fill="white"/>
<path d="M144 18H147V21H144V18Z" fill="white"/>
</svg>
</div>
<svg class="globe" width="66" height="63" viewBox="0 0 66 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30 0H27H24V3H21H18H15V6H12V9H9V12H6V15H3V18V21H0V24V27V30V33V36V39V42H3V45L3 48H6L6 51H9V54H12V57H15V60H18H21H24V63H27H30H33H36H39H42V60H45H48H51V57H54V54H57V51H60V48H63V45V42H66V39V36V33V30V27V24V21H63V18V15H60V12H57V9H54V6H51V3H48H45H42V0H39H36H33H30ZM42 3V6H45H48H51V9H54V12V15H57H60V18V21H63V24V27V30V33V36V39V42H60V45V48H57H54V51H51V54V57H48H45H42V60H39H36H33H30H27H24V57H21H18H15V54V51H12V48H9H6V45V42H3L3 39V36V33V30V27V24V21H6V18H9V15V12H12V9H15V6H18H21H24V3H27H30H33H36H39H42Z" fill="white"/></svg>
</div>
body {
width: 100vw;
height: 100vh;
background: #000829;
display: grid;
place-items: center;
}
.main-container {
display: flex;
Justify-content: center;
align-items: center;
position: relative;
height: 63px;
width: 66px;
animation: flicker 3s infinite;
}
@keyframes flicker {
0% {
opacity: 1;
}
18% {
opacity: 1;
}
19% {
opacity: 0;
}
20% {
opacity: 1;
}
96% {
opacity: 1;
}
97% {
opacity: 0;
}
98% {
opacity: 1;
}
}
.countries-container {
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
height: 96%;
width: 96%;
border-radius: 100px;
overflow: hidden;
z-index: 2;
}
.countries {
position: absolute;
animation: axis-spin 5s steps(24) infinite;
}
@keyframes axis-spin {
from {
transform: translatex(0px);
}
to {
transform: translatex(-123px);
}
}
.globe {
position: absolute;
filter: drop-shadow(-2px -2px 8px #FF409C) drop-shadow(2px 2px 3px #3B2BFF);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment