Starbeamrainbowlabs

Stardust
Blog


Archive


Mailing List Articles Atom Feed Comments Atom Feed Twitter Reddit Facebook

Tag Cloud

3d 3d printing account algorithms android announcement architecture archives arduino artificial intelligence artix assembly async audio automation backups bash batch blender blog bookmarklet booting bug hunting c sharp c++ challenge chrome os cluster code codepen coding conundrums coding conundrums evolved command line compilers compiling compression conference conferences containerisation css dailyprogrammer data analysis debugging defining ai demystification distributed computing dns docker documentation downtime electronics email embedded systems encryption es6 features ethics event experiment external first impressions freeside future game github github gist gitlab graphics guide hardware hardware meetup holiday holidays html html5 html5 canvas infrastructure interfaces internet interoperability io.js jabber jam javascript js bin labs latex learning library linux lora low level lua maintenance manjaro minetest network networking nibriboard node.js open source operating systems optimisation outreach own your code pepperminty wiki performance phd photos php pixelbot portable privacy problem solving programming problems project projects prolog protocol protocols pseudo 3d python reddit redis reference release releases rendering research resource review rust searching secrets security series list server software sorting source code control statistics storage svg systemquery talks technical terminal textures thoughts three thing game three.js tool tutorial twitter ubuntu university update updates upgrade version control virtual reality virtualisation visual web website windows windows 10 worldeditadditions xmpp xslt

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.

Art by Mythdael