A Pen by Ethan Marshall

Thumbnail
This awesome code was written by 321, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 321 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ethan Marshall</title>
  <meta name="theme-color" content="#85FF85">
  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg version="1.1" id="paper_crane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="152.824px" height="98.723px" viewBox="0 0 152.824 98.723" enable-background="new 0 0 152.824 98.723" xml:space="preserve">
<path id="pulledtail" fill="#A3FFA3" stroke="#7A997A" d="M11.814,2.294 45.314,75.294 74.314,64.294">
	<animate dur="1.4s" repeatCount="indefinite" attributeName="d" values="
	M11.814,2.294 45.314,75.294 74.314,64.294Z;
	M2.064,16.044 45.314,75.294 74.314,64.294Z;	
	M11.814,2.294 45.314,75.294 74.314,64.294Z;"/>
</path>
<path id="body" fill="#85FF85" stroke="#7A997A" d="M74.314,29.794 109.814,68.794 45.314,75.294Z"/>
<path id="beak" fill="#66FF66" stroke="#7A997A" d="M135.314,14.294 140.814,26.794 128.314,17.794Z">
	<animate dur="1.4s" repeatCount="indefinite" attributeName="d" values="
	M135.314,14.294 140.814,26.794 128.314,17.794Z;
	M149.865,27.685 152.038,41.168 142.209,29.308Z;	
	M135.314,14.294 140.814,26.794 128.314,17.794Z;"/>
</path>
<path id="neck" fill="#A3FFA3" stroke="#7A997A" d="128.064,13.794 135.939,13.794 109.814,68.794 66.601,73.149Z">
	<animate dur="1.4s" repeatCount="indefinite" attributeName="d" values="
	M128.064,13.794 135.939,13.794 109.814,68.794 66.601,73.149Z;
	M142.064,26.794 149.939,26.794 109.814,68.794 66.601,73.149Z;	
	M128.064,13.794 135.939,13.794 109.814,68.794 66.601,73.149Z;"/>
</path>
<path id="flappywing" fill="#A3FFA3" stroke="#7A997A" d="M41.314,62.794 98.814,31.794 129.814,97.794Z">
	<animate dur="0.4s" repeatCount="indefinite" attributeName="d" values="
	M41.314,72.794 98.814,31.794 129.814,97.794Z;
	M41.314,62.794 98.814,57.544 110.814,36.794Z;
	M41.314,72.794 98.814,31.794 129.814,97.794Z;"/>
	<animate dur="0.4s" repeatCount="indefinite" attributeName="fill" values="
	#A3FFA3;
	#A3FFA3;
	#A3FFA3;
	#FFFFFF;
	#A3FFA3;
	#FFFFFF;
	#A3FFA3;
	#A3FFA3;
	#A3FFA3;"/>
</path>
</svg>
Move Me! (with clicking and dragging)
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/321/a-pen-by-ethan-marshall-Gcjvn */
@import url(https://fonts.googleapis.com/css?family=Rajdhani:300,400);
body {
  font-family: 'Rajdhani';
}

/*Downloaded from https://www.codeseek.co/321/a-pen-by-ethan-marshall-Gcjvn */
$("svg").draggable();

Comments