CSS + SVG filters only version of https://twitter.com/mattrothenberg/status/2040416074710102300

css-only-cfworkers-demo.html

<!-- i have to warn you, this code SUCKS! i DO NOT recommend using this code, but you can if you want -->
<div style="width:calc(442px + 28px * 2); outline:1px solid #232323; border-radius:8px;position: absolute;top:0;left:0;translate:calc(50vw - 50%) calc(50vh - 50%); box-sizing: border-box;container-type: size;height:600px;contain:strict">
	<div style="overflow: clip;contain:strict;width:100%;height:100%;position:absolute">
		<div style="padding:28px;display: flex;height:100%;box-sizing:border-box;flex-direction: column;align-items: center;justify-content: center;">
		<svg class="nv-block sm:nv-hidden nv-h-6 nv-w-auto" style="width:100px;margin-top:2px" viewBox="0 0 1230.574 519.774" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare"><path d="m784.025 512.011 5.872-20.311c6.998-24.169 4.394-46.511-7.349-62.926-10.801-15.122-28.804-24.022-50.666-25.056l-414.114-5.281c-2.788-.147-5.096-1.403-6.518-3.471-1.44-2.123-1.773-4.856-.886-7.478 1.366-4.08 5.41-7.164 9.62-7.349l417.954-5.299c49.576-2.271 103.252-42.505 122.048-91.564l23.837-62.28c.657-1.696.952-3.493.94-5.294-.007-.984-.078-1.969-.294-2.94-27.086-121.734-135.711-212.762-265.606-212.762-119.685 0-221.312 77.254-257.76 184.623-23.523-17.652-53.62-27.031-85.969-23.801-57.423 5.706-103.565 51.94-109.271 109.363-1.496 14.901-.277 29.284 3.158 42.8-93.799 2.733-169.021 79.581-169.021 174.044 0 8.549.646 16.95 1.846 25.166.591 3.988 3.952 6.98 7.977 6.98l764.527.092c.076 0 .142-.034.218-.036 4.374-.097 8.222-2.991 9.457-7.22z" fill="#f78100"></path><path d="m921.982 225.558c-3.841 0-7.663.111-11.466.295-.628.033-1.224.185-1.796.385-1.985.696-3.566 2.305-4.168 4.397l-16.286 56.242c-6.998 24.169-4.395 46.493 7.349 62.907 10.801 15.14 28.804 24.022 50.665 25.056l88.277 5.299c2.604.129 4.893 1.385 6.297 3.416 1.477 2.142 1.809 4.893.923 7.515-1.385 4.081-5.41 7.164-9.601 7.349l-91.73 5.299c-49.798 2.29-103.473 42.505-122.27 91.564l-6.629 17.319c-1.206 3.134 1.039 6.472 4.354 6.635.084.004.159.031.244.031h315.626c3.766 0 7.127-2.456 8.142-6.075 5.484-19.498 8.402-40.048 8.402-61.301 0-125.002-101.331-226.333-226.333-226.333z" fill="#fbac42"></path></svg>
		<h2>Okay done lol</h2>
		<p style="color:oklch(55.6% 0 0);margin-top:0;letter-spacing: -0.2px;margin-bottom: 23px;">Made with CSS & SVG Filters, no JS</p>
		</div>
	</div>
	<div style="overflow: clip;contain:strict;width:100%;height:100%;position:absolute">
		<div class="scanClip">
		<div style="padding:28px;background:#101010">
		<svg class="nv-block sm:nv-hidden nv-h-6 nv-w-auto" style="width:100px;margin-top:2px" viewBox="0 0 1230.574 519.774" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare"><path d="m784.025 512.011 5.872-20.311c6.998-24.169 4.394-46.511-7.349-62.926-10.801-15.122-28.804-24.022-50.666-25.056l-414.114-5.281c-2.788-.147-5.096-1.403-6.518-3.471-1.44-2.123-1.773-4.856-.886-7.478 1.366-4.08 5.41-7.164 9.62-7.349l417.954-5.299c49.576-2.271 103.252-42.505 122.048-91.564l23.837-62.28c.657-1.696.952-3.493.94-5.294-.007-.984-.078-1.969-.294-2.94-27.086-121.734-135.711-212.762-265.606-212.762-119.685 0-221.312 77.254-257.76 184.623-23.523-17.652-53.62-27.031-85.969-23.801-57.423 5.706-103.565 51.94-109.271 109.363-1.496 14.901-.277 29.284 3.158 42.8-93.799 2.733-169.021 79.581-169.021 174.044 0 8.549.646 16.95 1.846 25.166.591 3.988 3.952 6.98 7.977 6.98l764.527.092c.076 0 .142-.034.218-.036 4.374-.097 8.222-2.991 9.457-7.22z" fill="#f78100"></path><path d="m921.982 225.558c-3.841 0-7.663.111-11.466.295-.628.033-1.224.185-1.796.385-1.985.696-3.566 2.305-4.168 4.397l-16.286 56.242c-6.998 24.169-4.395 46.493 7.349 62.907 10.801 15.14 28.804 24.022 50.665 25.056l88.277 5.299c2.604.129 4.893 1.385 6.297 3.416 1.477 2.142 1.809 4.893.923 7.515-1.385 4.081-5.41 7.164-9.601 7.349l-91.73 5.299c-49.798 2.29-103.473 42.505-122.27 91.564l-6.629 17.319c-1.206 3.134 1.039 6.472 4.354 6.635.084.004.159.031.244.031h315.626c3.766 0 7.127-2.456 8.142-6.075 5.484-19.498 8.402-40.048 8.402-61.301 0-125.002-101.331-226.333-226.333-226.333z" fill="#fbac42"></path></svg>
	<form style="z-index:1;position:relative">
		<h2>Create a Worker</h2>
		<p style="color:oklch(55.6% 0 0);margin-top:0;letter-spacing: -0.2px;margin-bottom: 23px;">Deploy serverless code instantly across Cloudflare's<br>global network.</p>

		<label for=name>Name</label>
		<span style="position:relative"><input type="text" style="position:absolute;background:#131313;right:0;top:-7px;width:6.6em;border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;text-align:right;color:oklch(55.6% 0 0);pointer-events:none;" tabindex="-1" value=".lyra.horse"><input data-outline type="text" placeholder="my-api" id="name"></span>
		<label for=template>Starter template</label>
		<!--
		<input type="text" name="template">
	-->
	<select data-outline id="template">
		<option>Lyra Heartstrings</option>
		<option>Sweetie Drops</option>
	</select>
		<label for=compat>Compatibility date</label>
		<input data-outline type="text" value="2026-04-04" id="compat">
		<!-- <input type="submit" style="border:none;background:#FFF;color:#000;font-weight:700;margin-top:27px" value="Deploy"> -->
		<label data-nostyle data-outline for="deploy" style="cursor:pointer"><input id="deploy" type="checkbox" style="position:absolute;pointer-events:none;opacity:0">
			<input type="button" style="border:none;background:#FFF;color:#000;font-weight:700;margin-top:27px;pointer-events:none" value="Deploy" tabindex="-1"></label>
		<p style="color:oklch(55.6% 0 0);margin-top:0;letter-spacing: -0.2px;margin-bottom: 23px;font-size:13px;text-align: center;">Or connect a <a href="https://gist.github.com/rebane2001/8b83121a7ea9263f136928231b6737eb" style="color:#F3741B">Git repository</a> for CI/CD</p>
		<outline-thing a></outline-thing>
		<outline-thing b></outline-thing>
		<outline-thing c></outline-thing>
	</form>
