Data Stream Background
Rows of dashes stream across a dark screen at two speeds, like packets on a network bus, fading in and out at the edges. The dash rows are a generated SVG tile, masked and moved one tile per loop.
Also known as: digital data flow background, animated lines background css, technology data lines.
HTML
<div class="bgx-data-stream-lines" aria-hidden="true"> <span class="bgx-data-stream-lines-far"></span> <span class="bgx-data-stream-lines-near"></span> </div>
CSS
.bgx-data-stream-lines {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--tw: 30em;
--th: 6em;
background: color-mix(in srgb, var(--c) 7%, #04060a);
}
.bgx-data-stream-lines span {
position: absolute;
inset: 0 0 0 calc(var(--tw) * -1);
-webkit-mask: var(--rows) 0 var(--y) / var(--tw) var(--th);
mask: var(--rows) 0 var(--y) / var(--tw) var(--th);
animation: bgx-data-stream-lines-flow var(--t) linear infinite;
}
.bgx-data-stream-lines-far {
--rows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.3h54.9v1.4h-54.9zM74.4 5.3h6.7v1.4h-6.7zM118.3 5.3h21.0v1.4h-21.0zM160.5 5.3h37.9v1.4h-37.9zM236.6 5.3h21.7v1.4h-21.7zM19.1 17.3h44.0v1.4h-44.0zM80.8 17.3h12.4v1.4h-12.4zM129.5 17.3h33.2v1.4h-33.2zM172.9 17.3h32.1v1.4h-32.1zM231.7 17.3h55.0v1.4h-55.0zM3.7 29.3h19.8v1.4h-19.8zM68.4 29.3h32.4v1.4h-32.4zM134.6 29.3h24.0v1.4h-24.0zM203.1 29.3h53.5v1.4h-53.5zM279.5 29.3h10.7v1.4h-10.7zM10.0 41.3h5.4v1.4h-5.4zM35.3 41.3h15.0v1.4h-15.0zM70.1 41.3h56.7v1.4h-56.7zM157.1 41.3h35.9v1.4h-35.9zM236.1 41.3h4.2v1.4h-4.2zM259.3 41.3h22.9v1.4h-22.9zM12.6 53.3h6.2v1.4h-6.2zM63.2 53.3h4.2v1.4h-4.2zM90.0 53.3h11.1v1.4h-11.1zM135.7 53.3h55.3v1.4h-55.3zM219.6 53.3h5.6v1.4h-5.6zM249.4 53.3h8.8v1.4h-8.8zM280.8 53.3h14.8v1.4h-14.8z'/%3E%3C/svg%3E");
--y: 0.6em;
--t: 11s;
background: color-mix(in srgb, var(--c) 40%, transparent);
}
.bgx-data-stream-lines-near {
--rows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.3h4.0v1.4h-4.0zM27.2 5.3h22.1v1.4h-22.1zM67.4 5.3h4.1v1.4h-4.1zM82.8 5.3h26.6v1.4h-26.6zM142.4 5.3h18.9v1.4h-18.9zM202.0 5.3h57.8v1.4h-57.8zM272.3 5.3h27.7v1.4h-27.7zM5.5 17.3h15.4v1.4h-15.4zM36.0 17.3h44.2v1.4h-44.2zM109.7 17.3h25.8v1.4h-25.8zM175.3 17.3h21.9v1.4h-21.9zM221.2 17.3h16.8v1.4h-16.8zM250.8 17.3h4.8v1.4h-4.8zM265.2 17.3h23.4v1.4h-23.4zM28.1 29.3h20.9v1.4h-20.9zM58.5 29.3h4.5v1.4h-4.5zM108.2 29.3h22.1v1.4h-22.1zM160.3 29.3h13.5v1.4h-13.5zM213.5 29.3h13.7v1.4h-13.7zM262.5 29.3h25.5v1.4h-25.5zM9.8 41.3h62.2v1.4h-62.2zM106.9 41.3h20.7v1.4h-20.7zM149.5 41.3h8.4v1.4h-8.4zM167.5 41.3h27.8v1.4h-27.8zM242.8 41.3h17.2v1.4h-17.2zM280.9 41.3h8.2v1.4h-8.2zM5.7 53.3h29.0v1.4h-29.0zM79.2 53.3h13.3v1.4h-13.3zM132.8 53.3h25.9v1.4h-25.9zM201.6 53.3h10.8v1.4h-10.8zM248.2 53.3h11.8v1.4h-11.8zM272.9 53.3h4.5v1.4h-4.5z'/%3E%3C/svg%3E");
--y: 0;
--t: 6s;
background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 50%, #fff) 50%, var(--c));
}
.bgx-data-stream-lines::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, #04060a), transparent 25% 75%, color-mix(in srgb, var(--c) 7%, #04060a));
}
@keyframes bgx-data-stream-lines-flow {
to { transform: translateX(var(--tw)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-data-stream-lines, .bgx-data-stream-lines *, .bgx-data-stream-lines::before, .bgx-data-stream-lines::after, .bgx-data-stream-lines *::before, .bgx-data-stream-lines *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.