Jsfiddle
SVG made in Illustrator. It is expected that each polygon will rotate about its center, it seems so, but g also rotates, why?

    1 answer 1

    Do you want to? http://codepen.io/geek_of_cola/pen/jrxJLN if so just add css3 animation:

     var b = "rot 4s ease-in-out"; $('polygon').css({ animation: b }); 
     html, body { height: 100%; overflow: hidden; } g { height: 500px; width: 500px; } .st0 { opacity: 0.93; fill: url(#SVGID_1_); } .st1 { fill: url(#SVGID_2_); } .st2 { fill: url(#SVGID_3_); } .st3 { fill: url(#SVGID_4_); } .st4 { opacity: 0.92; fill: url(#SVGID_5_); } .st5 { opacity: 0.85; fill: url(#SVGID_6_); } .st6 { fill: url(#SVGID_7_); } .st7 { fill: url(#SVGID_8_); } .st8 { fill: url(#SVGID_9_); } .st9 { opacity: 0.93; fill: url(#SVGID_10_); } .st10 { opacity: 0.68; fill: url(#SVGID_11_); } .st11 { opacity: 0.84; fill: url(#SVGID_12_); } .st12 { opacity: 0.84; fill: url(#SVGID_13_); } .st13 { opacity: 0.44; fill: url(#SVGID_14_); } .st14 { opacity: 0.47; fill: url(#SVGID_15_); } .st15 { opacity: 0.72; fill: url(#SVGID_16_); } .st16 { opacity: 0.6; fill: url(#SVGID_17_); } .st17 { opacity: 0.54; fill: url(#SVGID_18_); } .st18 { opacity: 0.5; fill: url(#SVGID_19_); } .st19 { opacity: 0.74; fill: url(#SVGID_20_); } .st20 { opacity: 0.83; fill: url(#SVGID_21_); } .st21 { fill: url(#SVGID_22_); } .st22 { opacity: 0.31; fill: url(#SVGID_23_); } .st23 { opacity: 0.46; fill: url(#SVGID_24_); } .st24 { opacity: 0.59; fill: url(#SVGID_25_); } .st25 { opacity: 0.59; fill: url(#SVGID_26_); } .st26 { opacity: 0.3; fill: url(#SVGID_27_); } .st27 { opacity: 0.13; fill: url(#SVGID_28_); } .st28 { opacity: 0.59; fill: url(#SVGID_29_); } .st29 { opacity: 0.48; fill: url(#SVGID_30_); } .st30 { opacity: 0.51; fill: url(#SVGID_31_); } .st31 { opacity: 0.44; fill: url(#SVGID_32_); } .st32 { opacity: 0.44; fill: url(#SVGID_33_); } .st33 { opacity: 0.56; fill: url(#SVGID_34_); } .st34 { opacity: 0.58; fill: url(#SVGID_35_); } @keyframes rot { 0% { transform: rotateZ(0deg); transform-origin: 50% 50%; } 100% { transform: rotateZ(360deg); transform-origin: 50% 50%; } } 
     <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50px" y="50px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <g> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2.6042" y1="19.5833" x2="33.6458" y2="19.5833"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st0" points="33.6,10.6 2.6,8.9 15.6,30.3 "/> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="4.8147" y1="13.2871" x2="35.401" y2="-4.3719"> <stop offset="0" style="stop-color:#301083"/> <stop offset="1" style="stop-color:#5B097F"/> </linearGradient> <polygon class="st1" points="40,3.6 33.6,10.6 2.6,8.9 0,4.9 0,2.1 4.3,0 34.9,0 "/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="34.8958" y1="1.7969" x2="62.6042" y2="1.7969"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st2" points="62.6,0 40,3.6 34.9,0 "/> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="67.8125" y1="15.4948" x2="40" y2="15.4948"> <stop offset="0" style="stop-color:#361E8A"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st3" points="56.3,31 40,3.6 62.6,0 67.8,20.4 "/> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="15.625" y1="21.6667" x2="47.7083" y2="21.6667"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#751888"/> </linearGradient> <polygon class="st4" points="47.7,39.7 47.1,15.5 40,3.6 15.6,30.3 "/> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="47.0837" y1="27.6172" x2="56.2745" y2="27.6172"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#5B0174"/> </linearGradient> <polygon class="st5" points="56.3,31 47.7,39.7 47.1,15.5 "/> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="62.6042" y1="4.4531" x2="88.75" y2="4.4531"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#630B80"/> </linearGradient> <polygon class="st6" points="88.8,8.9 64.7,8.3 62.6,0 83.6,0 "/> <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="100" y1="4.4531" x2="83.6458" y2="4.4531"> <stop offset="0" style="stop-color:#6D268F"/> <stop offset="1" style="stop-color:#0B0247"/> </linearGradient> <polygon class="st7" points="100,3.6 88.8,8.9 83.6,0 100,0 "/> <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="64.7328" y1="9.5443" x2="99.951" y2="9.5443"> <stop offset="0" style="stop-color:#2E2A8F"/> <stop offset="1" style="stop-color:#881284"/> </linearGradient> <polygon class="st8" points="90.7,15.5 64.7,8.3 88.8,8.9 100,3.6 100,7 "/> <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="64.7328" y1="21.7917" x2="90.7292" y2="21.7917"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#6D1F8B"/> </linearGradient> <polygon class="st9" points="71.6,35.3 67.8,20.4 64.7,8.3 90.7,15.5 87.3,20.2 "/> <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="72.9326" y1="23.3207" x2="59.517" y2="46.5573"> <stop offset="0" style="stop-color:#0C155E"/> <stop offset="0.9847" style="stop-color:#7D0171"/> </linearGradient> <polygon class="st10" points="74.7,47.6 71.6,35.3 67.8,20.4 56.3,31 47.7,39.7 "/> <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="71.5625" y1="37.6562" x2="95.5208" y2="37.6562"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st11" points="95.5,37.4 87.3,20.2 71.6,35.3 74.5,46.9 76.8,55.2 "/> <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="87.2917" y1="22.2396" x2="99.951" y2="22.2396"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#5B0174"/> </linearGradient> <polygon class="st12" points="100,32.8 95.5,37.4 87.3,20.2 90.7,15.5 100,7 "/> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="75.6771" y1="44.5052" x2="100" y2="44.5052"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#7D0171"/> </linearGradient> <polygon class="st13" points="75.7,56.2 76.8,55.2 95.5,37.4 100,32.8 100,56.2 "/> <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="34.8958" y1="46.102" x2="76.7708" y2="46.102"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="0.9694" style="stop-color:#5E1486"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st14" points="53.9,56.2 34.9,36 47.7,39.7 74.7,47.6 76.8,55.2 75.7,56.2 "/> <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="30.625" y1="46.102" x2="64.7328" y2="46.102"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#723797"/> </linearGradient> <polygon class="st15" points="30.6,56.2 31.3,53.2 34.9,36 64.7,52.6 "/> <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="15.625" y1="41.7209" x2="34.8958" y2="41.7209"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="0.5102" style="stop-color:#881284"/> <stop offset="1" style="stop-color:#681D8A"/> </linearGradient> <polygon class="st16" points="15.6,30.3 34.9,36 31.3,53.2 "/> <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="15.9006" y1="58.0881" x2="28.2414" y2="45.7474"> <stop offset="0" style="stop-color:#0B0049"/> <stop offset="1" style="stop-color:#701788"/> </linearGradient> <polygon class="st17" points="14.1,56.2 21.8,39.3 31.3,53.2 30.6,56.2 "/> <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-1.982698e-010" y1="45.5469" x2="30.625" y2="45.5469"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#78258E"/> </linearGradient> <polygon class="st18" points="0,34.8 21.8,39.3 30.6,56.2 5.6,56.2 0,52 "/> <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="-1.982698e-010" y1="29.1919" x2="21.7982" y2="29.1919"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#630051"/> </linearGradient> <polygon class="st19" points="8.8,19.1 0,23.2 0,35.3 21.8,39.3 15.6,30.3 "/> <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-1.982698e-010" y1="13.8151" x2="8.8074" y2="13.8151"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#100126"/> </linearGradient> <polygon class="st20" points="0,4.5 0,23.2 8.8,19.1 "/> <linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="-1.982698e-010" y1="1.0677" x2="4.2708" y2="1.0677"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#080335"/> </linearGradient> <polygon class="st21" points="4.3,0 0,2.1 0,0 "/> <linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="-1.982698e-010" y1="54.1406" x2="5.625" y2="54.1406"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st22" points="0,56.2 0,52 5.6,56.2 "/> <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="2.6042" y1="75.8333" x2="33.6458" y2="75.8333"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st23" points="33.6,66.8 2.6,65.2 15.6,86.5 "/> <linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="31.0134" y1="56.2925" x2="64.3253" y2="56.2925"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st24" points="64.3,52.6 40.1,60 31,56.2 "/> <linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="67.8125" y1="69.906" x2="40" y2="69.906"> <stop offset="0" style="stop-color:#361E8A"/> <stop offset="1" style="stop-color:#B95AAA"/> </linearGradient> <polygon class="st25" points="56.3,87.2 40,59.8 64.7,52.6 67.8,76.6 "/> <linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="15.625" y1="77.9167" x2="47.7083" y2="77.9167"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#751888"/> </linearGradient> <polygon class="st26" points="47.7,96 47.1,71.7 40,59.8 15.6,86.5 "/> <linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="47.0837" y1="83.8672" x2="56.2745" y2="83.8672"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#5B0174"/> </linearGradient> <polygon class="st27" points="56.3,87.2 47.7,96 47.1,71.7 "/> <linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="64.7328" y1="58.8644" x2="88.75" y2="58.8644"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#630B80"/> </linearGradient> <polygon class="st28" points="88.8,65.2 64.7,64.6 64.7,52.6 83.6,56.2 "/> <linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="100" y1="57.2629" x2="83.6458" y2="57.2629"> <stop offset="0" style="stop-color:#6D268F"/> <stop offset="1" style="stop-color:#0B0247"/> </linearGradient> <polygon class="st29" points="100,59.8 88.8,65.2 83.6,56.2 100,49.4 "/> <linearGradient id="SVGID_31_" gradientUnits="userSpaceOnUse" x1="64.7328" y1="65.7943" x2="99.951" y2="65.7943"> <stop offset="0" style="stop-color:#2E2A8F"/> <stop offset="1" style="stop-color:#881284"/> </linearGradient> <polygon class="st30" points="90.7,71.7 64.7,64.6 88.8,65.2 100,59.8 100,63.3 "/> <linearGradient id="SVGID_32_" gradientUnits="userSpaceOnUse" x1="64.7328" y1="78.0417" x2="90.7292" y2="78.0417"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#6D1F8B"/> </linearGradient> <polygon class="st31" points="71.6,91.5 67.8,76.6 64.7,64.6 90.7,71.7 87.3,76.4 "/> <linearGradient id="SVGID_33_" gradientUnits="userSpaceOnUse" x1="87.2917" y1="78.4896" x2="99.951" y2="78.4896"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#5B0174"/> </linearGradient> <polygon class="st32" points="100,89 95.5,93.7 87.3,76.4 90.7,71.7 100,63.3 "/> <linearGradient id="SVGID_34_" gradientUnits="userSpaceOnUse" x1="-2.601155e-010" y1="70.0651" x2="8.8074" y2="70.0651"> <stop offset="0" style="stop-color:#0A0744"/> <stop offset="1" style="stop-color:#100126"/> </linearGradient> <polygon class="st33" points="0,60.7 0,79.4 8.8,75.3 "/> <linearGradient id="SVGID_35_" gradientUnits="userSpaceOnUse" x1="3.9289" y1="68.0029" x2="34.5153" y2="50.3439"> <stop offset="0" style="stop-color:#301083"/> <stop offset="1" style="stop-color:#5B097F"/> </linearGradient> <polygon class="st34" points="40,59.8 33.6,66.8 2.6,65.2 0,61.2 0,58.4 0.3,54.1 31,56.2 "/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0s" repeatCount="indefinite"/> </g> </svg> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    • Yes, I did. But you need no animation , because everyone will have a random rotation angle - Herrgott
    • so you do the keyframes with those parameters, tobish transform: rotateZ(свои парамерты) && transform-origin:50% 50% and bullet random - Lieutenant Jim Dangle
    • How can I change the keyframes parameters via javascript? Or you can somehow pass the animation: {transform: scale(2);} 2s ease; ? - Herrgott
    • this function is api.jquery.com/animate - Lieutenant Jim Dangle
    • .animate({"transform" : "rotate(20deg)"}, 1000); not working - Herrgott