merge pure CSS 3-dimensional spheres in svg code

Question

1- the first code is svg circle that i add to rotation function (i learn about animation, keyframs from stackoverflow from another Q). and mold it in to html body.

2- the next code is from answer on another question under subject of "How can I create pure CSS 3-dimensional spheres?" [https://stackoverflow.com/questions/45238194/how-can-i-create-pure-css-3-dimensional-spheres][1]

.ball {
  position: absolute;
  top:0px;
  left:0px;
  width: 98vmin;
  height: 98vmin;
  margin: 1vmin;  
  transform-style: preserve-3d;  
  transform: rotateX(-5deg);
}

@keyframes rot{
  0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); }
}

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 98vmin;
  height: 98vmin;
}

.moving
{
  transform-style: preserve-3d;
  transform-origin: 49vmin 49vmin;
  animation: rot 10s linear infinite;
}






.clip
{
  border-radius: 50%;  
  overflow:hidden;
  transform: translateZ(-0vmin);
}

     
 @keyframes highlightanim {     
  0.00% {left: -150.00%; top: -178.00% }
  12.50% {left: -117.67%; top: -179.64% }
  25.00% {left: -97.69%; top: -195.87% }
  28.75% {left: -95.00%; top: -207.09% }
  32.50% {left: -97.69%; top: -220.70% }
  40.00% {left: -117.67%; top: -240.01% }
  47.50% {left: -150.00%; top: -247.50% }
  55.00% {left: -182.33%; top: -240.01% }
  62.50% {left: -202.31%; top: -220.70% }
  68.75% {left: -205.00%; top: -207.09% }
  75.00% {left: -202.31%; top: -195.87% }
  87.50% {left: -182.33%; top: -179.64% }
  100.00% {left: -150.00%; top: -178.00% }
} 
  
.shade
{
  position: relative;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(at 50% 50%, white, black, grey, black, black);
  animation: highlightanim 10s linear infinite;
}

3- how can put the second code in the same mold as first code (inside body of html, divided to functions and path that effected by the functions?

4- i try edit the value of x, y and z in the code to make it look like rotate around X axis (from down of page to up of it, same direction like the first code), but without any effect. is there's way to do that?

5- the color, i try change value of

thanks for advance

Paul LeBeau · Accepted Answer

The SVG equivalent of your HTML is the following:

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
}

Request: Rotate from down to up

The simplest way to do that is to rotate the SVG 90 degrees.

However I don't think the effect works as good.

svg
{
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
}

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
}

Request: Change the colour

Just change the colours in the gradient.

svg
{
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
}

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
}

Backwards compatible version

In the above examples, I've relied on being able to style geometry attributes with CSS. In this case x and y in the animation.

Styling geometry attributes is a relatively new thing that not all browsers support yet. So I've added a more backwards-compatible version below.

svg
{
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
}

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% { transform: translate(-150.00px, -178.00px); }
  12.50% { transform: translate(-117.67px, -179.64px); }
  25.00% { transform: translate(-97.69px, -195.87px); }
  28.75% { transform: translate(-95.00px, -207.09px); }
  32.50% { transform: translate(-97.69px, -220.70px); }
  40.00% { transform: translate(-117.67px, -240.01px); }
  47.50% { transform: translate(-150.00px, -247.50px); }
  55.00% { transform: translate(-182.33px, -240.01px); }
  62.50% { transform: translate(-202.31px, -220.70px); }
  68.75% { transform: translate(-205.00px, -207.09px); }
  75.00% { transform: translate(-202.31px, -195.87px); }
  87.50% { transform: translate(-182.33px, -179.64px); }
  100.00% { transform: translate(-150.00px, -178.00px); }
}

merge pure CSS 3-dimensional spheres in svg code

Answers (1)

Related Questions