I’ve had a recent inspiration for awhile regarding SVG-based animations and making some digital art, and finally went through with it.
What really was coming through into my mind was the thought of flying through hyperspace.
The Process
At first, I tried to do some experimentation with SVG animations using CSS keyframes. Once I had something somewhat working as a throwaway project, I decided to up the ante and see if I could record the screen somehow.
At first, I wanted to do this as a 60 FPS video, but as my laptop that I’m using right now is about 8 years old, that’s not exactly feasible for the video capability I have. The built-in XBox Game Center overlays in Windows 10 would catch any stutter that happened, so I needed a different way.
After some searching, I found an example online where someone managed to record the frames of the SVG animation, and compile the frames into a zip file.
Now, the Ugly Parts
There was a problem with the code sample I found: It didn’t record the animation from the CSS keyframes. The rest of the CSS was captured in the throwaway project, like drop shadow and such, but the animations themselves? Nope.
I took another look at the code sample, and saw they were using a JavaScript library to do the animation: GSAP. This of course is Greensock Animation Platform.
The samples were also using V2 of the library, not the most recent V3. However, most of the JSFiddles that were using V3 kept popping up notices about using a free library and thus I couldn’t see the fiddles without actually going to the JSFiddle site for those samples. The V2 libraries didn’t have this issue, and that’s what the working example used, so I went with it. And I wasn’t publishing the SVG publicly: I just wanted to record the frames and run it through something like Adobe Premiere.
After some experimentation, I managed to get the code to work on my end. And, managed to get the ZIP file export to work as well using other libraries (notably JSZip, though I would use a more recent version than the one I used. Efficiency bug or something that made the zip-making process much longer than expected. Like by a couple of hours in my final export!)…
Anyways, I had a working set of frames. And given how long it took to export the final test before I added the final graphical details and how many frames that made, I decided that the 60 FPS idea wasn’t going to be the best plan. Well, that and after looking at some video NFTs on SuperRare, saw that other videos had gone for 30 FPS, and that’s still a standard framerate, so I decided that was acceptable.
Finishing Touch
There was something else: if I was going to make a video NFT, I wanted some sound. Fortunately, I had GarageBand on my iPhone. And I had previously gotten a lot of the available instrument packs.
I picked Dusty Strings from one of the packs, and selected one of the options to play some chords with one piano key press per chord… I’m sorry, I forget what I did offhand. I could replicate it if I went back in. I had fiddled with GarageBand before but somehow my two test files before were gone. (I’m guessing iCloud decided to dump them along with a few other PDFs I had downloaded, so don’t count on iCloud as a primary backup method).
Anyways, I did several bars of this, and as it was a little short, repeated the bars. After some exploration, I figured out how to export a .m4a audio file to OneDrive (yes, in iOS).
Once I imported the frames for the animation into Adobe Premiere as an image sequence (somewhere in File – Import. I’ll flesh this out someday so others don’t have to look it up as much), I also imported the audio file. I had to set the audio file clip to not exceed the length of the video (it was about 4 seconds longer). Once I was satisfied, I exported the video using Adobe Media Encoder.
Finally, I uploaded to OpenSea, and the rest is history.
Aegis Stellaris – Hyperdrive: Particulars
Video Details
- Frame Rate: 30 FPS
- Resolution: 1920×1080 (1080p)
- Length: 30 seconds
- Audio: Yes
Techniques/Tools Used
- Adobe Premiere (compiling frame into video, adding audio to video)
- GarageBand iOS (background music/sound)
- HTML5/CSS3
- SVG markup
- Greensock Animation Platform v2 (GSAP)
- SVG animation-rasterizing code adapted from Tyler Sticka’s Rasterizing SVG Animations article
- Adobe Photoshop to generate the cloud textures
Where To View/Acquire on OpenSea
Aegis Stellaris – Hyperdrive on OpenSea
Available as primary sale option until 11/30/2022 for 1 ETH. As of the time of this writing (05/30/2022), Ethereum has dropped a bit, so it’s a good time to buy!
