caleydo_interactive_css.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
	 width="140.522px" height="148.944px"
	 xml:space="preserve">
  <style type="text/css" >
  <![CDATA[

       @keyframes red_move {
             0% {
              opacity: 1;
                 transform: translate(0px, 0px)
                  }
             100% {
               opacity: 0.7;
                  transform: translate(5px, -5px);
               }}

       @keyframes orange_move {
           0% {
              opacity: 1;
                 transform: translate(0px, 0px)

                              }
             100% {
               opacity: 0.7;
                  transform: translate(-5px, -5px);

               }}

       @keyframes yellow_move {
            0% {
              opacity: 1;
                 transform: translate(0px, 0px)

                              }
             100% {
               opacity: 0.7;
                  transform: translate(-5px, 0px);

               }}

       @keyframes green_move {
            0% {
              opacity: 1;
                 transform: translate(0px, 0px)

                              }
             100% {
               opacity: 0.7;
                  transform: translate(-5px, 5px);

               }}

        @keyframes blue_move {
            0% {
              opacity: 1;
                 transform: translate(0px, 0px)

                              }
             100% {
               opacity: 0.7;
                  transform: translate(5px, 5px);

               }}


        <!--polygon  {-->
           <!--animation-duration: 200ms;-->
          <!--animation-direction: alternate;-->
          <!--animation-iteration-count:2 ;-->

          <!--}-->

          #red:hover{
            animation-direction: alternate;
            animation-iteration-count:2 ;
            animation-delay: 0ms;
            animation-name: red_move;
            fill: #000000;

          }


        #red {
         animation-name: red_move;
            animation-delay: 0ms; }
       #orange {
        animation-name: orange_move;
            animation-delay: 150ms; }
        #yellow {
         animation-name: yellow_move;
            animation-delay: 300ms; }
        #green {
          animation-name: green_move;
            animation-delay: 450ms; }
            #blue {
          animation-name: blue_move;
            animation-delay: 600ms; }


  ]]>
  </style>
  <g transform="translate(10, 10)">
   <polygon id="red" fill="#EE2329" points="63.2,66 120.3,33 63.2,0 	"/>
        <polygon id="orange" fill="#F47D20" points="59.2,0 2,33 59.2,66 	"/>
        <polygon id="yellow" fill="#FABC15" points="57.2,69.5 0,36.5 0,102.5 	"/>
        <polygon id="green" fill="#1BA64E" points="59.2,72.9 2,105.9 59.2,138.9 	"/>
        <polygon id="blue" fill="#10ACDF" points="63.2,138.9 120.3,105.9 63.2,72.9 	"/>
    </g>
</svg>