I DESIGN WITH CODE ❤
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
}
<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>
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)
<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>