animated Geometric effect like ie logo

Question

I want animated Geometric effect like ie logo (yellow color) which moves around my logo.

Answer 1

I wanted something like this fiddle

<div class="logo">
<div class="circle"></div>
<img src="http://cdns2.freepik.com/image/th/318-31882.png" />
</div>

*{
box-sizing:border-box;
}
.logo{
width:150px;
height:150px;
position:relative;
}
.circle{
position:absolute;
width:100%;
height:100%;
border:10px solid #000;
border-radius:100%;
}
.logo img{
width:70px;
display:inline-block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
vertical-align:middle;
}  
.circle {
-moz-animation: rotate 10s infinite 0s;
-webkit-animation: rotate 10s infinite 0s;
animation: rotate 10s infinite 0s;
}
@-webkit-keyframes rotate{
0% {
    -moz-transform: rotate3d(50,50,0,50deg) rotate(90deg);
    -webkit-transform: rotate3d(50,50,0,50deg) rotate(90deg);    
    transform: rotate3d(50,50,0,50deg) rotate(90deg);
}
50% {
    -moz-transform: rotate3d(0,0,0,0deg) rotate(180deg);
    -webkit-transform: rotate3d(0,0,0,0deg) rotate(180deg);    
    transform: rotate3d(0,0,0,0deg) rotate(180deg);
}
100% {
    -moz-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
    -webkit-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);    
    transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
}
}

Answer 2

I dont think Jquery would be what you need, do you mean actually building that shape so its rendered by the browser rather than through an image? You might be able to get something like it through CSS. It probably wont be exactly right though.

There are a few examples of CSS shapes you can build here:

https://css-tricks.com/examples/ShapesOfCSS/

But yeah the best bet would be to just make the image using an image editor and put it online as an image.