Generating images from css-doodle code

For the past week, I've been working on a command-line tool to generate images from css-doodle source code. If you're familiar with command lines, try installing it with npm:

npm i -g @css-doodle/cli

After that, you'll be able to generate images with one line of command.

cssd render code.css -o result.png

If the code includes animations, you can also generate a video by using the .webm or .mp4 extension for the output filename.

cssd render code.css -o result.webm

Note that this tool is built on Puppeteer and requires FFmpeg to be installed for video generation.

Read more available options here.

For CSS artists

I kept CSS artists in mind since the every beginning of development, so this tool also supports generating images from local HTML files and CodePen links directly.

# from local html file
cssd render index.html

# from CodePen link
cssd render https://codepen.io/yuanchuan/pen/MQEeJo

If you ever need to generate an image for print, you can add the -x option to generate the image in a higher resolution.

# 5x size to the original
cssd render index.html --selector '#graph' -x 5

Preview

In the past, displaying css-doodle required a browser and wrapping the code inside the custom <css-doodle> element.

<css-doodle>
  <!-- code here -->
</css-doodle>

Now with command cssd preview, it will open a window to preview the result with live updates as you edit. The browser becomes invisible.

cssd preview example.css

Thoughts

After coding in the editor without <css-doodle> tags for a while, I realized there's a transition to make css-doodle a small programming language.

It's quite different. Practices once considered effective, such as using short function names, are now seem to be a bad choice. It also lacks a structure to organize and group the code, which would make it more elegant and easier to read.

There's still missing a lot and a long way to go, but I'm excited about the direction it is heading.

GitHub: https://github.com/css-doodle/cli