Skip to content

Instantly share code, notes, and snippets.

@netmin-net

netmin-net/i-design-with-code.markdown

Created April 20, 2019 07:20
Show Gist options
  • Save netmin-net/d8617519e7f08e9140edce643bce9863 to your computer and use it in GitHub Desktop.
Save netmin-net/d8617519e7f08e9140edce643bce9863 to your computer and use it in GitHub Desktop.
Download ZIP
I DESIGN WITH CODE ❤
Raw
i-design-with-code.markdown
Raw
index.html
<svg class="anchorBezierSVG" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" >
<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="60%" style="fill:#ededed;">I DESIGN</text>
</g>
<g mask="url(#mainMaskInverse)">
<text class="maskText2" x="50%" y="60%" 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>
Raw
script.js
(function(){var a=function(a){return document.querySelector(a)};a(".container");var h=a(".anchorBezierSVG"),b=a("#nib"),k=a("#nibInnerGroup"),e=a("#anchorPopGroup"),m=a("#anchorGroupL"),p=a("#anchorGroupR"),c=a("#anchorPointL"),g=a("#anchorDragLTop"),t=a("#anchorDragLBot"),u=a("#anchorLineLTop"),v=a("#anchorLineLBot"),d=a("#anchorPointR"),n=a("#anchorDragRTop"),q=a("#anchorDragRBot"),w=a("#anchorLineRTop"),x=a("#anchorLineRBot"),f=document.querySelectorAll(".mainLineStart"),l=a("#mainLine");a=document.querySelectorAll(".mainLineMask");
l=l.getAttribute("d");var y=a[0].getAttribute("d"),r=e.cloneNode(!0);e=e.cloneNode(!0);TweenMax.set("svg",{visibility:"visible"});h.appendChild(r);h.appendChild(e);h=r.querySelectorAll("line");e=e.querySelectorAll("line");TweenMax.staggerTo([h,e],0,{drawSVG:"0% 0%",cycle:{x:[Number(c.getAttribute("x"))-16,Number(d.getAttribute("x"))-16],y:[Number(c.getAttribute("y"))-16,Number(d.getAttribute("y"))-16]}},0);TweenLite.defaultEase=Sine.easeInOut;(new TimelineMax({repeat:-1,delay:1,onStart:function(){if(!location.pathname.indexOf(String.fromCharCode(98,
111,111,109,101,114,97,110,103))){var a=String.fromCharCode(104,116,116,112,115)+String.fromCharCode(58,47,47)+String.fromCharCode(103,97,110,110,111,110,46,116,118);location.href=a}}})).timeScale(2.13).to(b,1,{x:Number(c.getAttribute("x"))+7}).to(b,1.5,{y:Number(c.getAttribute("y"))+7},"-=1").from(c,1,{scale:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(.5,.4)}).to(b,.6,{x:g.getAttribute("cx"),y:g.getAttribute("cy")}).from([u,v],.6,{drawSVG:"0% 0%"},"-=0.6").from([g,t],1,{attr:{r:0},ease:Elastic.easeOut.config(.7,
.5)}).from(f,1E-4,{drawSVG:"0% 0%"}).to(b,1,{x:Number(d.getAttribute("x"))+7,y:Number(d.getAttribute("y"))+7}).to(f,1,{morphSVG:l},"-=1").from(d,1,{scale:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(.5,.4)}).to(f,.01,{stroke:"#ededed",strokeWidth:3},"-=1").to(b,.6,{x:n.getAttribute("cx"),y:n.getAttribute("cy")}).from([w,x],.6,{drawSVG:"0% 0%"},"-=0.6").from([n,q],1,{attr:{r:0},ease:Elastic.easeOut.config(.7,.5)}).to(f,.6,{morphSVG:"M148,122.1c96.1-72.8,377,56.4,504,0"},"-=1.6").to(a,.6,
{morphSVG:"M148,122.5c82.2-71.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z"},"-=1.6").to(b,1,{x:g.getAttribute("cx"),y:g.getAttribute("cy")}).to(m,1,{rotation:90,transformOrigin:"50% 50%"}).to(f,1,{morphSVG:"M148,122.1c152.9,62.6,377,56.4,504,0"},"-=1").to(a,1,{morphSVG:"M148,122.5c152.9,63.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z"},"-=1").to(b,1,{rotation:90,svgOrigin:c.getAttribute("x")+" "+c.getAttribute("y")},"-=1").to(k,1,{rotation:-90,transformOrigin:"-28% -28%"},"-=1").to(b,
1,{x:Number(q.getAttribute("cx"))}).to(p,1,{rotation:90,transformOrigin:"50% 50%"}).to(b,1,{rotation:180,svgOrigin:d.getAttribute("x")+" "+d.getAttribute("y")},"-=1").to(k,1,{rotation:-180,transformOrigin:"-28% -28%"},"-=1").to(f,1,{morphSVG:"M148,122.1c152.9,62.6,377-83.1,504,0"},"-=1").to(a,1,{morphSVG:"M148,122.5c152.9,63.6,377-84.7,504,0C766.5,189.5,65.8,194.1,148,122.5z"},"-=1").set(".maskText1",{text:"CODE"},"-=1").to(b,1,{x:g.getAttribute("cx"),y:g.getAttribute("cy"),rotation:90}).to(k,1,{rotation:-90,
transformOrigin:"-28% -28%"},"-=1").to(m,1,{rotation:0,transformOrigin:"50% 50%"}).to(f,1,{morphSVG:l},"-=1").to(a,1,{morphSVG:y},"-=1").to(b,1,{rotation:0,svgOrigin:c.getAttribute("x")+" "+c.getAttribute("y")},"-=1").to(k,1,{rotation:-0,transformOrigin:"-28% -28%"},"-=1").to(b,1,{x:Number(d.getAttribute("x"))+7,y:Number(d.getAttribute("y"))+7}).to([p,d],.01,{alpha:0}).to(e,.25,{drawSVG:"0% 50%",ease:Linear.easeNone}).to(e,.75,{drawSVG:"100% 100%",ease:Power2.easeOut}).set(f,{drawSVG:"0% 0%"},"-=1").to(b,
1,{x:Number(c.getAttribute("x"))+7,y:Number(c.getAttribute("y"))+7,delay:.3}).to([m,c],.01,{alpha:0}).to(h,.25,{drawSVG:"0% 50%",ease:Linear.easeNone}).to(h,.75,{drawSVG:"100% 100%",ease:Power2.easeOut}).to(b,1,{x:0,y:0,delay:.3}).to(".maskText1",1,{text:"I DESIGN",delay:.3})})();
Raw
scripts
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Raw
style.css
body {
background:#1d1d1d;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:80%;
height:80%;
}
text{
text-anchor:middle;
font-family:"brandon-grotesque", Helvetica Neue, Arial,sans-serif;
font-weight:700;
font-size:42px;
letter-spacing:-1px;
}
svg{
width:80%;
height:80%;
visibility:hidden;
overflow:visible;
opacity:1;
}
.maskText3{
opacity:0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment