I DESIGN WITH CODE ❤

7/5/2016 - 7:19 AM


body {
  background:#1d1d1d;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  /* width:292px;
  height:138px; */
  max-width:800px;
  width:100%;
  min-width:320px;
 
}
text{
  text-anchor:middle;
  font-family:"brandon-grotesque";
  font-weight:700;
  font-size:42px;
  letter-spacing:-2px;
}
svg{
  width:100%;
  visibility:hidden;
  overflow:visible; 
  opacity:1;
}

.maskText3{
  opacity:0
}

scripts

<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/TextPlugin.min.js"></script>

script.js

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    container = select('.container'),
    anchorBezierSVG = select('.anchorBezierSVG'),
    nib = select('#nib'),
    nibInnerGroup = select('#nibInnerGroup'),
    
    anchorPopGroup = select('#anchorPopGroup'),
    
    anchorGroupL = select('#anchorGroupL'),
    anchorGroupR = select('#anchorGroupR'),
    
    anchorPointL = select('#anchorPointL'),
    anchorDragLTop = select('#anchorDragLTop'),
    anchorDragLBot = select('#anchorDragLBot'),
    anchorLineLTop = select('#anchorLineLTop'),
    anchorLineLBot = select('#anchorLineLBot'),
    
    anchorPointR = select('#anchorPointR'),
    anchorDragRTop = select('#anchorDragRTop'),
    anchorDragRBot = select('#anchorDragRBot'),
    anchorLineRTop = select('#anchorLineRTop'),
    anchorLineRBot = select('#anchorLineRBot'),
    
    mainLineStart = selectAll('.mainLineStart'),
    mainLine1 = select('#mainLine'),
    mainLineMask = selectAll('.mainLineMask'),
    mainLine1Path = mainLine1.getAttribute('d'),
    mainLine2Path = "M148,122.1c96.1-72.8,377,56.4,504,0",
    mainLineMaskPath = mainLineMask[0].getAttribute('d'),
    mainLine2MaskPath = "M148,122.5c82.2-71.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z",
    mainLine3Path = "M148,122.1c152.9,62.6,377,56.4,504,0",
    mainLine3MaskPath = "M148,122.5c152.9,63.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z",
    mainLine4Path = "M148,122.1c152.9,62.6,377-83.1,504,0",
    mainLine4MaskPath = "M148,122.5c152.9,63.6,377-84.7,504,0C766.5,189.5,65.8,194.1,148,122.5z",
    anchorPopGroupL = anchorPopGroup.cloneNode(true),
    anchorPopGroupR = anchorPopGroup.cloneNode(true)
  

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})

anchorBezierSVG.appendChild(anchorPopGroupL);
anchorBezierSVG.appendChild(anchorPopGroupR);
var allPopL = anchorPopGroupL.querySelectorAll('line'), allPopR = anchorPopGroupR.querySelectorAll('line')

TweenMax.staggerTo([allPopL, allPopR], 0, {
  drawSVG:'0% 0%',
  cycle:{
    x:[Number(anchorPointL.getAttribute('x')) - 16,Number(anchorPointR.getAttribute('x'))- 16],
    y:[Number(anchorPointL.getAttribute('y')) - 16,Number(anchorPointR.getAttribute('y'))- 16]
  }
},0)

TweenLite.defaultEase = Sine.easeInOut;

var tl = new TimelineMax({repeat:-1, delay:1}).timeScale(2.83);
tl.to(nib, 1, {
  x:Number(anchorPointL.getAttribute('x'))+7
})
.to(nib, 1.5, {
  y:Number(anchorPointL.getAttribute('y'))+7
},'-=1')
.from(anchorPointL, 1, {
  scale:0,
  transformOrigin:'50% 50%',
  ease:Elastic.easeOut.config(0.5,0.4)
})
  
.to(nib, 0.6, {
  x:anchorDragLTop.getAttribute('cx'),
  y:anchorDragLTop.getAttribute('cy')
})
.from([anchorLineLTop, anchorLineLBot], 0.6, {
  drawSVG:'0% 0%'
},'-=0.6')

.from([anchorDragLTop,anchorDragLBot], 1, {
  attr:{
    r:0
  },
  ease:Elastic.easeOut.config(0.7,0.5)
})
.from(mainLineStart, 0.0001, {
  drawSVG:'0% 0%'
})

.to(nib, 1, {
  x:Number(anchorPointR.getAttribute('x'))+7,
  y:Number(anchorPointR.getAttribute('y'))+7
})
.to(mainLineStart, 1, {
  morphSVG:mainLine1Path
},'-=1')
.from(anchorPointR, 1, {
  scale:0,
  transformOrigin:'50% 50%',
  ease:Elastic.easeOut.config(0.5,0.4)
})
.to(mainLineStart, 0.01, {
  stroke:'#ededed',
  strokeWidth:3
},'-=1')
  
