JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="300" viewBox="0 0 1500 300" enable-background="new 0 0 500 100" xml:space="preserve" id="futuro">
<desc>Created with Fabric.js 4.6.0</desc>
<defs>
	<style>
		#f{
			stroke-dasharray: 271.84;
			stroke-dashoffset: 0;
			animation: 3s f ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes f{
			from{ stroke-dashoffset: 271.84; }
			to{ stroke-dashoffset: 0; }
		}

		#u{
			stroke-dasharray: 237.75;
			stroke-dashoffset: 0;
			animation: 3s u ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes u{
			from{ stroke-dashoffset: 237.75; }
			to{ stroke-dashoffset: 0; }
		}

		#t{
			stroke-dasharray: 195.47;
			stroke-dashoffset: 0;
			animation: 3s t ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes t{
			from{ stroke-dashoffset: 195.47; }
			to{ stroke-dashoffset: 0; }
		}

		#u2{
			stroke-dasharray: 266.61;
			stroke-dashoffset: 0;
			animation: 3s u2 ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes u2{
			from{ stroke-dashoffset: 266.61; }
			to{ stroke-dashoffset: 0; }
		}

		#r{
			stroke-dasharray: 415.78;
			stroke-dashoffset: 0;
			animation: 3s r ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes r{
			from{ stroke-dashoffset: 415.78; }
			to{ stroke-dashoffset: 0; }
		}

		#o{
			stroke-dasharray: 168.28;
			stroke-dashoffset: 0;
			animation: 3s o ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes o{
			from{ stroke-dashoffset: 168.28; }
			to{ stroke-dashoffset: 0; }
		}

		#hat{
			stroke-dasharray: 196.07;
			stroke-dashoffset: 0;
			animation: 3s hat ease-in-out alternate infinite;
			animation-fill-mode: both;
		}

		@keyframes hat{
			from{ stroke-dashoffset: 196.07; }
			to{ stroke-dashoffset: 0; }
		}

		#o-anim{
			stroke-dasharray: 168.28;
			stroke-dashoffset:...

CSS

svg{
  width: 100%;
  height: 300px;
  padding-left: 50px;
}

#futuro{
  background-color: #351EE3;
}

#crescimento{
  background-color: #F9663E;
}
#renovacao{
  background-color: #40CE7F;
}