With the launch of our recent Campus Crossroads project we were able to push some front-end limits and try some new things. Most of which were calculated risks. After all, we were presented with a very short project timeline. The Campus Crossroads Project was announced to the team during a project meeting a few weeks before it was to be launched. While this was enough to evoke panic in most, it was unanimously accepted by the ND web team as a challenge to rise to.
In combination with video, the site's ultimate goal was to generate excitement for what's to come. However we wanted to convey that this was a conceptual project. Large scale architects typically have a certain pencil drawn and watercolor style to convey proposed concepts. So we ran with it. Still, the project needed more interest. We needed to show how things would change - but at the same time create some excitement.
Based on the goals, scope, profile and project research we decided to use SVGs to create a “draw in” effect of architectural drawings with watercolors slowly painting in after the drawing was finished. We were confident this was a good direction to move ahead with.
Building the SVGs
Next, the SVGs needed to be built. We explored several vector editing options but speed became the main factor. We ended up using Adobe Illustrator to tediously construct the outlines of each of the buildings. This was certainly a mind-numbing, time-eating process for sure but we were confident we would end up with something cool.
The polyline, line and polygon problem
After the outlines were in place, we saved them as SVG 1.1 from Illustrator.
From here, a potential show-stopping problem rose it’s ugly head. Illustrator saves most elements of the outlines as <polygon>, <polyline> or <line> and doesn't give any control over which element is used for the SVG export. Of the approximate 800 lines, 720 were not usable if we were to animate the strokes. The animation can only happen with the SVG element <path>. We were forced to find a way to convert the polylines, lines and polygons all to paths.
Converting polyline, line and polygon to path
After several hours of research and testing numerous SVG editors, we were able to convert the unusable SVG elements to paths by using a free iPad app called Inkpad. The process was a bit crude, but it was reasonably quick and worked perfectly. By opening the exported SVGs and saving again with Inkpad, the SVGs were now populated with <path> elements and with a little bit of code cleanup were now able to be animated. (Phew!)
Proper SVG structure to animate
Our SVG was trimmed of unneeded (and wasteful) tags with proper comments and classes to help other team members target different sections of the stadium.
In Zach's post "Animated SVG", he goes in-depth showing how animating the paths of the SVG actually work.
Creating the painted-in watercolor effect
We knew we were after a “paint in” effect which meant we had to separate colors into their own layers. For this we turned to an illustration iPad app called Procreate. Procreate was perfect for this task with it’s support for layers, custom canvas sizes, PSD export and excellent brush quality. We were able to import the outlines for the buildings, move it to the top layer and create a layer for each color we wanted to fade in. Then it was just a matter of painting.
After we were happy with the colors in Procreate, we exported the file as a PSD to Dropbox and opened in Photoshop. From here we needed to make it look a bit more like watercolor. Our process for each layer was as follows:
- Duplicate the layer.
- Apply “Find Edges” filter to the duplicated layer.
- Change the duplicated layer’s blend to “Multiply”.
- Adjust the layer opacity as needed.
For best results we varied the opacity for some of the filtered layers to give the paint more variation.
Once all layers were ready, we exported them separately as transparent PNGs and processed them with ImageAlpha to tame the file sizes.
In the end, it came together nicely. The true value of this animation comes at a glance as key information is communicated in just a few seconds. The animation told the essential story of where we are now and where we are headed with the Campus Crossroads project.