</div>
</div>
	<scanner-thing></scanner-thing>
	</div>
</div>
<style>
	html {
		color-scheme: dark;
		background: #101010;
		font: 14px Inter;
		line-height: 1.5;
		&:has(#deploy:checked) {
			.scanClip {
				animation: mask 3s ease-in-out forwards;
				pointer-events: none;
			}
			scanner-thing {
				animation: scanner 3s ease-in-out forwards;
				display: block;
			}
		}
	}
	h2 {
		font-feature-settings: "calt", "cv02", "cv03", "cv04";
		font-size: 20px;
    	letter-spacing: -0.5px;
		font-variation-settings: "opsz" 24;
		font-weight: 700;
		margin:0;
		margin-top:28px;
	}
	scanner-thing {
		display: none;
		position:absolute;
		top: 0;
		left: 0;
		right: 0;
		&::before {
			display: block;
			position:absolute;
			inset: 0;
			bottom: -64px;
			content: "";
			backdrop-filter: url(#warp);
		}
		&::after {
			display: block;
			position:absolute;
			inset: 0;
			top: -32px;
			bottom: -32px;
			content: "";
			background: linear-gradient(0deg, #F3741B00, #F3741B05 25%, #F3741B22 49%, #F3741B 49.3%, #F3741B 50.7%, #F3741B22 51%, #F3741B05 75%, #F3741B00);
		}
	}
	label:not([data-nostyle]) {
		font-size:13px;
		font-weight: 500;
		display:block;
		color: oklch(74% 0 0);
	}
select, ::picker(select) {
  appearance: base-select;
}
	input, select {
		display:flex;
		border-radius: 8px;
		background: #181818;
		border: 1px solid #292929;
		color: #FFF;
		margin-top: 7px;
		margin-bottom: 14px;
		font: inherit;
		padding: 7px 11px;
		width: 100%;

		&::selection {
			background: #4C6F97;
		}
	}
	[data-outline]  {
				transition: anchor-name 0.4s allow-discrete;
		&:focus, &:focus-within {
			outline: none;
			anchor-name:--outline;
			transition: none;
		}	
	}
	form {
		background: #101010;
		margin-left: -28px;
		margin-right: -28px;
		padding-left: 28px;
		padding-right: 28px;
		transition: anchor-name 0.0001s allow-discrete;
		&:has([data-outline]:focus), &:has([data-outline]:focus-within) {
			anchor-name: --outline;	
		}
		&:not(:has([data-outline]:focus)):not(:has([data-outline]:focus-within)) outline-thing {
			opacity: 0;
		}
	}
	outline-thing[a] {
        position: absolute;
        position-anchor: --outline;
        inset-inline-start: anchor(start);
        inset-inline-end: anchor(end);
        inset-block-start: anchor(start);
        inset-block-end: anchor(end);
        border-radius: 4px;
        transition: block-size 0.3s, inset-block 0.3s, opacity 0.3s;
        transition-timing-function: cubic-bezier(.31,1.59,.62,.9), cubic-bezier(.31,1.59,.62,.9), linear;
        outline: 2px #F3741B solid;
        border-radius: 26px;
    	outline-offset: -16px;
        margin: -20px;
        pointer-events: none;
        z-index: -1;
        filter: url(#glow);
    }
	outline-thing[c] {
        position: absolute;
        position-anchor: --outline;
        inset-inline-start: anchor(start);
        inset-inline-end: anchor(end);
        inset-block-start: anchor(start);
        inset-block-end: anchor(end);
        border-radius: 4px;
        transition: block-size 0.3s, inset-block 0.3s, opacity 0.3s;
        transition-timing-function: cubic-bezier(.31,1.59,.62,.9), cubic-bezier(.31,1.59,.62,.9), linear;
        outline: 2px #F3741B solid;
        border-radius: 26px;
    	outline-offset: -16px;
        margin: -20px;
        pointer-events: none;
        z-index: -1;
        filter: url(#glow);
        mask: url('data:image/svg+xml,<svg width="5" height="5" xmlns="http://www.w3.org/2000/svg">\
  <rect x="0" y="0" width="1" height="1" fill="%23000" />\
</svg>');
    }
	outline-thing[b] {
        position: absolute;
        position-anchor: --outline;
        inset-inline-start: anchor(start);
        inset-inline-end: anchor(end);
        inset-block-start: anchor(start);
        inset-block-end: anchor(end);
        border-radius: 4px;
        transition: block-size 0.3s, inset-block 0.3s, opacity 0.3s;
        transition-timing-function: cubic-bezier(.31,1.59,.62,.9), cubic-bezier(.31,1.59,.62,.9), linear;
        outline: 2px #F3741B solid;
        border-radius: 26px;
    	outline-offset: -16px;
        margin: -20px;
        pointer-events: none;
        z-index: -1;
        background: #000;
        mix-blend-mode: color-dodge;
        filter: url(#glow) brightness(0.2) contrast(1.1);
        overflow:clip;
        opacity:1;
        &::before {
        	content: "";
        	inset: 8px;
        	position: absolute;
        	background: url('data:image/svg+xml,<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">\
  <filter id="turb">\
    <feTurbulence\
      type="turbulence"\
      baseFrequency="0.08"\
      numOctaves="2"\
      result="turbulence" />\
      <feColorMatrix type="saturate" values="0" />\
  </filter>\
\
  <rect x="0.5" y="0.5" width="1024" height="1024" filter="url(%23turb)" />\
</svg>');
        	animation: bp1 10s linear infinite;
/*        	mix-blend-mode: multiply;*/

        }
        &::after {
        	content: "";
        	inset: 8px;
        	position: absolute;
        	background: url('data:image/svg+xml,<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">\
  <filter id="turb">\
    <feTurbulence\
      type="turbulence"\
      baseFrequency="0.1"\
      numOctaves="2"\
      result="turbulence" />\
      <feColorMatrix type="saturate" values="0" />\
  </filter>\
\
  <rect x="0.5" y="0.5" width="1024" height="1024" filter="url(%23turb)" />\
</svg>');
        	animation: bp2 10s linear infinite;
/*        	mix-blend-mode: multiply;*/

        }
	}
	@keyframes scanner {
		0% {
			translate: 0 -32px;
		}
		100% {
			translate: 0 632px;
		}
	}
	@keyframes mask {
		0% {
			clip-path: rect(-32px 100% 600px 0px);
		}
		100% {
			clip-path: rect(632px 100% 600px 0px);
		}
	}
	@keyframes bp1 {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 100% 10%;
		}
	}
	@keyframes bp2 {
		0% {
			background-position: 100% 10%;
		}
		100% {
			background-position: 0 15%;
		}
	}
</style>
<img src="reference1.png" style="zoom:0.5;position:absolute;opacity:0;    top: -238px;
    left: -156px;pointer-events: none;">
<svg width="498" height="128" viewBox="0 0 498 128" xmlns="http://www.w3.org/2000/svg">
  <filter id="warp" color-interpolation-filters="sRGB">
    <feImage xlink:href="data:image/svg+xml,<svg width='498' height='128' viewBox='0 0 498 128' xmlns='http://www.w3.org/2000/svg'> <defs>
    	<linearGradient id='grad' gradientTransform='rotate(90)'><stop style='stop-color:%23aa8080' offset='0%' /><stop style='stop-color:%23808080' offset='100%' /></linearGradient>
    	<linearGradient id='grad2' gradientTransform='rotate(90)'><stop style='stop-color:%23aa0000' offset='0%' /><stop style='stop-color:%23000000' offset='100%' /></linearGradient>
    	<linearGradient id='grad3'><stop style='stop-color:%2300b000' offset='0%' /><stop style='stop-color:%23005000' offset='100%' /></linearGradient>
    </defs>
    	<rect fill='url(%23grad)' x='0.5' y='0.5' width='498' height='64' />
    	<rect fill='url(%23grad2)' style='mix-blend-mode:screen' x='0.5' y='0.5' width='498' height='32' />
    	<rect fill='url(%23grad2)' style='mix-blend-mode:screen' x='0.5' y='0.5' width='498' height='16' />
    	<rect fill='url(%23grad2)' style='mix-blend-mode:screen' x='0.5' y='0.5' width='498' height='8' />
    	<rect fill='url(%23grad3)' style='mix-blend-mode:overlay;mask-image: linear-gradient(black, transparent)' x='0.5' y='0.5' width='498' height='32' />
    </svg>" x="0" y="0" width="498" height="128" result="scale2x"></feImage>
    <feDisplacementMap
      in="SourceGraphic"
      scale="20"
      xChannelSelector="G"
      yChannelSelector="R" />
  </filter>
</svg>
<svg width="498" height="256" viewBox="0 0 498 256" xmlns="http://www.w3.org/2000/svg">
  <filter id="glow" color-interpolation-filters="linearRGB">
    <feGaussianBlur in="SourceGraphic" stdDeviation="16" />
    <feBlend in="SourceGraphic" mode="screen"  result="out" />
    <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
    <feBlend in="out" mode="screen"  result="out" />
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
    <feBlend in="out" mode="screen"  result="out" />
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    <feBlend in="out" mode="screen"  result="out" />
  </filter>
</svg>