.to(nib, 0.6, {
  x:anchorDragRTop.getAttribute('cx'),
  y:anchorDragRTop.getAttribute('cy')
})
.from([anchorLineRTop, anchorLineRBot], 0.6, {
  drawSVG:'0% 0%'
},'-=0.6')
.from([anchorDragRTop,anchorDragRBot], 1, {
  attr:{
    r:0
  },
  ease:Elastic.easeOut.config(0.7,0.5)
})
.to(mainLineStart, 0.6, {
  morphSVG:mainLine2Path
},'-=1.6')
.to(mainLineMask, 0.6, {
  morphSVG:mainLine2MaskPath
},'-=1.6')

.to(nib, 1, {
  x:anchorDragLTop.getAttribute('cx'),
  y:anchorDragLTop.getAttribute('cy')
})
.to(anchorGroupL, 1, {
  rotation:90,
  transformOrigin:'50% 50%'
})
.to(mainLineStart, 1, {
  morphSVG:mainLine3Path
},'-=1')
.to(mainLineMask, 1, {
  morphSVG:mainLine3MaskPath
},'-=1')

.to(nib, 1, {
  rotation:90,
  svgOrigin:anchorPointL.getAttribute('x') + ' ' + anchorPointL.getAttribute('y')
},'-=1')
.to(nibInnerGroup, 1, {
  rotation:-90,
  transformOrigin:'-28% -28%'
},'-=1')



.to(nib, 1, {
  x:Number(anchorDragRBot.getAttribute('cx'))
})

.to(anchorGroupR, 1, {
  rotation:90,
  transformOrigin:'50% 50%'
})
.to(nib, 1, {
  rotation:180,
  svgOrigin:anchorPointR.getAttribute('x') + ' ' + anchorPointR.getAttribute('y')
},'-=1')

.to(nibInnerGroup, 1, {
  rotation:-180,
  transformOrigin:'-28% -28%'
},'-=1')
.to(mainLineStart, 1, {
  morphSVG:mainLine4Path
},'-=1')
.to(mainLineMask, 1, {
  morphSVG:mainLine4MaskPath
},'-=1')

.set('.maskText1', {
  text:'CODE'
},'-=1')

.to(nib, 1, {
  x:anchorDragLTop.getAttribute('cx'),
  y:anchorDragLTop.getAttribute('cy'),
  rotation:90
})
.to(nibInnerGroup, 1, {
  rotation:-90,
  transformOrigin:'-28% -28%'
},'-=1')
.to(anchorGroupL, 1, {
  rotation:0,
  transformOrigin:'50% 50%'
})
.to(mainLineStart, 1, {
  morphSVG:mainLine1Path
},'-=1')
.to(mainLineMask, 1, {
  morphSVG:mainLineMaskPath
},'-=1')

.to(nib, 1, {
  rotation:0,
  svgOrigin:anchorPointL.getAttribute('x') + ' ' + anchorPointL.getAttribute('y')
},'-=1')
.to(nibInnerGroup, 1, {
  rotation:-0,
  transformOrigin:'-28% -28%'
},'-=1')

//close it
.to(nib, 1, {
  x:Number(anchorPointR.getAttribute('x'))+7,
  y:Number(anchorPointR.getAttribute('y'))+7
})

.to([anchorGroupR, anchorPointR], 0.01, {
  alpha:0
})
.to(allPopR, 0.25, {
  drawSVG:'0% 50%',
  ease:Linear.easeNone
})
.to(allPopR, 0.75, {
  drawSVG:'100% 100%',
  ease:Power2.easeOut
})
/* 
.to([anchorPointR], 0.5, {
  alpha:0,
  scale:1.2,
  transformOrigin:'50% 50%'
})
.to([anchorLineRTop, anchorLineRBot], 0.5, {
  drawSVG:'0% 0%',
  alpha:0
},'-=0.5')
.to([anchorDragRTop, anchorDragRBot], 0.5, {
  attr:{
    r:0
  }
  
},'-=0.5')
 */
.set(mainLineStart,  {
  drawSVG:'0% 0%'
},'-=1')

.to(nib, 1, {
  x:Number(anchorPointL.getAttribute('x'))+7,
  y:Number(anchorPointL.getAttribute('y'))+7,
  delay:0.3
})

.to([anchorGroupL, anchorPointL], 0.01, {
  alpha:0
})
.to(allPopL, 0.25, {
  drawSVG:'0% 50%',
  ease:Linear.easeNone
})
.to(allPopL, 0.75, {
  drawSVG:'100% 100%',
  ease:Power2.easeOut
})
.to(nib, 1,{
  x:0,
  y:0,
  delay:0.3
})
.to('.maskText1', 1, {
  text:'I DESIGN',
  //ease:Linear.easeNone,
  delay:0.3
})


/* .to(mainLineStart, 0.7, {
  morphSVG:mainLine3Path,
  ease:Circ.easeIn,
  repeat:-1,
  yoyo:true
}) */

/* .from(mainLine1, 2, {
  drawSVG:'0% 0%'
}) */

//ScrubGSAPTimeline(tl)

index.html

<div class="container">
<svg class="anchorBezierSVG" viewBox="0 0 800 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax slice">

<defs>
<g id="anchorPopGroup" fill="none" stroke="#ededed" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10">	
		<line  x1="24" y1="17.5" x2="24" y2="1.5"/>	
		<line  x1="29.5" y1="25" x2="45.5" y2="25"/>	
		<line  x1="23" y1="30.5" x2="23" y2="46.5"/>	
		<line  x1="17.5" y1="24" x2="1.5" y2="24"/>
</g>  
  <mask id="mainMask">
    <rect width="100%" height="100%" fill="#000"/>
<path class="mainLineMask" fill="#FFF" stroke="none" stroke-miterlimit="10" d="M148,122.5c133-92.2,377-84.8,504,0C762.3,196.2,58.4,184.6,148,122.5z"/>    
  </mask>
  <mask id="mainMaskInverse">
    <rect width="100%" height="100%" fill="#FFF"/>
<path class="mainLineMask" fill="#000" stroke="none" stroke-miterlimit="10" d="M148,122.5c133-92.2,377-84.8,504,0C762.3,196.2,58.4,184.6,148,122.5z"/>    
  </mask>
</defs>
  <g mask="url(#mainMask)">
  
<text class="maskText1" x="50%" y="50%" style="fill:#ededed;">I DESIGN</text>    
  </g>
   <g mask="url(#mainMaskInverse)">

<text class="maskText2" x="50%" y="50%" style="fill:#5783FC;">WITH</text>      
</g>
<path id="mainLine" fill="none" stroke="none" stroke-width="3" stroke-miterlimit="10" d="M148,122.1c133-87.1,377-87.8,504,0"/>
<path class="mainLineStart" stroke-linecap="round" fill="none" stroke="#5783FC" stroke-width="2" stroke-miterlimit="10" d="M148,122.1
	c20.7-21.9,98.7-100.2,96.7-95.5"/>
<g id="anchorGroupL">
	
	<line id="anchorLineLTop" fill="none" stroke="#5783FC" stroke-width="3" stroke-miterlimit="10" x1="155.8" y1="115.1" x2="243.7" y2="27.2"/>	
	<line id="anchorLineLBot" fill="none" stroke="#5783FC" stroke-width="3" stroke-miterlimit="10" x1="140.8" y1="130.1" x2="52" y2="218.9"/>
	<circle id="anchorDragLTop" fill="#5783FC" cx="243.7" cy="27.2" r="5.6"/>
	<circle id="anchorDragLBot" fill="#5783FC" cx="52" cy="218.9" r="5.6"/>
</g>
  
	<rect id="anchorPointL" x="139.7" y="113.8" fill="#5783FC" stroke="#5783FC" stroke-width="5" stroke-miterlimit="10" width="15.8" height="15.8"/>
  
<g id="anchorGroupR">	
	<line id="anchorLineRTop" fill="none" stroke="#5783FC" stroke-width="3" stroke-miterlimit="10" x1="658.8" y1="115.1" x2="746.7" y2="27.2"/>	
	<line id="anchorLineRBot" fill="none" stroke="#5783FC" stroke-width="3" stroke-miterlimit="10" x1="643.8" y1="130.1" x2="555" y2="218.9"/>
	<circle id="anchorDragRTop" fill="#5783FC" cx="746.7" cy="27.2" r="5.6"/>
	<circle id="anchorDragRBot" fill="#5783FC" cx="555" cy="218.9" r="5.6"/>	
	
</g>
<rect id="anchorPointR" x="643.8" y="113.8" fill="#5783FC" stroke="#5783FC" stroke-width="5" stroke-miterlimit="10" width="15.8" height="15.8"/>  
<g id="nib">
  <g id="nibInnerGroup">
	<polygon fill="#1d1d1d" stroke="#ededed" stroke-width="2" stroke-miterlimit="10" points="1.7,1.8 8.7,20.9 20.7,27.5 27.5,20.8 
		19.9,9 	"/>
	
		<rect x="19.7" y="23.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.9343 28.0365)" fill="#1d1d1d" stroke="#ededed" stroke-width="2" stroke-miterlimit="10" width="16.4" height="10.1"/>
	<line fill="none" stroke="#ededed" stroke-width="2" stroke-miterlimit="10" x1="24.2" y1="24.1" x2="16.6" y2="16.6"/>
	<circle fill="#ededed" cx="16.6" cy="16.6" r="2.5"/>
  </g>
</g>  


</svg>
</div>

<script src="https://use.typekit.net/woe2bru.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

I DESIGN WITH CODE ❤.markdown

Rendered
Source

I DESIGN WITH CODE ❤

An SVG animation for my site

Inspired by the wonderfully playful Creogram

A Pen by Chris Gannon on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

I DESIGN WITH CODE ❤

I DESIGN WITH CODE ❤