Skip to content

Instantly share code, notes, and snippets.

@Bedrovelsen
Created January 10, 2025 00:56
Show Gist options
  • Save Bedrovelsen/9091361331c63decac8046ea37c520e1 to your computer and use it in GitHub Desktop.
Save Bedrovelsen/9091361331c63decac8046ea37c520e1 to your computer and use it in GitHub Desktop.
Ascii css animaker
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