Skip to content

Instantly share code, notes, and snippets.

@Bedrovelsen

Bedrovelsen/index.html

Created July 19, 2025 10:06
Show Gist options
  • Save Bedrovelsen/6bde89a45de02801c52826fe7ab24335 to your computer and use it in GitHub Desktop.
Save Bedrovelsen/6bde89a45de02801c52826fe7ab24335 to your computer and use it in GitHub Desktop.
Download ZIP
Csswoahaz
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsettling Animated Background</title>
<style>
html {
height: 100vh; /* Full viewport height */
background-size: 111px; /* Default size */
background-repeat: round repeat; /* Tile seamlessly */
background-position: center center; /* Center the background */
background-image: url('data:image/svg+xml,<?xml version="1.0"?> \
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" \
[ <!ENTITY FG "lime"> \
<!ENTITY BG "black"> \
<!ENTITY FROM "M-2,-2q+1,+1+2,0+1,-1+2,0-1,1+0,2+1,1+0,2-1,-1-2,0-1,+1-2,0+1,-1+0,-2-1,-1+0,-2"> \
<!ENTITY MORF "M-2,-2q+1,-1+2,0+1,+1+2,0+1,1+0,2-1,1+0,2-1,+1-2,0-1,-1-2,0-1,-1+0,-2+1,-1+0,-2"> \
<!ENTITY nD "-2.8284271247461903"> \
<!ENTITY DD "5.656854249492381"> \
]> \
<svg xmlns="http://www.w3.org/2000/svg" viewBox="&nD;,&nD; &DD; &DD;" width="100" height="100"> \
<path d="M-3,-3h6v6h-6z"> \
<animate \
attributeName="fill" \
values="&FG;;&BG;;&BG;;&FG;" \
dur="2s" \
calcMode="discrete" \
repeatCount="indefinite" \
/> \
</path> \
<g> \
<path id="SHAPE"> \
<animate \
attributeName="fill" \
values="&BG;;&FG;;&FG;;&BG;" \
dur="2s" \
calcMode="discrete" \
repeatCount="indefinite" \
/> \
<animate \
attributeName="d" \
values="&FROM;;&MORF;;&FROM;" \
dur="2s" \
repeatCount="indefinite" \
/> \
<animateTransform \
attributeName="transform" \
type="rotate" \
to="90" \
dur="1s" \
repeatCount="indefinite" \
/> \
</path> \
<use href="%23SHAPE" x="&DD;" /> \
<use href="%23SHAPE" y="&DD;" /> \
<use href="%23SHAPE" x="&DD;" y="&DD;" /> \
<animateTransform \
attributeName="transform" \
type="translate" \
dur="2s" \
values="0,0;&nD;,&nD;;&nD;,&nD;;0,0" \
calcMode="discrete" \
repeatCount="indefinite" \
/> \
</g> \
</svg>');
}
/* Responsive background size */
@media screen and (min-width: 333px) {
html {
background-size: calc(111px + (222 - 111) * ((100vw - 222px) / (1234 - 333)));
}
}
@media screen and (min-width: 1234px) {
html {
background-size: 20vw;
}
}
</style>
</head>
<body>
<!-- Content can be added here -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment