Skip to content

Instantly share code, notes, and snippets.

@sagartalla

sagartalla/index.html

Created October 29, 2018 06:42
Show Gist options
  • Save sagartalla/160d3a76b69fca7475c7e7f0dc1ab980 to your computer and use it in GitHub Desktop.
Save sagartalla/160d3a76b69fca7475c7e7f0dc1ab980 to your computer and use it in GitHub Desktop.
Download ZIP
text color draw
Raw
index.html
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In -->
<svg id="surface" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="387.4px" height="46.2px" viewBox="0 0 387.4 46.2" enable-background="new 0 0 387.4 46.2"
xml:space="preserve">
<defs>
</defs>
<g class="name">
<g class="letter">
<polyline style=" transform: translate(0px,-70px);" fill="none" stroke="#384B5F" stroke-width="7" points="0 66 9.6735081 106.441851 19.8420057 80 30.4937073 106.441851 40.0910027 66"></polyline>
</g>
<g class="letter" >
<path stroke="#384B5F" stroke-width="6" style=" transform: translate(0px,5px);" fill="none" d="M53,0 L53,40" id="Path-2"></path>
<circle style=" transform: translate(52px,-5px);" stroke="#384B5F" stroke-width="7" fill="none" cx="1.0" cy="1.0" r="1.0"></circle>
</g>
//t
<g class="letter" >
<path stroke="#384B5F" fill="none" stroke-width="6" style=" transform: translate(65px,5px);" d="M7,0 L7,34.7933544 C7.84711513,39 10.8471151,40.0516614 16,37.9483386" ></path>
<path stroke="#384B5F" style=" transform: translate(65px,5px);" stroke-width="6" d="M0,10 L15,10" ></path>
</g>
//h
<g class="letter">
<polyline stroke="#384B5F" stroke-width="6" fill="none" style=" transform: translate(95px,5px);" points="0 43 0 19.1596817 0 0"></polyline>
<path style=" transform: translate(95px,5px);" stroke="#384B5F" stroke-width="6" fill="none" d="M0,20.0452175 C0,20.0452175 6.57965079,12.2562325 13.7476081,13.0578928 C18.5262462,13.5923329 20.9437102,16.1194532 21,20.6392535 L21,43" ></path>
</g>
//y
<g class="letter" id="Page-1" stroke="none" stroke-width="6" fill="none" fill-rule="evenodd">
<polyline style=" transform: translate(140px,5px);" id="Path-7" points="0 0 12.9748397 29 26 0"></polyline>
<path style=" transform: translate(140px,5px);" d="M1,41.8493164 C5.1148978,42.4700468 7.90539699,41.1729859 9.37149756,37.9581337 C10.8375981,34.7432815 12.0470989,31.757237 13,29" id="Path-8"></path>
</g>
//o
<g class="letter">
<ellipse fill="none" stroke="#384B5F" stroke-width="6" stroke-linejoin="bevel" stroke-miterlimit="10" cx="190.1" cy="22.7" rx="16.3" ry="16.7"/>
</g>
//u
<g class="letter" id="Page-1" stroke="#384B5F" stroke-width="6" fill="none" fill-rule="evenodd">
<path style=" transform: translate(-30px,-30px);" d="M248,37 L248,59.8560447 C248.025693,64.6186816 250.885743,67 256.580148,67 C262.274553,67 266.414504,63.8885931 269,57.6657792 L269,37 L269,67" id="u"></path>
</g>
//,
<g class="letter" id="Page-1" stroke="384B5F" stroke-width="3" fill="none" fill-rule="evenodd">
<circle style=" transform: translate(250px,35px);" id="Oval-3" cx="2.5" cy="1.5" r="1.5"></circle>
<path style=" transform: translate(250px,35px);" d="M3.79330084,1.02774031 C5.37125535,3.07266152 4.1663716,6.43281134 0.178649604,11.1081898" id="Path-10"></path>
</g>
//s
<g class="letter" id="Page-1" stroke="384B5F" stroke-width="6" fill="none" fill-rule="evenodd">
<path style=" transform: translate(-40px,-30px);" d="M330.261514,41.8748505 C326.635668,38.4338268 322.50299,37.1296784 317.863479,37.9624052 C313.223969,38.795132 310.858179,41.3626493 310.766111,45.6649569 C310.809289,48.5069656 314.325361,50.6373299 321.314327,52.0560496 C328.303292,53.4747694 331.285688,56.4025638 330.261514,60.8394328 C329.405941,64.9484656 325.789005,67.2090505 319.410706,67.6211875 C315.672003,67.5894319 312.419685,65.9224933 309.653752,62.6203716" id="s"></path>
</g>
<g class="letter">
<ellipse fill="none" stroke="#384B5F" stroke-width="6" stroke-linejoin="bevel" stroke-miterlimit="10" cx="319.1" cy="22.7" rx="16.3" ry="16.7"/>
</g>
<g class="letter">
<ellipse fill="none" stroke="#384B5F" stroke-width="6" stroke-linejoin="bevel" stroke-miterlimit="10" cx="363.1" cy="22.7" rx="16.3" ry="16.7"/>
</g>
<g class="letter">
<polyline fill="none" stroke="#384B5F" stroke-width="6" stroke-linejoin="bevel" stroke-miterlimit="10" points="390.4,45.6
391.4,2.6 423.4,43.2 423.4,0.6 "/>
</g>
</g>
</svg>
Raw
script.babel
let s = new Snap('#surface');
var letterSpeed = 10; //higher = faster
var colorSpeed = 2; //higher = faster
let colors = [
'#e9edef', '#efad42', '#e9435a', '#4aadad', '#83cead'
];
let letters = s.selectAll('.letter');
let tl = new TimelineMax({
repeat: -1,
yoyo: true
});
for (var i = 0; i < letters.length; i += 1) {
var letter = letters[i];
tl.set(letter.node, {
rotation: 180 - (Math.random() * 360),
x: 20,
y: -200
}, 0);
var tw = TweenMax.to(letter.node, 0.6, {
rotation: 0,
x: 0,
y: 0,
ease: Back.easeOut
});
tl.add(tw, 0.5 + (i / letterSpeed));
var paths = letter.selectAll('*');
for (var k = 0; k < paths.length; k += 1) {
for (var j = 0; j < colors.length; j += 1) {
var l = paths[k].clone();
l.attr({
stroke: colors[j]
});
var delay = (0.1 + (i / letterSpeed) + ((colors.length - (j / colorSpeed))) / 10);
var tw = TweenMax.fromTo(l.node, 1, {
drawSVG: '0%'
}, {
drawSVG: '100%',
ease: Power2.easeInOut
});
tl.add(tw, delay);
}
//paths[k].remove();
letter.prepend(paths[k]);
TweenMax.set(paths[k].node, {
x: -3,
y: -3
});
var tw = TweenMax.fromTo(paths[k].node, 1, {
drawSVG: '0%'
}, {
drawSVG: '100%',
ease: Power2.easeInOut
});
tl.add(tw, delay);
}
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.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/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
Raw
style.scss
body{
margin: 0;
background: #384b5f;
}
.link{
position: fixed;
bottom: 0;
left: 0;
margin: 10px;
font-family: sans-serif;
font-weight: 100;
a{
color: black;
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
}
svg{
position: absolute;
top: 0;
left: 0;
}
svg{
width: 100%;
height: 100%;
}
.name{
transform-origin: 50% 50%;
transform: scale(0.75);
}
Raw
text-color-draw.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment