Created
January 10, 2025 00:56
-
-
Save Bedrovelsen/9091361331c63decac8046ea37c520e1 to your computer and use it in GitHub Desktop.
Ascii css animaker
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import os | |
# Configuration | |
INPUT_DIR = "ascii_frames" # Directory containing ASCII art text files | |
OUTPUT_HTML = "ascii_animation.html" # Output HTML file | |
ANIMATION_DURATION = 3 # Duration of the animation in seconds | |
# HTML template | |
HTML_TEMPLATE = """ | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>ASCII Art Animation</title> | |
<style> | |
body {{ | |
font-family: Arial, sans-serif; | |
background-color: #f4f4f9; | |
color: #333; | |
margin: 0; | |
padding: 20px; | |
text-align: center; | |
}} | |
h1 {{ | |
color: #555; | |
}} | |
.ascii-art-container {{ | |
display: inline-block; | |
margin: 20px auto; | |
padding: 20px; | |
background-color: #fff; | |
border-radius: 10px; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
}} | |
.ascii-art {{ | |
font-family: monospace; | |
font-size: 16px; | |
white-space: pre; | |
text-align: center; | |
margin: 0; | |
}} | |
/* Keyframes to swap ASCII art frames */ | |
@keyframes ascii-frames {{ | |
{keyframes} | |
}} | |
/* Apply the animation to the pseudo-element */ | |
.ascii-art::before {{ | |
content: {initial_frame}; | |
animation: ascii-frames {duration}s infinite; | |
display: block; | |
}} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>ASCII Art Animation</h1> | |
</header> | |
<main> | |
<section aria-labelledby="ascii-art-heading"> | |
<h2 id="ascii-art-heading">Animated ASCII Art</h2> | |
<div class="ascii-art-container" role="figure" aria-label="Animated ASCII art"> | |
<pre class="ascii-art" aria-hidden="true"></pre> | |
</div> | |
</section> | |
</main> | |
<footer> | |
<p>Created with HTML and CSS animations.</p> | |
</footer> | |
</body> | |
</html> | |
""" | |
def read_ascii_frames(directory): | |
"""Read all ASCII art frames from text files in the given directory.""" | |
frames = [] | |
for filename in sorted(os.listdir(directory)): | |
if filename.endswith(".txt"): | |
with open(os.path.join(directory, filename), "r") as file: | |
frames.append(file.read()) | |
return frames | |
def generate_keyframes(frames): | |
"""Generate CSS keyframes for the given ASCII art frames.""" | |
keyframes = [] | |
num_frames = len(frames) | |
step = 100 / num_frames | |
for i, frame in enumerate(frames): | |
start = i * step | |
end = (i + 1) * step | |
keyframes.append(f"{start}%, {end}% {{ content: {repr(frame)}; }}") | |
return "\n ".join(keyframes) | |
def generate_html(frames, duration): | |
"""Generate the HTML page with the animation.""" | |
keyframes = generate_keyframes(frames) | |
initial_frame = repr(frames[0]) | |
return HTML_TEMPLATE.format( | |
keyframes=keyframes, | |
initial_frame=initial_frame, | |
duration=duration | |
) | |
def main(): | |
# Read ASCII art frames | |
frames = read_ascii_frames(INPUT_DIR) | |
if not frames: | |
print(f"No ASCII art frames found in '{INPUT_DIR}'. Ensure the directory contains .txt files.") | |
return | |
# Generate HTML | |
html = generate_html(frames, ANIMATION_DURATION) | |
# Write HTML to file | |
with open(OUTPUT_HTML, "w") as file: | |
file.write(html) | |
print(f"Generated '{OUTPUT_HTML}' with {len(frames)} ASCII art frames.") | |
if __name__ == "__main__": | |
main() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment