Skip to content

Instantly share code, notes, and snippets.

@christianjuth
Created January 25, 2017 04:33
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save christianjuth/1c9b188b699207f473903bda79a5a2be to your computer and use it in GitHub Desktop.
Draw NYC
<!-- SVG from: http://svgfree.blogspot.com/2015/06/new-york-city-skyline-silhouette-free.html -->
<svg width="1042px" height="564px" viewBox="-634 -182 1042 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="6.90576959%" x2="54.99931%" y2="88.2317833%" id="linearGradient-1">
<stop stop-color="#FFFFFF" stop-opacity="0.269474638" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0.04" offset="56.3421997%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="nyc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-634.000000, -182.000000)">
<rect id="background" fill-opacity="0" fill="#882CAB" x="0" y="0" width="1042" height="564"></rect>
<path d="M163,384.268713 L163,335.781413 L181.345277,335.781413 L186.068945,340.781413 L186.068945,318.258843 L204.662691,318.258843 L209.662691,323.438037 L216.54778,323.438037 L222.085873,329.438037 L222.085873,295.791745 L250.07726,295.791745 L254.800928,300.791745 L254.800928,266.193593 L259.394839,262.306437 L260.239633,247.108431 L260.239633,242.680165 L261.026451,237.6749 L263.527703,231.383119 L263.527703,226.521413 L265.744597,224.304519 L265.744597,220.51399 L267.817931,216.077442 L268.532968,211.792737 L269.071317,188.60784 L297.071317,216.60784 L299.071317,218.60784 L301.071317,220.60784 L330.071317,249.60784 L332.071317,251.60784 L334.071317,253.60784 L336.071317,255.60784 L338.071317,257.60784 L340.071317,259.60784 L340.994744,263.905612 L340.994744,257.941669 L352.211728,257.941669 L360.850159,266.941669 L360.850159,250.056927 L370.10148,250.056927 L394.10148,274.682943 L404.669007,274.682943 L410.232614,280.682943 L411.018764,228.572661 L412.978907,211.157761 L412.978907,205.064754 L415.593351,204.846654 L415.593351,201.36257 L418.205033,197.878485 L421.468257,197.878485 L421.468257,176.109861 C421.468257,176.109861 421.468257,172.807987 425.013564,172.807987 L425.860632,146.277794 L427.860632,148.277794 L500.860632,221.277794 L502.860632,223.277794 L504.894488,249.493705 C504.897888,249.499051 506.633019,251.076772 506.904649,251.509792 C507.715489,252.039214 508.456738,252.958658 508.393807,254.546061 C508.282526,257.335672 508.375132,271.45723 509.395394,273.975107 L510.877891,276.078739 L511.877891,277.628554 L516.885917,282.628554 L516.885917,287.812062 L519.2795,289.812062 L519.2795,304.790761 L521.673082,306.790761 L525.921766,313.136493 L525.921766,303.024947 L530.490831,303.024947 L533.490831,306.072831 L534.761733,302.108373 L540.551055,302.108373 L542.551055,304.849812 L552.74259,304.849812 L552.74259,301.19456 L557.010731,301.19456 L567.374639,312.19456 L567.374639,299.670619 L570.585408,299.670619 L570.585408,290.176351 L593.005573,290.176351 L597.359362,294.618642 L597.839797,290.176351 L622.024877,319.785546 L625.00559,319.785546 L625.00559,297.575199 L641.768949,297.575199 L652.768949,308.877767 L661.558107,308.877767 L662.665173,295.797267 L662.665173,281.250801 L671.157283,281.250801 L689.938761,298.143916 L693.795549,301.448551 L693.795549,169.699366 L697.498111,169.699366 L694.604453,167.250569 L694.447089,165.370488 L696.172567,164.130905 L704.245041,164.130905 L705.572969,111 L783.572969,189 L784.639607,234.202904 L840.936012,290.270819 L839.428616,287.208529 L839.41904,284.297402 L838.108971,280.223796 L839.635673,278.421017 L838.763272,274.680182 L843.785102,268.101281 L987.790791,412.106971 L1041.16945,469.674318 C1041.16945,469.674318 1041.21586,557.531566 1041.16945,562.268713 L344.424678,562.268713 L321,542.268713 L163,384.268713 Z" id="skyline-shadow" fill="url(#linearGradient-1)"></path>
<path d="M162,384.268713 L162,335.781413 L180.345277,335.781413 L180.345277,354.391724 L185.068945,354.391724 L185.068945,318.258843 L203.662691,318.258843 L203.662691,344.687638 L207.624388,344.687638 L207.624388,323.438037 L215.54778,323.438037 L215.54778,343.859409 L216.768038,342.641912 L216.768038,336.477126 C216.768038,337.045843 218.899348,337.062408 221.085873,336.92713 L221.085873,295.791745 L249.07726,295.791745 L250.802738,328.261092 L250.802738,331.783827 L253.800928,331.783827 L253.800928,266.193593 L256.274572,266.193593 L258.394839,262.306437 L259.239633,247.108431 L259.239633,242.680165 L260.026451,241.893348 L260.026451,237.6749 L261.061737,236.636853 L262.527703,231.383119 L262.527703,226.521413 L264.744597,224.304519 L264.744597,220.51399 L266.817931,216.077442 L267.532968,211.792737 L268.071317,188.60784 L268.107207,211.792737 L269.250164,214.222209 L270.108761,217.943719 L270.68024,221.659707 L272.110315,227.092891 L272.110315,232.238955 L273.109712,233.100314 L273.68119,237.81846 L273.68119,242.682926 L277.4027,246.258116 L277.4027,261.834347 L280.055794,264.48468 L280.055794,271.287203 L281.37544,272.609609 L281.37544,334.500418 L284.445409,334.500418 L284.445409,314.968012 L286.40003,314.573223 L286.40003,310.998034 L288.357412,308.70936 L289.920005,309.623173 L289.920005,300.587192 L294.27649,300.587192 L294.27649,278.559056 L308.154851,278.559056 L308.154851,305.161778 L311.18617,305.161778 L311.18617,278.559056 L326.651971,278.559056 L328.02131,307.599533 L328.02131,310.647417 L332.289451,310.647417 L332.562767,314.186716 L332.562767,319.705484 L337.164961,319.484623 L337.164961,323.44908 L339.994744,323.44908 L339.994744,257.941669 L351.211728,257.941669 L351.211728,300.885355 L359.850159,300.885355 L359.850159,250.056927 L369.10148,250.056927 L369.10148,274.682943 L379.531646,274.682943 L379.531646,278.338194 L383.493343,278.338194 L383.493343,320.845679 L390.326234,327.107092 L390.326234,274.682943 L403.669007,274.682943 L403.669007,323.44908 L406.49879,323.44908 C406.49879,323.44908 406.581613,318.493508 406.700326,318.496269 L406.700326,316.734901 L408.712923,315.130898 L410.018764,228.572661 L411.978907,211.157761 L411.978907,205.064754 L414.593351,204.846654 L414.593351,201.36257 L417.205033,201.36257 L417.205033,197.878485 L420.468257,197.878485 L420.468257,176.109861 C420.468257,176.109861 420.468257,172.807987 424.013564,172.807987 L424.860632,146.277794 L425.948373,172.807987 C425.948373,172.807987 429.529084,173.133757 429.393807,176.546061 C429.272333,179.591184 429.393807,196.139204 430.699648,196.357304 L430.699648,198.314686 L432.877891,197.878485 L432.877891,201.79877 L435.489574,201.79877 L435.489574,204.628554 L437.885917,204.628554 L437.885917,211.812062 L440.2795,211.812062 L440.2795,228.790761 L442.673082,228.790761 L442.673082,331.996405 L443.85745,330.812038 L445.061143,317.311901 L445.061143,284.433962 L457.691639,284.433962 L457.691639,276.126822 L470.755575,276.126822 L470.755575,292.964723 L481.028378,292.964723 L481.028378,313.905118 L486.820461,313.905118 L488.606675,299.06049 L488.606675,292.136493 L504.715734,292.136493 L504.715734,335.312083 L507.032015,335.312083 L507.032015,323.573314 L510.165482,316.530605 L513.290667,322.399989 L513.290667,338.829297 L516.032106,338.829297 L516.032106,328.487474 L519.411281,328.487474 C519.411281,328.487474 519.899936,320.050579 519.554841,318.838604 C520.176013,319.020814 522.680026,318.96836 524.921766,318.880015 L524.921766,303.024947 L529.490831,303.024947 L529.490831,306.072831 L533.761733,306.072831 L533.761733,302.108373 L539.551055,302.108373 L539.551055,304.849812 L551.74259,304.849812 L551.74259,301.19456 L556.010731,301.19456 L556.010731,318.692283 L561.667536,318.692283 L563.757435,310.998034 L566.374639,318.692283 L566.374639,299.670619 L569.585408,299.670619 L569.585408,290.176351 L592.005573,290.176351 L593.485343,336.874676 L593.485343,322.0052 L597.792135,295.797267 L602.096166,322.0052 L604.1695,337.655972 L604.1695,329.235641 L607.217383,329.235641 L607.217383,332.283525 L609.657899,332.283525 L609.657899,334.417596 L614.837092,334.417596 L614.837092,337.655972 L617.884976,337.655972 L617.884976,319.785546 L624.00559,319.785546 L624.00559,297.575199 L640.768949,297.575199 L640.768949,302.108373 L643.181857,302.108373 L643.181857,311.726875 L644.344139,310.995273 C644.344139,310.995273 645.495378,311.014598 647.300917,311.036684 L647.300917,308.877767 L660.558107,308.877767 L661.665173,295.797267 L661.665173,281.250801 L670.157283,281.250801 L670.157283,295.797267 L674.577267,295.797267 L674.577267,343.254801 L678.765346,343.254801 L680.722728,334.130476 L682.680109,313.791927 L682.680109,305.186625 L688.938761,298.143916 L692.795549,301.448551 L692.795549,169.699366 L703.245041,169.699366 L703.245041,168.19475 L695.484533,168.19475 L693.604453,167.250569 L693.447089,165.370488 L695.172567,164.130905 L703.245041,164.130905 L704.572969,111 L705.826355,164.117101 L713.50404,164.274465 L715.229518,165.685215 L715.229518,167.250569 L713.076122,168.247204 L705.980958,168.191989 L706.141083,170.072069 L715.229518,170.176978 L715.229518,307.232351 C717.057144,306.567007 719.207779,306.21639 721.645534,306.514553 L721.441237,233.84572 L737.696616,220.525033 L751.229882,234.055538 L751.229882,318.639829 C752.563331,317.946877 754.18666,317.328466 756.006004,317.085519 L756.006004,224.047768 L774.425822,224.276912 L774.425822,339.803846 L778.912063,339.235129 L779.908699,326.698499 L779.908699,296.82151 L794.43584,296.82151 L794.43584,337.355049 C795.55671,338.056283 796.82114,339.367646 797.514092,341.835769 L799.846938,341.120731 L799.846938,346.912814 C799.846938,346.912814 810.98386,345.571083 816.864288,352.807045 C818.023808,353.290179 819.194372,353.828528 820.37874,354.474547 C833.288073,361.514495 834.856187,372.861236 834.856187,372.861236 L838.213276,366.583258 L835.242694,366.599823 L834.461398,362.298552 L837.981372,362.339964 L837.981372,358.775817 L840.482624,358.828272 L840.482624,345.38059 L841.680796,340.781157 L840.482624,334.36238 L840.673117,328.537168 L838.942118,327.187154 L838.942118,324.368414 L840.245199,317.165581 L838.942118,314.377209 L838.942118,308.993719 L837.404372,307.712724 L837.404372,302.842737 L840.093357,290.590465 L838.428616,287.208529 L838.417573,283.85144 L837.108971,283.125359 L837.108971,280.223796 L838.635673,278.421017 L837.763272,277.391252 L837.763272,274.680182 L842.785102,268.101281 L842.785102,269.992405 L841.539997,272.604087 L842.409638,273.617288 L842.484178,274.680182 L843.282039,275.941851 L843.282039,278.120094 L841.101036,279.205074 L843.282039,279.351395 L844.00812,280.295576 L844.00812,282.98456 L840.993366,283.533952 L842.627738,285.811583 L843.497379,295.797267 L843.497379,298.442079 L846.111822,298.803739 L844.880522,295.247875 L848.510926,297.351577 L850.252969,293.795713 L850.614629,297.569677 L854.753014,295.463214 L852.21035,298.439318 L856.638616,298.585638 L853.229072,300.617561 L856.638616,301.630761 L852.936431,302.141502 L852.721092,305.553807 L850.683648,307.801069 L853.198704,311.16368 L856.682788,311.16368 L860.600312,318.764063 L864.156177,315.859739 C864.156177,315.859739 867.786581,320.503344 868.004682,320.503344 C868.225543,320.503344 861.837135,327.982254 861.837135,327.982254 L863.217517,341.338831 L861.472714,341.844051 L861.036513,343.660634 L859.150911,344.312174 L859.079131,345.764336 L856.296281,345.70636 L856.103028,347.865277 L861.111054,349.027559 L863.142976,351.349362 L863.142976,359.228583 L866.141166,359.286559 L866.094233,362.408983 L869.266351,362.293031 L869.266351,366.205033 L866.094233,366.133254 C866.094233,366.133254 876.85017,369.722247 876.712132,383.813187" id="skyline" stroke="#FFFFFF" stroke-width="2"></path>
</g>
</svg>
<a href="http://www.christianjuth.com" target="_blank" class="brand">Christian Juth</a>
# vars
selector = "#skyline"
animationTime = 10
# animate
TweenMax.fromTo(selector, animationTime, {
drawSVG:"0%"
},{
drawSVG: "100% 0%",
easing: Linear.easeNone,
onComplete: ->
$("#skyline-shadow").fadeIn(3000)
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
html,
body{
height: 100%;
margin: 0;
padding: 0;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
body{
background: #41295a;
background: -webkit-linear-gradient(to top left, #41295a , #2F0743);
background: linear-gradient(to top left, #41295a , #2F0743);
}
svg{
width: 90vw;
}
#skyline-shadow{
display: none;
}
.brand,
.brand:visited{
position: absolute;
padding: 0;
margin: 0;
bottom: 5px;
right: 10px;
text-decoration: none;
color: rgba(255,255,255,0.4);
font-size: 14px;
font-family: 'Pacifico', cursive;
}
.brand:hover{
text-decoration: underline;
}
<link href="//fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment