Learning about SVGs at Recurse
This summer, I spent 6 weeks at the Recurse Center in NYC.
When I applied, I had the vague notion that I wanted to build tools that would make 3D prototyping faster, in particular constructing 3D designs from 2D material.
From my experience with digital fabrication, I had a sense this would involve learning about SVGs, a common file format used to send 2D drawings to computer-controlled machines. While I have exported SVGs from graphics software like Sketch and Illustrator, I had never written SVG code from scratch, so learning about SVG was a new and exciting space for me.
I structured my Recurse (RC) experience to work up from designing 2D-only tools involving SVGs to applications that can be used to create 3D designs from SVG input.
While at RC, I built 8 different web applications, some taking half a day to build, while others took over a week to conceptualize and design. The apps are listed below in chronological order:
Text Animator
An introductory app for me to learn about Node.js and libraries for animating SVG paths
https://text-animator.glitch.me
SVG Animator
A tool for creating loading animations of SVGs and exporting them as GIFs
https://svg-animator.glitch.me/
Stencilfy
An app for creating a stencil version of any text, with any font. It exports an SVG for laser cutting
https://stencilfy.glitch.me/
Learn Clipper.js
An interactive tool for experimenting with the Clipper.js library to manipulate SVG paths with boolean operations.
https://clipper-js-tutorial.glitch.me/
Box Maker
A tool that generates a box package for your 3D models
https://box-maker.glitch.me/
SVG Tracer
An app that vectorize images of packaging templates, crease patterns, and more.
https://svg-tracer.glitch.me/
Paper House Designer
A tool for building your own papercraft house while learning about SVGs
https://paper-house-designer.glitch.me/
What worked for me at Recurse
I found what helped me keep pushing forward was the fact that I was building tools I personally wanted to use, addressing problems I had faced in the past but never had the time to solve.
As a designer, I built loading animations frame-by-frame in Photoshop and Sketch, which is extremely tedious – thus SVG Animator was built.
I always hated the look of Stencil fonts and wished there were an easier way to prepare text for laser cutting, which was the inspiration for Stencilfy.
I wanted to learn about packaging design but was frustrated by the prospect of manually tracing packaging diagrams I found in books, so I built SVG Tracer.
And what I discovered as I continued to design new applications is that the tools I had just created were each uniquely suited to help me solve the next problem I decided to work on.
Learning about SVG boolean operations with Clipper.js helped me generate stencil text, but also was instrumental for later interpreting solid and dashed lines in packaging diagrams.
Similarly, I constantly needed a way to visualize segments of SVG paths since I was often manipulating them, whether for animating or placing tabs in a packaging design, so I built SVG Visualizer, a tool for interactively editing and viewing SVG paths. To be honest, I think SVG Visualizer is the single most useful thing I built the entire time I was at RC — I used it every day.
The apps I ended up creating, in many ways, were just remixes of one another, using a lot of the same underlying core technologies:
Here’s a list of the main Node libraries I found helpful for building my SVG-based applications:
Helpful Node Libraries
- Text-to-svg: Convert text input to SVG path
- Anime.js: Javascript animation library (can animate SVG paths)
- Gifshot: Create animated GIFs
- Code Mirror: Syntax-highlighting text editor embeddable on webpages
- Clipper.js: Performing boolean operations on SVG paths
- Tmp: Creating temporary files in a node.js app (for processing uploaded fonts and images)
- Point-at-length: Compute points from SVG path
- svg-path-bonds: Get the bounding box from SVG path data
- xmldom: DOM for Node.js
- Potrace: Generate SVGs from bitmap images
I realize in writing this that it seems like I had a very clear plan for what to work on while I was at RC, but that wasn’t exactly the case – I kept coming up with new ideas as my understanding of SVGs grew and I realized what could be done with them.
I find that generally to be true — as you deepen your understanding of a field, it becomes easier to think of new ideas for what you can create.
But it is true that I was very focused on SVGs, which I think is general enough of a topic to have lots of areas to explore while still developing expertise.
Since I only did a 6-week half-batch rather than the normal 3-month RC experience, having a focus was very helpful for me personally. (Don’t worry – I did find time to do some random side-projects that I never shared, like building a web scraper of the Park Slope Co-op produce page, an abandoned project because Amazon didn’t approve my API request so I could query and compare Whole Foods produce prices. I think it’s because I referred to Whole Foods as Whole Paycheck.)
I’m also generally inspired by my immediate surroundings. While brainstorming ideas for what to work on, I noticed this hanging banner in the RC space:
At the time, I had just finished working on the Text Animator app which converts text to SVG, and I realized that I could build a tool to help fabricate letters. Thinking more about text and fabrication led me to come up with the idea to build Stencilfy.
Of course, the daily conversations and micro-interactions with others at RC always helped me stay motivated and curious and pushed me to keep learning!
Finally, I truly believe that a core reason why I was able to be productive at RC is that I used Glitch to build all of my apps. I’m not just saying that because I’m working for them after RC (: I shudder to think of how many days (potentially months?) I’ve spent cumulatively deploying and pushing apps to Heroku over the past few years. The ability to instantly deploy and easily remix apps on Glitch greatly influenced my process for the better, to the point that I keep forgetting to hit cmd+s to save my work in a text editor before reloading a local copy of a site (because Glitch auto-saves).
Relatedly, I think having job security (I signed my job offer before starting at RC) really helped me focus on the projects I wanted to work on. Recurse does a great job helping participants find new jobs, but applying and preparing for jobs is stressful full-time work in and of itself, and I’m thankful that I had the privilege not to be juggling job-searching with learning at RC. And if a company is willing to support you moving back your start date to attend RC, it really shows a commitment to professional development at the company as a whole.
What was challenging at Recurse
I come from a background of producing demo-able work, which I often found constraining.
Part of building products is having a certain level of usability and polish. Yet, I didn’t want to be spending much time worrying about CSS or styling because I wanted to ensure I was really focusing on learning new things (I worked as a designer, so I have a pretty solid understanding of CSS already).
Usability goes way beyond pure aesthetics — building an app that other people can use requires a ton of testing, which is also time consuming. It actually took me half a day to build the initial version of Stencilfy, but ensuring it worked for lots of different types of fonts took another 4 days to complete.
And for most of the apps I worked on, I felt obligated to create a mobile view that explained the app and asked you to open it on a desktop computer since what I was building isn’t particularly well suited for small screens. Doing all of these things goes beyond what is required to learn just enough to understand the core technology behind a project. I could have moved onto new projects instead of doing some of this “polish” work, but I guess it’s my nature to want to have a base level of usability, so I had to budget time for it. Deciding when to move on is always an important question to consider in a self-directed learning environment like RC.
Also, as a result of having a pretty singular focus on SVGs, my work was quite solitary most of the time I was at RC. I hung out with people at RC for sure, but when I was working, it was usually by myself. If I had been more flexible with what I wanted to work on, it probably would have given me more opportunities to pair program with others and learn about very different technologies and design processes. Yet, I am happy with the apps I was able to complete, so I don’t regret how I ended up spending my time — I’m just conscious of this tradeoff.
Some final thoughts
I don’t believe in fate per se, but I do think that timing is super critical and largely outside your control, so if something seems like it could not happen at any other time in your life and you are excited about it, my intuition is to take that chance.
Leaving my former job, moving to NYC, taking 6 weeks “off” to attend RC, and joining Glitch all seemed to fit the “stars aligning” paradigm for me, and I’m really glad I took the opportunity to join the amazing community that is RC. Being at RC reminded me how much I like jumping into new projects and building useful things — it was a lot like the best parts of grad school. The people I met here are some of the kindest I have met in my life. And actually, while many people say 6 weeks feels too short, it was the perfect amount of time for me (I guess I work well under constraints).
Finally — here’s a secret: I don’t self-identify as a programmer. And I actually don’t like programming all that much. I realized during my time here that I’m basically medium-agnostic (not this blogging platform) — I enjoy learning to use whatever tool is suited to help solve the problem I’m trying to address. Don’t get me wrong — I do like many aspects of programming, but I just want to say that you don’t need to LOVE programming to be part of RC.
If you do have any interest in learning more about RC, please reach out to me and I’m happy to chat. And if you are reading this and about to attend RC, here are some quick tips:
- $1 Big Bun at Golden Steamer
- Large bottles of Ito En and Asian snacks from Hong Kong Supermarket
- McNally Jackson for quick breaks
- Don’t eat too many Oreos or potato chips, though they will be tempting
- Have fun!
