Cat Silhouette
How do I make an cat silhouette?
Cat animation designed for Cat Chow. Uses an inline SVG to create a resolution independent cat. The cat's tail is a stroke. There are several strokes that are invisible. The JS parses the SVG and converts the various tails to objects. TweenMax animates each value of the objects and onUpdate combine the data back together to draw the path's attribute. There is some funkiness to overcome with the ear transform in some browsers. But it looks good in Chrome!. What is a cat silhouette? How do you make a cat silhouette? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.
Cat Silhouette Previews
Cat Silhouette - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cat Silhouette</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ background-color:#dae4eb; margin: 0px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <svg version="1.1" id="cat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="542.5px" height="501.5px" viewBox="0 0 542.5 501.5" enable-background="new 0 0 542.5 501.5" xml:space="preserve"> <path id="rightEarShadow" fill="#656565" stroke="#656565" stroke-width="10" stroke-miterlimit="10" d="M470.6,214.7c-1.1-2.1-8.3-4.3,2-9.7c10.3-5.4,34.2-11.8,35.3-9.7s-6.4,8.2-16.6,13.5C480.9,214.2,471.7,216.8,470.6,214.7z"/> <path id="leftEarShadow" fill="#656565" stroke="#656565" stroke-width="10" stroke-miterlimit="10" d="M459.4,218.7c-1.6-1.8-13.2-1.8-4.4-9.5s34.5-20,36-18.2c1.6,1.8-4.2,9.4-13,17.1S461,220.5,459.4,218.7z"/> <path id="tailShadow" fill="none" stroke="#656565" stroke-width="33" stroke-linecap="round" stroke-miterlimit="10" d="M95,239c0.8-75.8-38.8-122.2-32-153s37-18,37-18"/> <path id="body" fill="#A3B5BE" stroke="#656565" stroke-width="5" stroke-miterlimit="10" d="M493.4,222.7c-11.4-15-4.2-18.4-37.4-19.8c-12.3-0.5-21.6-2.3-31.1,3c-9.5,5.4-20.7,13.3-28.4,15c-7.7,1.8-46.6,9.7-52.2,6.9c-5.6-2.7-54.7-36-87.4-44.7c-16.3-4.3-32-3.3-48.8-0.1c-16.7,3-23.4,1.8-44.6,3.8c-30.3,2.8-65.8,1.9-75.3,28.3c-7.7,21.6-11.6,36.3,4.8,72c10.7,23.5,21.3,32.3,23.5,59.6s0.5,35.2-1,45.2c-1.4,10.1,9.9,29.9,13.9,37.6s19.6,34,29.1,40.7c4,2.9,10.1,1,16.8,2.9c6.7,1.9,16.8-2.4,18.9-6.4c2.1-4,3.8-8.8-0.3-14.4c0,0,1.6-8.6-8.8-12.5c-10.6-3.8-16.5-5.9-18.7-10.5c-2.2-4.6-10.4-24.9-7.2-31.8c3.2-6.9,24.6-40.7,28.3-46.5c3.5-5.7,8-4,13.6-3.2c10.7,1.8,28.9,1,46,2.9c17.1,1.9,43.6,8.8,52.9,11.2c9.3,2.4,11.2,15,15.2,25.6c3.8,10.5,17.3,38,20.1,51.4c2.9,13.4,4.3,26.3,11.2,30.4c6.9,4,17.6,0.5,17.6,0.5s6.7,0.8,12.5,0.5c5.8-0.3,11.5-4.5,8.6-12.9c0,0,9.7,2.5,13.6,1c4.8-1.9,8-6.7,4.5-13.1c-2.7-5.1-9.3-8-13.9-8.3c-4.5-0.5-7.7-7.7-8.3-12.6c-0.8-5.1-0.8-31.5-2.4-40.2c-2.3-12.1,6.2-21.1,14.9-25.1c8.6-4,31.2-18.2,38.7-35.2c7.5-17.1,13.1-26.3,19.5-27.3c6.2-1,16.5,8.6,27.5,6.4c11-2.1,12-4.8,15.8-8.1c3.8-3.4,4.3-7.5,2.7-13.4c-1.6-5.9,0.3-18.7,1.6-23.5C500.9,253.4,504.2,236.9,493.4,222.7z"/> <path id="tail1" fill="none" stroke="#A3B5BE" stroke-width="23" stroke-linecap="round" stroke-miterlimit="10" d="M95,239c0.8-75.8-38.8-122.2-32-153s37-18,37-18"/> <path id="tail2" opacity="0" fill="none" stroke="#A3B5BE" stroke-width="23" stroke-linecap="round" stroke-miterlimit="10" d="M95,239c-7.1-57.8,43-66.8,56.9-113.8s-19.1-55-19.1-55"/> <path id="tail3" opacity="0" fill="none" stroke="#A3B5BE" stroke-width="23" stroke-linecap="round" stroke-miterlimit="10" d="M95,239c4.8-80.8-60.2-117.8-66.2-146.8s17-34,17-34"/> <path id="tail4" opacity="0" fill="none" stroke="#A3B5BE" stroke-width="23" stroke-linecap="round" stroke-miterlimit="10" d="M95,239c-19.2-60.8,70-86.8,81.4-126.8s-13.6-46.9-13.6-46.9"/> <path id="rightEar" fill="#A3B5BE" d="M470.6,214.7c-1.1-2.1-8.3-4.3,2-9.7c10.3-5.4,34.2-11.8,35.3-9.7s-6.4,8.2-16.6,13.5C480.9,214.2,471.7,216.8,470.6,214.7z"/> <path id="leftEar" fill="#A3B5BE" d="M459.4,218.7c-1.6-1.8-13.2-1.8-4.4-9.5s34.5-20,36-18.2c1.6,1.8-4.2,9.4-13,17.1S461,220.5,459.4,218.7z"/> <g id="patches"> <path id="backFoot" fill="#FFFFFF" stroke="#656565" stroke-width="3" stroke-miterlimit="10" d="M151.9,459c0,2.3,0.6,4.5,1.6,6.6c1.8,1.9,3.5,3.5,5,4.6c4,2.9,10.1,1,16.8,2.9c6.7,1.9,16.8-2.4,18.9-6.4c2.1-4,3.8-8.8-0.3-14.4c0,0,1.6-8.6-8.8-12.5c-3.3-1.2-6.2-2.2-8.6-3.2C161.9,441,151.9,449.4,151.9,459z"/> <path id="legLine" fill="none" stroke="#656565" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M385.3,457.6c-3.4-13.1-21.4-18.1-24.4-34.1s1-21,0-36s16.1-32.6,16.1-32.6"/> <path id="frontFoot" fill="#FFFFFF" stroke="#656565" stroke-width="3" stroke-miterlimit="10" d="M346.6,469.5c6.9,4,17.6,0.5,17.6,0.5s6.7,0.8,12.5,0.5s11.5-4.5,8.6-12.9c-0.2-0.8-0.5-1.6-0.8-2.4l-4.2-6.4c0,0-8-7.7-24.4-6.3c-9.1,0.8-14.9,4.6-18.2,7.8C339.6,459.1,341.7,466.5,346.6,469.5z"/> <path id="belly" fill="#FFFFFF" stroke="#656565" stroke-width="3" stroke-miterlimit="10" d="M276.9,343.7c-16-3.8-17-5.2-51-7.2S187.6,351,187.6,351c3.5-5.7,8-4,13.6-3.2c10.7,1.8,28.9,1,46,2.9c17.1,1.9,43.6,8.8,52.9,11.2c2.9,0.7,5.1,2.5,6.9,4.9C306.8,366.6,292.8,347.5,276.9,343.7z"/> <path id="neck" fill="#FFFFFF" stroke="#656565" stroke-width="3" stroke-miterlimit="10" d="M407.9,322.5c-10.5,13.8-17.3,15.7-27,26c-14.3,15.1-7.6,26.4-2.4,31.7c0.1-10,7.6-17.4,15.3-20.9c8.6-4,31.2-18.2,38.7-35.2c5.3-12.1,9.7-20.2,14-24.3C439.8,299.8,423.2,302.4,407.9,322.5z"/> </g>
</svg> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax.min.1.14.1-release.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cat Silhouette - Script Codes CSS Codes
body{ background-color:#dae4eb; margin: 0px;
}Cat Silhouette - Script Codes JS Codes
var cat;
var tail;
var shadow;
var leftEar;
var leftEarShadow;
var rightEar;
var rightEarShadow;
var tails=[];
var commandList=["m","M","c","C","s","S"];
var index=1;
window.onload = function () { cat= document.getElementById("cat"); tail=cat.getElementById("tail1"); shadow=cat.getElementById("tailShadow"); leftEar=cat.getElementById("leftEar"); leftEarShadow=cat.getElementById("leftEarShadow"); rightEar=cat.getElementById("rightEar"); rightEarShadow=cat.getElementById("rightEarShadow"); tails[0]=parsePath(cat.getElementById("tail1").getAttribute("d")); tails[1]=parsePath(cat.getElementById("tail2").getAttribute("d")); tails[2]=parsePath(cat.getElementById("tail3").getAttribute("d")); tails[3]=parsePath(cat.getElementById("tail4").getAttribute("d")); tweenTail(); tweenEar("left"); tweenEar("right"); var inputvalue=-34; var positive=false; var base=50;
};
function tweenTail(){ var targetData=tails[index]; var duration=Math.random()+1.5; for(var i=0;i<targetData.length;i++){ var tweenObject=targetData[i].original; tweenObject.delay=.3*(2-i); tweenObject.ease=Cubic.easeInOut; tweenObject.onUpdate=updatePath; TweenMax.killTweensOf(tails[0][i].current); TweenMax.to(tails[0][i].current,duration-(tweenObject.delay*.25),tweenObject) } TweenMax.delayedCall(duration,tweenTail); index++; if(index==tails.length){ index=0; }
}
function tweenEar(direction){ TweenMax.to([this[direction+"Ear"],this[direction+"EarShadow"]],(Math.random()*.5)+.3,{css:{rotation:(Math.random()*20)-15,transformOrigin:"30% 100%"},delay:(Math.random()*.5)+.6,ease:Quart.easeInOut,onComplete:tweenEar,onCompleteParams:[direction],onCompleteScope:this});
}
function updatePath(){ var string=""; for(var i=0;i<tails[0].length;i++){ var point=tails[0][i]; var command=point.command; string+=command; string+=point.current; } tail.setAttribute("d",string); shadow.setAttribute("d",string);
}
function parsePath(path){ var points=[]; path=addCommas(path); for(var i=0;i<path.length;i++){ var nextIndex=getNextIndex(path,i); var string=path.substring(i,nextIndex); var command=string.substring(0,1); var data=string.substring(1); var dataArray=data.split(","); for(var d=0;d<dataArray.length;d++){ dataArray[d]=parseFloat(dataArray[d]); } var pathData={command:command,current:dataArray.slice(),original:dataArray.slice()} points.push(pathData); i=nextIndex-1; } return points;
}
function addCommas(string){ string=string.replace(/-/g,",-"); string=string.replace(/,,/g,","); for(var i=0;i<commandList.length;i++){ var command=commandList[i]; var reg=new RegExp(command+",","g"); string=string.replace(reg,command); } return string;
}
function getNextIndex(string,startIndex){ var nextIndex=string.length; for(var i=0;i<commandList.length;i++){ var command=commandList[i]; var index=string.indexOf(command,startIndex+1); if(index<nextIndex&&index!=-1){ nextIndex=index; } } return nextIndex;
}
| Developer | Elliot Geno |
| Username | pyrografix |
| Uploaded | September 11, 2022 |
| Rating | 4 |
| Size | 4,447 Kb |
| Views | 42,504 |
Do you need developer help for Cat Silhouette?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Elliot Geno (pyrografix) Script Codes
| Name | Size |
| Bullseye Game | 5,406 Kb |
| Coaster SVG | 2,133 Kb |
| Crash Loader | 2,615 Kb |
| Iris | 2,587 Kb |
| Gnat Attack | 4,914 Kb |
| Following a Path | 2,019 Kb |
| Dot Hopper - Pagination | 2,579 Kb |
| A Pen by Elliot Geno | 2,114 Kb |
| Prism | 2,843 Kb |
| Purple Nurple | 5,008 Kb |
Create amazing captions with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Pictos font library from CodePen | Jstam | 3,790 Kb |
| A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
| Simple search using AngularJS | Haykou | 1,802 Kb |
| Multiple jCarousel | Pafnuty | 2,461 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Fading Navigation Bar | J-w-v | 2,805 Kb |
| Next Word Predictor | Rfalor | 2,776 Kb |
| SVG Modified with Query String | Jnowland | 1,663 Kb |
| Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
| CSS Link Zoom On Click | Bryce | 1,960 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!