The 2020 presidential campaign was a highly contentious one. One of the more interesting movements to come out of it was Brett Weintstein’s Unity 2020 campaign. The goal was to build a genuine third party alternative while avoiding the pitfalls and criticisms that typically accompany a third party candidate. I thought this was a worthy cause and decided to volunteer some design work to the group.
The animated logo above attempts to symbolize the desire to break the existing left-right political paradigm and build something new out of what remains.
The final product is a web-friendly Lottie animation.
The second part of the campaign came when two candidates were “drafted” from the two major American political parties. The idea was that they would govern as a team. The two candidates drafted for Unity 2020’s campaign were Tulsi Gabbard and Dan Crenshaw. Above is an animated campaign graphic.
Both graphics were created using Bodymovin and After Effects. Some finishing touches were added using the Keyshape App. The second graphic with Tulsi Gabbard and Dan Crenshaw relied heavily on the Astute Graphics plugin suite, specifically the Width Stamp and Vector First Aid tools.
The first animation was embedded with the help of LottieFiles.com’s web player tool. I added a few CSS tweaks of my own. You can see the exact code that was used to implement the Lottie animation below (using a WordPress CMS):
<script
src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_lgfw2plh.json" background="transparent" speed="1" style="width: 100%; max-width: 1000px; display: block; margin-left: auto; margin-right: auto;" loop autoplay></lottie-player>The second animation (just for a personal test) was exported with the Keyshape app, using their Keyshape file format. The SVG was uploaded to and hosted on my Codepen account. The exact code for implementation (again, using a WordPress CMS) is below:
<object style="
width: 100vw;
max-width: 500px;
display: block;
margin-left: auto;
margin-right: auto" type="image/svg+xml" data="https://assets.codepen.io/2032127/gabbard-crenshaw.svg">
</object>There are so many tools available for creating lightweight vector graphics — or even something as simple as an animation with a transparent background. The ability to mix and match these tools and plugins means there’s more opportunity than ever to produce some remarkably detailed artwork while keeping file sizes small (i.e. mobile-friendly). We can have the best of both worlds.