Creating Graphics with Code

Introduction

If you’ve worked with AI image generation tools, you’ve probably noticed a frustrating limitation: they struggle with text. Whether it’s DALL-E, Midjourney, or Stable Diffusion, getting clean, readable text in generated images is notoriously difficult. The letters come out warped, misspelled, or just plain nonsensical.

This becomes a real problem when you need graphics for video content—title cards, lower thirds, animated explanations, or data visualizations. You want professional-looking graphics with clear text, but traditional design tools require manual work, and AI image generators can’t deliver the precision you need.

But here’s the thing: AI doesn’t just generate images. It can also generate code. And code can create graphics with perfect text, precise positioning, and smooth animations.

The Code Solution

Instead of asking AI to generate an image, we can ask it to generate HTML, CSS, and JavaScript that renders the graphic we want. This approach has several advantages:

• Perfect text rendering: Browsers are built to render text beautifully
• Precise control: CSS gives us exact positioning and styling
• Animation capabilities: JavaScript and CSS animations provide smooth, professional motion
• Easy iteration: Tweaking code is faster than regenerating images
• Scalability: Vector-based graphics scale to any resolution
• Interactivity: We can add hover effects, clicks, or dynamic data

The workflow is simple:

1. Describe the graphic you want to an AI assistant
2. Ask it to generate HTML/CSS/JS code
3. Save the code to a file and open it in a browser
4. Screen record the result for your video

Steps to Try This Yourself

Let me walk you through a practical example. Let’s say you want to create an animated graphic explaining the “Wash Sale Rule” for a finance video.

Step 1: Craft Your Prompt

Be specific about what you want. Here’s an example prompt:

Create an HTML page with embedded CSS and JavaScript that shows an 
animated explanation of the Wash Sale Rule. The animation should:
- Display the title "Wash Sale Rule" prominently
- Show a timeline of stock transactions
- Animate the purchase, sale, and repurchase events
- Highlight the 30-day window
- Use professional colors (blues and grays)
- Run for about 10 seconds then loop

Step 2: Generate and Save the Code

Ask your AI assistant (ChatGPT, Claude, etc.) to generate the code. Copy the entire HTML output and save it as wash-sale-rule.html.

Step 3: Open and Record

Open the HTML file in your browser. You’ll see your animated graphic running. Use screen recording software (OBS, QuickTime, etc.) to capture it.

Step 4: Iterate if Needed

Not quite right? Ask the AI to adjust colors, timing, text size, or animation speed. The iteration cycle is much faster than regenerating images.

In Practice

I’ve used this technique for several types of graphics:

Title Cards: Clean, animated text introductions for video segments. The AI can generate fade-ins, slide effects, or creative typography animations.

Data Visualizations: Charts and graphs that animate to show trends. Much more engaging than static images, and the data is always readable.

Concept Explanations: Step-by-step visual breakdowns of complex topics. The AI can create diagrams that build progressively, perfect for educational content.

Lower Thirds: Professional name tags and captions that appear during interviews or presentations.

The key is being specific in your prompts. Describe the layout, colors, timing, and any specific elements you need. The more detail you provide, the closer the first iteration will be to what you want.

Next Steps

Once you have your HTML file, you can:

• Edit directly: If you know HTML/CSS, you can fine-tune the code yourself
• Extract frames: Use video editing software to grab specific frames as static images
• Create variations: Duplicate the file and ask AI to modify it for different versions
• Add interactivity: If you’re embedding on a website, the graphics can respond to user input

Future Thinking

This approach opens up interesting possibilities:

Template Creation: Build a library of reusable graphic templates that you can quickly customize with new text or data.

Automation: Script the generation process to create multiple graphics from a data source (like generating social media cards for each blog post).

Real-time Graphics: For live streams or presentations, these HTML graphics can update dynamically based on real-time data.

Video Export: Tools like Puppeteer can programmatically render HTML to video, enabling fully automated graphic generation pipelines.

The intersection of AI code generation and web technologies gives us a powerful new tool for content creation. Instead of fighting with AI image generators to get readable text, we can leverage what browsers do best: rendering text, layouts, and animations with precision.

Next time you need a graphic for a video, try asking AI to write the code instead of generating an image. You might be surprised at how much faster and more flexible the workflow becomes.

Have you tried generating graphics with code? What types of visuals have you created? I’d love to hear about your experiences and any creative applications you’ve discovered.