header.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 120" width="800" height="120" xml:space="preserve">
<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feTurbulence type="turbulence" baseFrequency="0.015 0.015" numOctaves="3" seed="8" stitchTiles="stitch" result="turbulence"></feTurbulence><feMorphology operator="dilate" radius="35 35" in="turbulence" result="morphology"></feMorphology><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 0" in="morphology" result="colormatrix"></feColorMatrix><feColorMatrix type="saturate" values="10" in="colormatrix" result="colormatrix1"></feColorMatrix><feComposite in="colormatrix1" in2="SourceAlpha" operator="in" result="composite"></feComposite></filter>
	<foreignObject width="100%" height="100%">
		  <script type="text/javascript">
		        window.addEventListener('load',function(){
		        alert('Hi')
		        })
	    		</script>   

		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
				.Box {
					font-family:
						system-ui,
						-apple-system,
						'Segoe UI',
						Roboto,
						Helvetica,
						Arial,
						sans-serif,
						'Apple Color Emoji',
						'Segoe UI Emoji';
					display: flex;
					flex-direction: column;
					margin: 0;
				        text-align: center;
					width: 100%;
					height: 120px;
					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
					background-size: 600% 400%;
					animation: gradientBackground 10s ease infinite;
					border-radius: 10px;
					color: white;
                    filter: url(#filter) !important;
				}

				h1 {
					font-size: 40px;
					line-height: 1.3;
					letter-spacing: 5px;
					text-transform: uppercase;
					text-shadow:
						0 1px 0 #efefef,
						0 2px 0 #efefef,
						0 3px 0 #efefef,
						0 4px 0 #efefef,
						0 12px 5px rgba(0, 0, 0, 0.1);
					animation: rotate ease-in-out 1s infinite alternate;
				}

				p {
					font-size: 15px;
					text-shadow: 0 1px 0 #efefef;
					animation: 1s ease 0s normal forwards 1 fadeIn;
					  padding-top: 10px;
					  padding-right: 10px;
					  padding-bottom: 10px;
					  padding-left: 10px;
				}
			</style>
			<div class="markdown-body">
				<h1 id="meow">Meow</h1>
			</div>
		</div>
	</foreignObject>
</svg>