about-header.svg

<!-- <svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>

.👋🌎 {
  background-color:#006157;
  background-image:radial-gradient(#00c7b2, #006157);
  background-size:100%;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#fff;
  text-align:center;
  height: 100%;
}

.👋🌎__words {
  max-width:400px;
  margin:auto;
  padding:20% 0;
  font-size:2.2em;
  text-transform:uppercase;
  font-family: 'Oswald', sans-serif;
}


.👋🌎__words div {
 position:absolute;
 opacity:0;
 overflow:hidden;
 left:10vw;
 width:80vw;
 line-height:1.2em;
 animation: blur-word 32s linear infinite 0s;
}

@keyframes blur-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

.👋🌎__words div:nth-child(2) { animation-delay: 4s}
.👋🌎__words div:nth-child(3) { animation-delay: 8s}


@keyframes author {
    0% { opacity: 0;  transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
    20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
    30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
    90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
    100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
}
			</style>
			<div class="👋🌎">
  <div class="👋🌎__words">  
    <div>Hello World!</div>
    <div>My name is Corey Bruyere</div>
    <div>And welcome to my web page!</div>
  </div>
</div>


		</div>
	</foreignObject>
</svg> -->

<svg fill="none" viewBox="0 0 370 400" width="370" height="400" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>

.👋🌎 {
  background-color:#fff;
  background-image:radial-gradient(#e3fffc, #fff);
  background-size:100%;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#006157;
  text-align:center;
  height: 100%;
}

.👋🌎__words {
  height: 400px;
  font-size:2.2em;
  text-transform:uppercase;
  font-family: "Comic Sans MS", cursive, sans-serif
}


.👋🌎__words div {
 opacity:0;
 overflow:hidden;
 
 line-height:1.2em;
 animation: blur-word 32s linear infinite 0s;
}

@keyframes blur-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

.👋🌎__words div:nth-child(2) { animation-delay: 4s}
.👋🌎__words div:nth-child(3) { animation-delay: 8s}


			</style>
			<div class="👋🌎">
  <div class="👋🌎__words">  
    <div>Hello World!</div>
    <div>My name is Corey Bruyere</div>
    <div>And welcome to my web page!</div>
  </div>
</div>


		</div>
	</foreignObject>
</svg>