Jump to content
GOvectorZ

Tech Circle Animation Test [SVG]

Recommended Posts

GOvectorZ

This is just a test using the svg file format for animation purposes and to show the other possibilities of illustrator.

 

Here's the static image that was made in Illustrator below;

 

Tech-Circle-Animation-Test-static.png

 

And here is a link to the animated circle.

 

Also, for those that are interested here is the code below;

<?xml version="1.0" encoding="utf-8"?>
<!-- GOvectorZ ©2015  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<circle fill="none" stroke="#05FCFF" stroke-width="40" stroke-miterlimit="10" stroke-dasharray="3.9769,3.9769" cx="128" cy="128" r="100">
<animateTransform  fill="remove" type="rotate" from="0 128 128" dur="10s" to="360 128 128" restart="always" attributeType="XML" repeatCount="indefinite" accumulate="none" attributeName="transform" additive="replace" calcMode="linear">
	</animateTransform>
</circle>
<circle fill="none" stroke="#0E668B" stroke-width="40" stroke-miterlimit="10" stroke-dasharray="9.8149,9.8149" cx="128" cy="128" r="50">
<animateTransform  fill="remove" type="rotate" from="0 128 128" dur="5s" to="360 128 128" restart="always" attributeType="XML" repeatCount="indefinite" accumulate="none" attributeName="transform" additive="replace" calcMode="linear">
	</animateTransform>
</circle>
<circle fill="#1D4551" cx="128" cy="128" r="31.012"/>
<circle fill="none" stroke="#1D4551" stroke-width="40" stroke-miterlimit="10" stroke-dasharray="9.7402,9.7402" cx="128" cy="128" r="31.012">
<animateTransform  fill="remove" type="rotate" from="0 128 128" dur="10s" to="360 128 128" restart="always" attributeType="XML" repeatCount="indefinite" accumulate="none" attributeName="transform" additive="replace" calcMode="linear">
	</animateTransform>
</circle>
<circle fill="#0E668B" cx="128" cy="128" r="19.588"/>
</svg>

ps: code does not include the small inner circle as that created way too much code :>.<:>

Share this post


Link to post
Share on other sites

Alucard1973

 

An Amazing Animation M8, Really Cool Indeed (Y)

Cheers.

Share this post


Link to post
Share on other sites

GOvectorZ

An Amazing Animation M8, Really Cool Indeed (Y)

Cheers.

 

Very much appreciated Alu, just trying to work out the useability of this format at the moment but excited about the possibilities due to the smooth animation the coding allows.

Share this post


Link to post
Share on other sites

SGTROCK

Very nice mate, didn't know that, does it have similar functionality to flash - better or worse?

Share this post


Link to post
Share on other sites

GOvectorZ

Very nice mate, didn't know that, does it have similar functionality to flash - better or worse?

 

Thx SGT and to be honest with ya i have no idea if it's better than Flash. I would say there will be pros & cons to both like most things but as of yet i haven't looked indepth into either am afraid.

Share this post


Link to post
Share on other sites

Dragoon

cx cy but no cz :)

 

very nice that you shared the code matey,

a smooth animation ,

 

:thumbsup:

Share this post


Link to post
Share on other sites

GOvectorZ

cx cy but no cz :<img src=:'>

 

very nice that you shared the code matey,

a smooth animation ,

 

:thumbsup:

 

Thx m8y and always good to share i say.

Coding isn't something that really appeals to me, not enough that i would be willing to sit down and try to learn it properly.

Share this post


Link to post
Share on other sites

Dragoon

Thx m8y and always good to share i say.

Coding isn't something that really appeals to me, not enough that i would be willing to sit down and try to learn it properly.

 

that's why hobbies are so much fun matey,

everyone has there own interests and things they enjoy.

 

eating a kilo bag of skittles wouldn't be for everyone, hehehe

 

 

suprised though since the animation is really very smooth,

nice job once again :)

Share this post


Link to post
Share on other sites

GOvectorZ

that's why hobbies are so much fun matey,

everyone has there own interests and things they enjoy.

 

eating a kilo bag of skittles wouldn't be for everyone, hehehe

 

 

suprised though since the animation is really very smooth,

nice job once again :<img src=:'>

 

Oh great, make it public that am just a pig (but a very happy one, well at least when the belly is full) lol

 

As for the coding, the thing i think that is stopping me more so is how i could actually use it on the GOv site, so if you have any knowledge with that stuff feel free to pm me m8y haha

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

About Us

Pimped Pixels was founded in 2010 by Maniak, Asura, Cliffbuck and Evilangel. Shortly afterwards Mikey jumped onboard and joined the team. We are a group of friends with a passion for art and a need to help others by sharing. The site started with just the four and in a short while grew to a community of over 4000 members. Everyone is welcome here, from complete beginners to all out professionals. We have something for everyone. Our aim is to give everyone with the "bug" a place to learn, make friends and share their passion.

Congratulations to iEatB4breakfast for winning this weeks SOTW
  • iEatB4breakfast
  • ×
    ×
    • Create New...