A Pen by Corey Flynn

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Corey Flynn</title>
  
  
  
  
  
</head>

<body>

  <center class="wrapper">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px"
	 height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g id="Background">
	<circle fill="#CBBFA8" cx="256" cy="256" r="256"/>
</g>
<g id="Stand">
	<g>
		<g>
			<path fill="#6F7B84" d="M290.619,384.396c-6.39,0-11.572-5.181-11.572-11.571v-64.373c0-6.391,5.183-11.571,11.572-11.571h4.521
				v-2.433h-78.278v2.433h4.521c6.39,0,11.571,5.181,11.571,11.571v64.373c0,6.391-5.182,11.571-11.571,11.571h-4.521v7.779h78.278
				v-7.779H290.619z"/>
		</g>
	</g>
</g>
<g id="Screen">
	<rect x="78.865" y="134.747" fill="#FCFAE7" width="354.201" height="156.723"/>
</g>
<g id="FacePlate">
	<path fill="#FCFAE7" d="M447.808,301.713v45.314c0,6.391-5.18,11.571-11.571,11.571H75.767c-6.392,0-11.572-5.181-11.572-11.571
		v-45.314"/>
	<circle fill="#6F7B84" cx="256.001" cy="329.67" r="9.967"/>
</g>
<g id="App">
	<rect id="OrangeBar3" x="327.03" y="184.74" fill="#E5A024" width="88.655" height="6.723"/>
	<rect id="OrangeBar2" x="327.03" y="171.925" fill="#E5A024" width="88.655" height="6.723"/>
	<rect id="OrangeBar1" x="327.03" y="159.109" fill="#E5A024" width="88.655" height="6.723"/>
	<rect id="PinkBar3" x="211.672" y="184.74" fill="#CC79A7" width="88.655" height="6.723"/>
	<rect id="PinkBar2" x="211.672" y="171.925" fill="#CC79A7" width="88.655" height="6.723"/>
	<rect id="PinkBar1" x="211.672" y="159.109" fill="#CC79A7" width="88.655" height="6.723"/>
	<rect id="BlueBar3" x="96.314" y="184.74" fill="#0072B2" width="88.655" height="6.723"/>
	<rect id="BlueBar2" x="96.314" y="171.925" fill="#0072B2" width="88.655" height="6.723"/>
	<rect id="BlueBar1" x="96.314" y="159.109" fill="#0072B2" width="88.655" height="6.723"/>
	
		<rect x="327.03" y="239.61" fill="#E5A024" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="88.655" height="32.781"/>
	
		<rect x="327.03" y="272.391" fill="#E5A024" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="88.655" height="29.322"/>
	
		<rect id="SecondOrangeSquare" x="327.03" y="207.429" fill="#E5A024" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="88.655" height="32.781"/>
	
		<rect id="TopOrangeSquare" x="265.967" y="207.429" fill="#E5A024" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="61.063" height="89.504"/>
	
		<rect x="171.174" y="207.335" fill="#0072B2" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="74.86" height="48.319"/>
	
		<rect x="96.314" y="256" fill="#0072B2" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="149.72" height="43.437"/>
	
		<rect id="TopBlueSquare" x="96.314" y="207.429" fill="#0072B2" stroke="#FBF9E8" stroke-width="3" stroke-miterlimit="10" width="149.72" height="89.504"/>
</g>
<g id="Frame">
	<path fill="#4A5361" d="M436.236,119.824H75.767c-6.392,0-11.572,5.181-11.572,11.571v174.646l383.613-0.487V131.396
		C447.808,125.005,442.628,119.824,436.236,119.824z M431.033,289.412H80.969v-152.96h350.064V289.412z"/>
</g>
</svg>

</center>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/coreyflynn/a-pen-by-corey-flynn-sedDB */
var fullWidth = 88.655,
    blueSquareFullWidth = 149.72,
    blueSquareFullHeight = 89.504,
    blueSquareContractWidth = 74.86,
    blueSquareContractHeight = 48.226,
    orangeSquareFullWidth = 149.72,
    orangeSquareFullHeight = 89.504,
    orangeSquareContractWidth = 61.063,
    orangeSquareContractHeight = 89.504,
    secondOrangeSquareFullHeight = 32.781;

function state1(){
console.log("s")
  // blue bars
  d3.select("#BlueBar1").transition().duration(1000).attr("width",fullWidth);
  d3.select("#BlueBar2").transition().duration(1000).attr("width",fullWidth);
  d3.select("#BlueBar3").transition().duration(1000).attr("width",fullWidth);
  
  // pink bars
  d3.select("#PinkBar1").transition().duration(1000).attr("width",fullWidth);
  d3.select("#PinkBar2").transition().duration(1000).attr("width",fullWidth);
  d3.select("#PinkBar3").transition().duration(1000).attr("width",fullWidth);
  
  // orange bars
  d3.select("#OrangeBar1").transition().duration(1000).attr("width",fullWidth);
  d3.select("#OrangeBar2").transition().duration(1000).attr("width",fullWidth);
  d3.select("#OrangeBar3").transition().duration(1000).attr("width",fullWidth);

  // blue square
 d3.select("#TopBlueSquare").transition().duration(1000).attr("width",blueSquareFullWidth).attr("height",blueSquareFullHeight);setTimeout(function(){state2();},2500);
  // orange square
  d3.select("#TopOrangeSquare").transition().duration(1000).attr("width",orangeSquareFullWidth)
 d3.select("#SecondOrangeSquare").transition().duration(1000).attr("height",secondOrangeSquareFullHeight)
}

function state2(){
  // blue bars
  d3.select("#BlueBar1").transition().duration(1000).attr("width",fullWidth/4);
  d3.select("#BlueBar2").transition().duration(1000).attr("width",fullWidth/2);
  d3.select("#BlueBar3").transition().duration(1000).attr("width",fullWidth);
  
    // pink bars
  d3.select("#PinkBar1").transition().duration(1000).attr("width",fullWidth);
  d3.select("#PinkBar2").transition().duration(1000).attr("width",fullWidth/3);
  d3.select("#PinkBar3").transition().duration(1000).attr("width",fullWidth/7*6);
  
  // orange bars
  d3.select("#OrangeBar1").transition().duration(1000).attr("width",fullWidth);
  d3.select("#OrangeBar2").transition().duration(1000).attr("width",fullWidth/5);
  d3.select("#OrangeBar3").transition().duration(1000).attr("width",fullWidth/10);
  
  // blue square
  d3.select("#TopBlueSquare").transition().duration(1000).attr("width",blueSquareContractWidth);
  
  // orange square
  d3.select("#TopOrangeSquare").transition().duration(1000).attr("width",orangeSquareContractWidth)
  
  setTimeout(function(){state3();},2500);
}

function state3(){
  // blue bars
  d3.select("#BlueBar1").transition().duration(1000).attr("width",fullWidth/6);
  d3.select("#BlueBar2").transition().duration(1000).attr("width",fullWidth);
  d3.select("#BlueBar3").transition().duration(1000).attr("width",fullWidth/9*6);
  
    // pink bars
  d3.select("#PinkBar1").transition().duration(1000).attr("width",fullWidth/2);
  d3.select("#PinkBar2").transition().duration(1000).attr("width",fullWidth);
  d3.select("#PinkBar3").transition().duration(1000).attr("width",fullWidth/4);
  
  // orange bars
  d3.select("#OrangeBar1").transition().duration(1000).attr("width",fullWidth/3);
  d3.select("#OrangeBar2").transition().duration(1000).attr("width",fullWidth/7);
  d3.select("#OrangeBar3").transition().duration(1000).attr("width",fullWidth);
  
  // blue square
  d3.select("#TopBlueSquare").transition().duration(1000).attr("height",blueSquareContractHeight);
  
  // orange square
 d3.select("#SecondOrangeSquare").transition().duration(1000).attr("height",orangeSquareContractHeight)
  
  setTimeout(function(){state1();},2500);
}

state1();

Comments