Starbeamrainbowlabs

Stardust
Blog


Archive

Mailing List Articles Atom Feed Comments Atom Feed Twitter

Tag Cloud

3d account algorithms announcement archives arduino artificial intelligence assembly async audio bash batch blog bookmarklet booting c sharp c++ challenge chrome os code codepen coding conundrums coding conundrums evolved command line compiling css dailyprogrammer debugging demystification distributed computing downtime embedded systems encryption es6 features event experiment external first impressions future game github github gist graphics hardware meetup holiday html html5 html5 canvas interfaces internet io.js jabber javascript js bin labs learning library linux low level lua maintenance network networking node.js operating systems performance photos php pixelbot portable privacy programming problems project projects prolog protocol pseudo 3d python reddit reference release releases resource review rust secrets security series list server servers software sorting source code control svg technical terminal textures three thing game three.js tool tutorial twitter ubuntu university update upgrade version control visual web website windows windows 10 xmpp

SVG and CSS

Huge Purple Flowers

Recently someone mentioned that they knew someone else who had just brought a duvet cover that has "Huge purple flowers" on it. This gave me a most interesting mental picture - and I recreated in Inkscape (which has just been updated!) for you to see - the result is shown above. Note that those plants would be at least 3 times your size.

Anyway, I also learned that you can mix SVG with CSS (and Javascript, but I haven't got to playing with that yet). as a test, I created a quick square in Inkscape and then opened the resulting file up in my favourite text editor and plugged in some CSS animations. This is what I came up with:

A simple loading animation

The square above is actually black and set to have a low opacity, to it sets on the colour anything that is behind it. It is also done in percentages, so you can set the width and height of the containing <img /> tag and it should scale accordingly.

I might do some more of this in the future - it looks to me like a wonderful way to create a nice little self contained widget that you can use anywhere.

An (Almost) Pure CSS Spotlight

I made a spotlight demonstration using (almost) pure CSS!

A little bit of javascript is used to make the spotlight follow the mouse. You can also click through the layer in from of everything that makes the spotlight work because of the pointer-events: none; CSS styling rule.

It can be found below.

The (editable!) source code can be found here. A full screen version of the demo above can be found here.

Art by Mythdael