cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg  viewBox="0 0 1045 941" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.1 (67048) - http://www.bohemiancoding.com/sketch -->
    <title>arrow2</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="arrow2" transform="" fill-rule="nonzero" stroke="#979797">
            <polygon id="arrow" stroke-width="3" points="156.996094 761 294.996094 620 329.996094 659 457.996094 524 533.996094 591 599.486183 498.346408 709.996094 342 602.975215 312.733066 464.996094 275 604.354764 202.691256 812.355886 94.7661454 994.996094 0 1005.76196 142.017749 1029.24767 451.829316 1041.99609 620 983.377317 553.777372 829.996094 380.5 734.488425 511.167085 556.996094 754 501.379258 706.725689 436.996094 652 303.996094 785 233.996094 754 118.912811 843.89338 0.99609375 936 150.996094 771"></polygon>
            <polyline id="overlay" stroke-width="2" points="643.996094 184 678.31049 205.498176 726.996094 236 695.996094 172 792.996094 204 883.996094 80 983.996094 99 983.996094 236 839.996094 99 753.996094 204 509.996094 262 718.996094 308 971.996094 121 933.996094 380 1020.99609 497 1011.99609 332 869.996094 262 857.996094 157 787.996094 288.5 726.996094 418 678.31049 262 869.996094 302 895.996094 418 933.996094 109 655.996094 276 824.996094 338 971.996094 30 509.996094 254 801.996094 380 971.996094 342 983.996094 535 839.996094 342 998.996094 276 983.996094 53 1011.99609 557"></polyline>
        </g>
    </g>
</svg>
            
          
!
            
              path {
	transform: translateZ(0);
	//transition: 5s;
	backface-visibility: hidden;  perspective: 1000;
}
svg {
	max-width: 1000px
}
            
          
!
            
              
function animateMahSVG (target, howrandom, targetProperty, keepOriginal) {
	///settings

	var target = target;
	var howrandom = howrandom;
	var targetProperty = targetProperty;
	var keepOriginal = keepOriginal;

	var prevState;
	if (keepOriginal) {
		var original = $(target).data(targetProperty);
		if (original !== undefined) {
			prevState = $(target).data(targetProperty);
		} else {
			prevState = $(target).attr(targetProperty);
			$(target).data(targetProperty, prevState);
		}
	} else {
		prevState = $(target).attr(targetProperty);
	}


	var defaultPath = prevState.split(" ");
	var newPath = [];


	function checkComma(element) {
		var segments, processedvalue = [];
		if (element.indexOf(',') > -1) { 
			segments = element.split(',');
			segments.forEach(function(element) {
				element = parseFloat(element);
				const min = element - howrandom;
				const max = element + howrandom;
				element = getRandomInt( min, max);
				processedvalue.push( checkLetter(element)  ) 
			});
			processedvalue = processedvalue.join(",")
		} else {
			element = parseFloat(element);
			const min = element - howrandom;
			const max = element + howrandom;
			element = getRandomInt( min, max);
			processedvalue = parseFloat(element);
		}
		return processedvalue
	}

	function checkLetter (element) {
		let letter = "";
		if (element.match(/[a-z]/i)) {
			// alphabet letters found
			letter = element.charAt(0);
			element = element.substr(1);
			element = checkComma(element);

		} else {
			element = checkComma(element);
		}
		return letter + element;
	}
	function getRandomInt(min, max) {
		return parseFloat(Math.random() * (max - min + 1) + min).toFixed(2);
	}

	defaultPath.forEach(function(element) {
		newPath.push( checkLetter(element)  ) 
	});
	newPath2 = newPath.join(" ");
	TweenLite.to(target, (speed/1000) ,{attr:{[targetProperty]:newPath2}, ease:Linear.easeNone});
}

function requestInterval(fn, delay) {
  var requestAnimFrame = (function () {
    return window.requestAnimationFrame || function (callback, element) {
      window.setTimeout(callback, 1000 / 60);
    };
  })(),
  start = new Date().getTime(),
  handle = {};
  function loop() {
    handle.value = requestAnimFrame(loop);
    var current = new Date().getTime(),
    delta = current - start;
    if (delta >= delay) {
			///console.log(fn);
      fn();
      start = new Date().getTime();
    }
  }
  handle.value = requestAnimFrame(loop);
  return handle;
};



speed = 1000;

requestInterval(
	function() {
      animateMahSVG( $("#overlay"), 5, "points", true);
		 	animateMahSVG( $("#arrow"), 3, "points", true);
    },
	speed);
    
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console