Welcome, weary internet traveller. You’ve stumbled onto a great slice of the internet.

Keyframes is a creative community. Share your #wip, get #feedback, find inspiration, and chat with people who make things. It is a bunker from the rest of the garbage internet. No popularity contests here. No circle jerks. No regular jerks. Just a wholesome place to shoot the shit and be real about what you’re making.

You can post in public, or private (with a Plus account). Use it to improve your work, or just feel good about creating things again.

Come on in! We hope you enjoy your stay.

Register here for a very fun time ✨️

Or log in if you’re returning. (Welcome back!)

All posts tagged “svg”

SVG panther - animated

Messing around with code + art. Illustration made in Illustrator then generated/saved out to SVG, SVG optimised for web, animated with CSS and then fa...

I have been torn between dedicating my time to art outside of work and learning code and cannot dedicate time to both enough after a full time job so i have decided to try to combine my love for drawing, art etc with code and this is my first stabe in a while. I am hoping to make much more and improve my code as I go along.
Yes this uses SVG, lots of code, generated from illustrator, cleaned up to work on web based on one of my drawings and then I animate it mostly with CSS with a cheap each in jQuery.
If anyone can help me improve the jquery or even refactor to vanilla i'd be grateful as I am struggling to do anything like that in vanilla like I can in jQuery!

jQuery(document).ready(function($) {
	$("path")
		.delay(500)
		.each(function(i) {
			$(this).delay(10 * i).animate({opacity: "1" }, 1000);
		});
});

I'd be interested in hearing your thoughts guys and gals :)
https://codepen.io/pixelspencil/full/yxooVE

P.S. for anyone interested you can view...

Continue →

Here's something I haven't shared anywhere else. I've been animating in SVG since before there were many tools that exported to it, so I actually feel more comfortable animating shapes directly than using an application. A lot of the animations for [Spinner Galactic](http://spinnergalactic.com/) were coded in CodePen with variables for the developer to tweak and an "export" button to export frames for a sprite sheet. Here's a comet!