justin.esders
Reputation: 1426
SVG Animation Explanation
I am having trouble figuring out why this svg animation from codepen works. For the animation that moves the sprinkles left to right, it keeps setting the animation back to the original state. The question I have here is why does the translateX property only go to 154.5px.
I forked this from a codepen I saw by the way. Anyway, I am completely confused how they came up with this number. What math is needed to get this number?
body {
background-color: #000;
}
.center {
text-align: center;
}
#Circle{
display:none
}
@keyframes bottommotion {
0% {transform: rotate(0deg)}
14% {transform: rotate(10deg)}
29% {transform: rotate(-10deg)}
45% {transform: rotate(0deg)}
55% {transform: translate(0px, 38px)}
88% {transform: translate(0px, 0px)}
}
#Bottom {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: bottommotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
@keyframes topmotion {
0% {transform: rotate(0deg)}
23% {transform: rotate(10deg)}
38% {transform: rotate(-10deg)}
45% {transform: rotate(0deg)}
55% {transform: translate(0px, -54px)}
100% {transform: translate(0px, 0px)}
}
#Top {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: topmotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
@keyframes spotmotion {
0% {transform: translate(0px,0px)}
100% {transform: translate(154.5px,0px)}
}
#Spots {
transform-origin: 50% 50%;
animation-timing-function: linear;
animation-name: spotmotion;
animation-duration: .23s;
animation-iteration-count: infinite;
}
@keyframes shadowmotion {
0% {opacity:0.75; transform:translate(0px, 0px)}
45% {opacity:0.75; transform:translate(0px, 0px)}
55% {opacity:0.95; transform:translate(0px, -6px)}
95% {opacity:0.75; transform:translate(0px, 0px)}
100% {opacity:0.75; transform:translate(0px, 0px)}
}
#Shadow {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: shadowmotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}<div class="center"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="505.821px" height="325.822px" viewBox="0 0 505.821 325.822" enable-background="new 0 0 505.821 325.822"
xml:space="preserve">
<g id="Background">
<rect width="505.821" height="325.822"/>
</g>
<g id="Spots">
<g>
<path fill="#00192a" d="M-146.92,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-143.521,273.137-145.042,271.615-146.92,271.615z"/>
<path fill="#00192a" d="M9.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4H9.08
c1.878,0,3.399-1.521,3.399-3.4C12.479,273.137,10.958,271.615,9.08,271.615z"/>
<path fill="#00192a" d="M165.08,271.615H95.505c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C168.479,273.137,166.958,271.615,165.08,271.615z"/>
<path fill="#00192a" d="M321.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C324.479,273.137,322.958,271.615,321.08,271.615z"/>
<path fill="#00192a" d="M477.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C480.479,273.137,478.958,271.615,477.08,271.615z"/>
<path fill="#00192a" d="M633.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C636.479,273.137,634.958,271.615,633.08,271.615z"/>
<path fill="#00192a" d="M789.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C792.479,273.137,790.958,271.615,789.08,271.615z"/>
</g>
<g>
<path fill="#00192a" d="M-195.406,198.945h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-192.006,200.467-193.528,198.945-195.406,198.945z"/>
<path fill="#00192a" d="M-39.406,198.945h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-36.006,200.467-37.528,198.945-39.406,198.945z"/>
<path fill="#00192a" d="M116.594,198.945H47.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C119.994,200.467,118.472,198.945,116.594,198.945z"/>
<path fill="#00192a" d="M272.594,198.945H203.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C275.994,200.467,274.472,198.945,272.594,198.945z"/>
<path fill="#00192a" d="M428.594,198.945H359.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C431.994,200.467,430.472,198.945,428.594,198.945z"/>
<path fill="#00192a" d="M584.594,198.945H515.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C587.994,200.467,586.472,198.945,584.594,198.945z"/>
<path fill="#00192a" d="M740.594,198.945H671.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C743.994,200.467,742.472,198.945,740.594,198.945z"/>
</g>
<g>
<path fill="#00192a" d="M-146.92,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-143.521,121.549-145.042,120.026-146.92,120.026z"/>
<path fill="#00192a" d="M9.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4H9.08
c1.878,0,3.399-1.521,3.399-3.4C12.479,121.549,10.958,120.026,9.08,120.026z"/>
<path fill="#00192a" d="M165.08,120.026H95.505c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C168.479,121.549,166.958,120.026,165.08,120.026z"/>
<path fill="#00192a" d="M321.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C324.479,121.549,322.958,120.026,321.08,120.026z"/>
<path fill="#00192a" d="M477.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C480.479,121.549,478.958,120.026,477.08,120.026z"/>
<path fill="#00192a" d="M633.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C636.479,121.549,634.958,120.026,633.08,120.026z"/>
<path fill="#00192a" d="M789.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C792.479,121.549,790.958,120.026,789.08,120.026z"/>
</g>
<g>
<path fill="#00192a" d="M-195.406,52.356h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-192.006,53.879-193.528,52.356-195.406,52.356z"/>
<path fill="#00192a" d="M-39.406,52.356h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-36.006,53.879-37.528,52.356-39.406,52.356z"/>
<path fill="#00192a" d="M116.594,52.356H47.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C119.994,53.879,118.472,52.356,116.594,52.356z"/>
<path fill="#00192a" d="M272.594,52.356H203.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C275.994,53.879,274.472,52.356,272.594,52.356z"/>
<path fill="#00192a" d="M428.594,52.356H359.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C431.994,53.879,430.472,52.356,428.594,52.356z"/>
<path fill="#00192a" d="M584.594,52.356H515.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C587.994,53.879,586.472,52.356,584.594,52.356z"/>
<path fill="#00192a" d="M740.594,52.356H671.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C743.994,53.879,742.472,52.356,740.594,52.356z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,16.326-205.688,16.326z"/>
<path fill="#0090A5" d="M-49.688,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,16.326-49.688,16.326z"/>
<path fill="#0090A5" d="M106.312,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,16.326,106.312,16.326z"/>
<path fill="#0090A5" d="M262.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,16.326,262.311,16.326z"/>
<path fill="#0090A5" d="M418.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,16.326,418.311,16.326z"/>
<path fill="#0090A5" d="M574.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,16.326,574.311,16.326z"/>
<path fill="#0090A5" d="M730.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,16.326,730.311,16.326z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-278.269,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-277.017,85.058-278.269,85.058z"/>
<path fill="#0090A5" d="M-122.269,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-121.017,85.058-122.269,85.058z"/>
<path fill="#0090A5" d="M33.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S34.983,85.058,33.731,85.058z"/>
<path fill="#0090A5" d="M189.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S190.983,85.058,189.731,85.058z"/>
<path fill="#0090A5" d="M345.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S346.983,85.058,345.731,85.058z"/>
<path fill="#0090A5" d="M501.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S502.983,85.058,501.731,85.058z"/>
<path fill="#0090A5" d="M657.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S658.983,85.058,657.731,85.058z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,159.152-205.688,159.152z"/>
<path fill="#0090A5" d="M-49.688,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,159.152-49.688,159.152z"/>
<path fill="#0090A5" d="M106.312,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,159.152,106.312,159.152z"/>
<path fill="#0090A5" d="M262.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,159.152,262.311,159.152z"/>
<path fill="#0090A5" d="M418.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,159.152,418.311,159.152z"/>
<path fill="#0090A5" d="M574.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,159.152,574.311,159.152z"/>
<path fill="#0090A5" d="M730.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,159.152,730.311,159.152z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,301.978-205.688,301.978z"/>
<path fill="#0090A5" d="M-49.688,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,301.978-49.688,301.978z"/>
<path fill="#0090A5" d="M106.312,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,301.978,106.312,301.978z"/>
<path fill="#0090A5" d="M262.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,301.978,262.311,301.978z"/>
<path fill="#0090A5" d="M418.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,301.978,418.311,301.978z"/>
<path fill="#0090A5" d="M574.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,301.978,574.311,301.978z"/>
<path fill="#0090A5" d="M730.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,301.978,730.311,301.978z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-278.269,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-277.017,227.884-278.269,227.884z"/>
<path fill="#0090A5" d="M-122.269,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-121.017,227.884-122.269,227.884z"/>
<path fill="#0090A5" d="M33.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S34.983,227.884,33.731,227.884z"/>
<path fill="#0090A5" d="M189.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S190.983,227.884,189.731,227.884z"/>
<path fill="#0090A5" d="M345.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S346.983,227.884,345.731,227.884z"/>
<path fill="#0090A5" d="M501.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S502.983,227.884,501.731,227.884z"/>
<path fill="#0090A5" d="M657.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S658.983,227.884,657.731,227.884z"/>
</g>
</g>
<g id="Shadow">
<ellipse fill="#00243C" cx="252.403" cy="291.789" rx="68" ry="20"/>
</g>
<g id="Bottom">
<g>
<g>
<path fill="#60C29E" d="M177.332,156.984c0.001,50.103,33.611,90.72,75.071,90.72s75.068-40.617,75.069-90.72H177.332z"/>
<path fill="#87C65F" d="M252.402,156.984v90.72c0.001,0,0.001,0,0.001,0c41.46,0,75.068-40.617,75.069-90.72H252.402z"/>
<path fill="#38A479" d="M304.012,156.984H200.789c0,50.101,23.11,90.718,51.611,90.72c0,0,0.002,0,0.003,0
C280.91,247.703,304.012,207.087,304.012,156.984z"/>
<path fill="#32B44E" d="M252.401,156.984v90.72c0.001,0,0.001,0,0.002,0c28.507-0.002,51.609-40.617,51.609-90.72H252.401z"/>
<path fill="#00904C" d="M271.169,156.984h-37.536c0,50.103,8.404,90.718,18.769,90.72l0,0
C262.768,247.703,271.169,207.087,271.169,156.984z"/>
<ellipse fill="#006744" cx="252.403" cy="156.984" rx="75.071" ry="18.144"/>
<ellipse fill="#F69077" cx="252.403" cy="156.984" rx="60.808" ry="14.697"/>
<ellipse fill="#EF413C" cx="252.403" cy="156.984" rx="53.774" ry="12.996"/>
<path d="M217.479,156.382c2.512,2.117,2.337,6.792,2.299,6.825c-0.033,0.031-5.408,0.331-7.918-1.787
c-2.511-2.117-3.289-4.96-1.736-6.353C211.677,153.676,214.967,154.264,217.479,156.382z"/>
<path d="M237.369,154.375c1.364,2.8-0.894,7.048-0.942,7.066c-0.047,0.017-5.126-1.529-6.491-4.329
c-1.363-2.8-0.805-5.684,1.249-6.439C233.237,149.917,236.004,151.575,237.369,154.375z"/>
<path d="M257.023,154.546c0,3.04-3.982,6.188-4.036,6.186c-0.05,0-4.036-3.146-4.036-6.186c0-3.041,1.808-5.507,4.036-5.508
C255.216,149.04,257.023,151.504,257.023,154.546z"/>
<path d="M276.065,156.733c-1.363,2.8-6.441,4.348-6.489,4.329c-0.047-0.018-2.309-4.266-0.947-7.064
c1.366-2.802,4.135-4.459,6.188-3.704C276.869,151.049,277.427,153.931,276.065,156.733z"/>
<path d="M294.224,160.676c-2.509,2.117-7.88,1.819-7.916,1.786c-0.035-0.03-0.213-4.709,2.296-6.826
c2.513-2.116,5.808-2.704,7.358-1.312C297.515,155.715,296.737,158.56,294.224,160.676z"/>
</g>
<!-- <circle opacity="0" fill="#00A654" cx="252.402" cy="156.984" r="90.696"/> -->
</g>
</g>
<g id="Top">
<g>
<g>
<path fill="#60C29E" d="M252.403,175.152c41.46,0,75.069-8.123,75.069-18.144c0,0,0,0,0-0.001
c0-50.104-33.609-90.719-75.069-90.719s-75.071,40.615-75.071,90.719c0,0,0,0.001,0,0.001
C177.332,167.029,210.943,175.152,252.403,175.152z"/>
<path fill="#38A479" d="M252.403,175.152c19.724,0,37.659-1.841,51.058-4.848c0.361-4.34,0.552-8.779,0.552-13.297
c0-50.104-23.103-90.719-51.61-90.719c-28.502,0-51.613,40.615-51.613,90.719c0,4.518,0.191,8.956,0.554,13.297
C214.74,173.311,232.678,175.152,252.403,175.152z"/>
<path opacity="0.62" fill="#00A654" d="M252.403,175.152c6.354,0,12.52-0.192,18.413-0.551c0.23-5.692,0.354-11.574,0.354-17.594
c0-50.104-8.401-90.719-18.768-90.719c-10.364,0-18.769,40.615-18.769,90.719c0,6.02,0.123,11.9,0.354,17.594
C239.88,174.959,246.048,175.152,252.403,175.152z"/>
<path fill="#87C65F" d="M257.023,66.464v108.65c39.306-0.577,70.449-8.461,70.449-18.106c0,0,0,0,0-0.001
C327.472,108.779,296.33,69.349,257.023,66.464z"/>
<path fill="#32B44E" d="M252.403,175.152c19.724,0,37.659-1.841,51.058-4.848c0.361-4.34,0.552-8.779,0.552-13.297
c0-50.104-23.103-90.719-51.61-90.719L252.403,175.152C252.403,175.152,252.403,175.152,252.403,175.152z"/>
<path fill="#00904C" d="M252.403,175.152c6.354,0,12.52-0.192,18.413-0.551c0.23-5.692,0.354-11.574,0.354-17.594
c0-50.104-8.401-90.719-18.768-90.719c-10.364,0-18.769,40.615-18.769,90.719c0,6.02,0.123,11.9,0.354,17.594
C239.88,174.959,246.048,175.152,252.403,175.152z"/>
</g>
<!-- <circle opacity="0" fill="#00A654" cx="252.402" cy="156.984" r="90.696"/> -->
</g>
</g>
</svg>
</div>http://codepen.io/Jesders88/pen/mOXVRK
Upvotes: 0
Views: 97
Answers (1)
Paul LeBeau
Reputation: 101860
If you look at the coordinates of the spots, or their bounding boxes, you can see that the horizontal distance between them is 156.
Why did the author go with 154.5 instead? Who knows. It may have been a mistake. More likely it was because they thought it looked better. If you used 156, you might get stuttering due to duplicate frames at the 0 and 156 offsets.
Try changing it to 156 and see whether you think it looks worse or not.
Upvotes: 1