JSFoo 2019

JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)



Anand S


Generating comics with JS

Submitted Apr 13, 2019

What does it take to create a FontAwesome equivalent for comics?

We love comics. We badly wanted to create comic strips. But there was one problem. Some of us can’t draw a straight line for nuts. But we wanted to express our data visualizations by evoking emotions -- in the form of comics. So we created a JavaScript utility for that instead.

  • How we broke down comic characters into structured components (and how you can break down arbitrary images similarly in JS)
  • How to draw and compose these images using data
  • How to handle problems with static content and async loaoding on CDNs

Intended audience:

  • JS developers who want to include comics in their pages
  • JS developers who want to understand gotchas in library packaging


Why do we need to bother with comics?

Sample static content

How can we control comic content using data analysis

Sample GIF

How we built a library to automate this

Library screenshot



Speaker bio

Anand is a co-founder of Gramener, a company that narrates insights as data stories.

Anand is design-impaired. So he had to automate designs to make them work. He’s also artistically impaired, and therefore has to automate comics to draw them


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hybrid access (members only)

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more