0

could you please help me out, how to create SVG animation, which will behave like this? https://framer.cloud/aSUDY/

I did my best, but it always misbehaves :-(

Here is my code, where I used 6 animations to cycle through (3 to animate from 0.5 to 1 opacity and three to animate vice versa)

        <?xml version="1.0" encoding="UTF-8"?>
    <svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
        
        
        <defs>
            <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
                <animate 
                        id="anim1" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s;anim33.end"
                        from="0.5" 
                        to="1" 
                        dur="1s"
                        fill="freeze" 
                />
            </ellipse>
    
            <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
                <animate 
                        id="anim2" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim1.end" 
                        from="0.5" 
                        to="1" 
                        dur="1s"
                        fill="freeze" 
                  />
            </path>
    
            <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
                <animate 
                        id="anim3" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim2.end" 
                        from="0.5" 
                        to="1" 
                        dur="1s"
                        fill="freeze" 
                  />
            </path>
    
            <ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" >
                <animate 
                        id="anim11" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim3.end"
                        from="1" 
                        to="0.5" 
                        dur="0.1"
                        fill="freeze" 
                />
            </ellipse>
    
            <path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
                <animate 
                        id="anim22" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim11.end"
                        from="1" 
                        to="0.5" 
                        dur="0.1"
                        fill="freeze" 
                />
            </path>
    
            <path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
                
                  <animate 
                        id="anim33" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim22.end"
                        from="1" 
                        to="0.5" 
                        dur="0.1"
                        fill="freeze" 
                />
            </path>
    
        </defs>
    
    
            
                <g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
                    <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
                </g>
                <g id="CON3" transform="translate(18.000000, 2.000000)" >
                    <use xlink:href="#CON33" ></use>
                </g>
                <g id="CON2" transform="translate(16.000000, 4.000000)" >
                    <use xlink:href="#CON22" ></use>
                </g>
                <g id="CON1" transform="translate(15.000000, 5.000000)" >
                    <use xlink:href="#CON11" ></use>
                </g>
           
        
    </svg>

1 Answer 1

1

I've changed the animations to use values, they don't really need to be linked.

I've removed the duplication and the elements that really were'nt doing anything other than add complexity.

<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">

<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
     <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
 </g>
 <g id="CON3" transform="translate(18.000000, 2.000000)" >
    <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
      <animate 
                        id="anim3" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s" 
                        values="0.5;0.5;0.5;0.5;1" 
                        dur="2s"
                        repeatCount="indefinite" 
                  />
  </path>
   </g>
   <g id="CON2" transform="translate(16.000000, 4.000000)" >
  <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
     <animate 
                        id="anim2" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s" 
                        values="0.5;0.5;0.5;1;1" 
                        dur="2s"
                        repeatCount="indefinite" 
                  />
 </path>
   </g>
   <g id="CON1" transform="translate(15.000000, 5.000000)" >
   <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
      <animate 
                        id="anim1" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s"
                        values="0.5;0.5;1;1;1" 
                        dur="2s"
                        repeatCount="indefinite"  
                />
    </ellipse>
</g>
</svg>

1
  • Awesome! Thank you a million :)
    – Ally
    May 5, 2017 at 18:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.