Random Transforming Arrow SVG

In this example below you will see how to do a Random Transforming Arrow SVG with some HTML / CSS and Javascript

Arrow transformation using SVG and CSS.

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©
  • HTML
  • CSS
  • JavaScript
    <div>
  
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="480"
   height="480"
   viewBox="0 0 15.875 15.875"
   version="1.1"
   id="svg18"
   sodipodi:docname="nav-icon2.svg"
   inkscape:version="0.92.1 r">
  <metadata
     id="metadata24">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs22" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1366"
     inkscape:window-height="741"
     id="namedview20"
     showgrid="false"
     inkscape:zoom="3.9333333"
     inkscape:cx="-24.533898"
     inkscape:cy="30"
     inkscape:window-x="0"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg18" />
  <g
     transform="translate(0 -281.125)"
     id="g16">
    <path
       style="fill-opacity:0.05899999"
       d="m 15.611,289.06201 a 7.6729999,7.6729999 0 0 1 -7.6729998,7.673 7.6729999,7.6729999 0 0 1 -7.67299986,-7.673 7.6729999,7.6729999 0 0 1 7.67299986,-7.673 7.6729999,7.6729999 0 0 1 7.6729998,7.673 z"
       id="circle2" />
    <g
       class="arrow"
       id="g14">
      <path
         class="arrowShaft"
         d="M7.8 292.502v-6.536h.574v6.536z"
         id="path4" />
      <path
         class="arrowHead"
         d="M8.206 286.388l-3.15 3.268-.406-.422 3.15-3.268z"
         id="path6" />
      <path
         class="arrowHead"
         d="M8.374 285.966l3.149 3.268-.406.422-3.15-3.268z"
         id="path8" />
      <path
         class="arrowMirror"
         d="M11.523 289.234l-3.15 3.267-.406-.421 3.15-3.268z"
         id="path10" />
      <path
         class="arrowMirror"
         d="M5.056 288.812l3.15 3.268-.407.421-3.149-3.267z"
         id="path12" />
    </g>
  </g>
</svg>
</div>

/*Downloaded from https://www.codeseek.co/r3b311i0n/random-transforming-arrow-svg-WjaGgX */
    div{
  text-align: center;
  width: 100%;
}

.arrow{
	-webkit-animation: arrowRotate 3s infinite;
	-o-animation: arrowRotate 3s infinite;
	animation: arrowRotate 3s infinite;
}

@keyframes arrowRotate{
	0% {
		transform: rotate(0deg) translate(0px, 0px);
		transform-origin: 50% 50%;
	}
	50% {
		transform: rotate(0deg) translate(0px, -3px);
		transform-origin: 50% 50%;
	}
	60% {
		transform: rotate(0deg) translate(0px, -3px);
		transform-origin: 50% 50%;
	}
	100% {
		transform: rotate(-90deg) translate(3px, 0px);
		transform-origin: 50% 50%;
	}
}


.arrowMirror {
	animation: arrowMirrorFade 3000ms infinite;
}

@keyframes arrowMirrorFade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.arrowShaft {
animation:arrowShaftTransform 3000ms infinite;	
}

@keyframes arrowShaftTransform {
	0% {
		transform: scaleY(1);
		transform-origin: 0% 0%;
	}
	50% {
		transform: scaleY(1);
		transform-origin: 0% 0%;
	}
	100% {
		transform: scaleY(1.8);
		transform-origin: 0% 0%;
	}
}



/*Downloaded from https://www.codeseek.co/r3b311i0n/random-transforming-arrow-svg-WjaGgX */
    

Comments