Fred Animated Logo

animated logo

by Glynne Turner

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 244.3 283.4" style="enable-background:new 0 0 244.3 283.4;" xml:space="preserve">
 
	
  
	<path class="st0" id="icon"   fill="rgba(0,0,0,0)"  ...

CSS

body{background:red}

JavaScript

var path = document.querySelector('#icon');
var length = path.getTotalLength(); 
path.style.transition = path.style.WebkitTransition = 'all 3s ease-in-out '; 
path.style.fill = 'rgba(255,255,255,1)';