Creating a pure CSS BB-8 24 January, 2018

Intro I was watching a talk on making CSS your “super secret drawing tool” by Wenting Zhang and had a play with her site CSS Icon . Some parts are a bit rough around the edges, but I thought it was really cool. And thought “how hard can it be?”. I also remembered watching DevTips’ BB-8 CSS speed drawing and thought it’d be cool to try create something similar. Creating shapes in CSS To create shapes, I basically just used borders and…

Read More

How I created a CasparCG HTML5 Dynamic Lower Third Graphic 12 December, 2017

Intro CasparCG is a piece of playout software. It uses what’s called a “flash producer” to display graphics, meaning that all graphics have to be made in Flash. Flash isn’t something that it popular or useful in 2017. So I had a go at using Caspar’s HTML5 producer to make a dynamic lower third. It was harder than initially expected. The Caspar forum was very useful when I started building it, since somebody had already built a small script to be…

Read More

SVG & D3.js to create television graphics 11 December, 2017

Intro Television graphics can be created in many ways, including using SVG and JavaScript and JavaScript libraries such as D3.js. I knew I could create the graphic in Adobe Illustrator, export it and put it into a HTML page, but I wasn’t sure on the best way to manipulate it. I decided to go with the JavaScript library D3.js . D3 is an incredibly powerful library, and I didn’t use it to it’s fullest potential at all; it’s often used to create…

Read More