snapsvg
Version:
JavaScript Vector Library
188 lines (170 loc) • 10 kB
HTML
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Snap! SVG</title>
<link href="css/screen.css?__inline=true" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<svg id="ad" width="400" height="400">
<g id="meshAContainer">
<rect x="0" y="0" width="400" height="400" fill="#efefef"/>
</g>
<g id="screen1">
<text id="text1" x="200" y="130" width="400"
class="base-font"
font-weight="100"
font-size="40"
fill="#686868"
text-anchor="middle">
Screens
</text>
<text id="text2" x="200" y="300" width="400"
class="base-font"
font-weight="100"
font-size="40"
fill="#686868"
text-anchor="middle">
SVG
</text>
</g>
<text id="text3"
class="base-font"
font-weight="100"
font-size="50"
fill="white"
text-anchor="middle"
opacity="0">
<tspan x="200" y="180">Make SVG</tspan>
<tspan x="200" y="250">a Snap!</tspan>
</text>
<g id="heart" transform="translate(200, 200)">
<path id="heart-shape" fill="#0DAE8A" d="M14.803-28.95c-5.879,0-11.119,2.418-14.547,6.192c-3.428-3.774-8.668-6.192-14.547-6.192c-10.329,0-23.453,4.75-23.453,23.75s38,35.414,38,35.414s38-16.414,38-35.414S25.133-28.95,14.803-28.95"/>
</g>
<g id="burst" transform="translate(200, 200)" opacity="0">
<polygon fill="#FFFFFF" points="0.451,0.063 149.256,-214.94 227.256,-214.94 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 49.256,-214.94 77.256,-214.94 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 -78.328,-214.94 -50.744,-212.273 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 -113.661,209.06 -86.077,211.727 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-214.94 -213.41,-135.607 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-39 -213.41,10.334 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,101 -213.41,130.334 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 215.697,21.383 241.697,50.717 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 215.697,-88.617 241.697,-59.283 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 208.691,137.42 207.805,194.354 "/>
<polygon fill="#FFFFFF" points="0.451,0.063 95.256,211.727 61.923,240.194 "/>
</g>
<g id="resolve" opacity="0">
<g id="replay-btn" transform="translate(345, 10)">
<rect fill="transparent" width="48" height="49.5"/>
<path fill="#cccccc" d="M25.207,9.594V4.082L12.793,11.25l12.415,7.168v-5.792C31.57,13.466,36.5,18.912,36.5,25.5
c0,7.168-5.832,13-13,13s-13-5.832-13-13c0-0.565,0.049-1.118,0.119-1.664l-2.922-0.717C7.58,23.898,7.5,24.689,7.5,25.5
c0,8.822,7.178,16,16,16s16-7.178,16-16C39.5,17.255,33.229,10.449,25.207,9.594z"/>
</g>
<text id="text4"
font-weight="100"
fill="#02225d"
text-anchor="middle">
<tspan x="200" y="100"
class="base-font"
font-size="46">
with
</tspan>
<tspan x="200" y="160"
class="snap-font"
font-size="70">
Snap.svg
</tspan>
</text>
<g id="learn-btn" transform="translate(10, 350)">
<path fill="#0B9B87" d="M147.129,37.886c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,43.6,0,41.042,0,37.886V8.175
c0-3.156,2.558-5.714,5.714-5.714h135.702c3.156,0,5.714,2.558,5.714,5.714V37.886z"/>
<path fill="#10B29C" d="M147.129,35.425c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,41.139,0,38.581,0,35.425V5.714
C0,2.558,2.558,0,5.714,0h135.702c3.156,0,5.714,2.558,5.714,5.714V35.425z"/>
<text x="10" y="30"
fill="#FFFFFF"
class="base-font"
font-size="22.6026">
Learn More
</text>
</g>
<g id="snap-logo" transform="translate(200, 260)">
<path id="snap-logo-bottom" fill="#192350" d="M39.197,39.001c0.061,0.246,0.121,0.492,0.182,0.738c-12.801,6.518-39.257,19.54-39.257,19.54
s-31.604-14.952-38.953-18.708c6.5-3.264,13.001-6.529,19.502-9.792c6.328,3.094,12.655,6.187,18.985,9.281
c6.617-3.305,13.03-6.509,19.442-9.712C25.797,33.232,32.497,36.116,39.197,39.001z"/>
<path id="snap-logo-right" fill="#03A69A" d="M39.331-54.922c-0.436-0.191-12.519,6.201-18.125,9.588c0,11.23,0,22.46,0,34.096
C15.45-8.229-33.891,16.743-40.257,20.134c0.058,6.744,0.117,13.489,0.175,20.233c0.417,0.068,0.834,0.136,1.25,0.204
c6.5-3.264,72.753-37.591,78.221-40.492C39.369-18.255,39.35-36.588,39.331-54.922z"/>
<path id="snap-logo-top" fill="#1E2A5A" d="M39.331-54.922c-5.606,3.387-12.519,6.201-18.126,9.588c-7.193-3.185-14.386-6.371-21.719-9.617
c-7.287,3.21-14.6,6.432-21.914,9.654c-5.869-2.958-11.739-5.916-17.609-8.874c-0.039-0.239-0.078-0.478-0.117-0.717
c12.766-6.485,25.531-12.969,38.297-19.454C11.437-68.06,26.037-61.204,39.331-54.922z"/>
<path id="snap-logo-left" fill="#133F68" d="M-22.676-11.256c0-3.489,0-6.949,0-10.408c0-7.878,0.198-15.755,0.346-23.633
c-5.869-2.958-11.788-5.916-17.658-8.874c0.003,11.317-0.018,22.635-0.015,33.952c-0.034,6.737-0.081,13.474-0.114,20.21
c5.781,2.841,52.704,26.952,59.219,30.356c6.7,2.884,13.397,5.769,20.096,8.654c0.029-6.258,0.134-12.516,0.163-18.773
C33.044,16.882-15.406-7.438-22.676-11.256z"/>
</g>
<g id="adobe-logo" transform="translate(350, 340)">
<polygon fill="#787878" points="22.447,0 35.605,0 35.605,31.389 "/>
<polygon fill="#787878" points="13.172,0 0,0 0,31.389 "/>
<polygon fill="#787878" points="17.809,11.565 26.195,31.387 20.698,31.387 18.189,25.074 12.049,25.074 "/>
<g>
<path fill="#787878" d="M38.294,0c0.843,0,1.515,0.678,1.515,1.524c0,0.859-0.672,1.538-1.521,1.538S36.75,2.383,36.75,1.524
C36.75,0.677,37.438,0,38.288,0H38.294z M38.287,0.259c-0.675,0-1.217,0.567-1.217,1.27c0,0.707,0.542,1.271,1.224,1.271
c0.672,0.007,1.212-0.566,1.212-1.271c0-0.702-0.54-1.27-1.212-1.27H38.287z M38.01,2.414H37.7V0.716
c0.144-0.025,0.285-0.049,0.512-0.049c0.271,0,0.442,0.053,0.556,0.141c0.094,0.068,0.146,0.188,0.146,0.346
c0,0.22-0.142,0.363-0.33,0.411v0.017c0.149,0.026,0.245,0.161,0.277,0.414c0.042,0.265,0.077,0.367,0.105,0.419h-0.311
c-0.039-0.052-0.075-0.207-0.112-0.435c-0.035-0.201-0.146-0.286-0.356-0.286h-0.179v0.721L38.01,2.414L38.01,2.414z M38.01,1.458
h0.185c0.221,0,0.406-0.074,0.406-0.271c0-0.15-0.107-0.285-0.392-0.285c-0.093,0-0.152,0-0.197,0.005v0.552L38.01,1.458
L38.01,1.458z"/>
</g>
<path fill="#787878" d="M4.782,44.511L4.366,42.05c-0.123-0.715-0.271-1.823-0.382-2.59H3.941c-0.124,0.771-0.294,1.914-0.42,2.596
l-0.449,2.456L4.782,44.511L4.782,44.511z M2.847,46.12l-0.541,2.732h-2.01l2.501-11.373h2.457l2.271,11.373H5.507l-0.53-2.732
H2.847z"/>
<path fill="#787878" d="M12.086,43.77c0-0.147,0-0.329-0.03-0.492c-0.078-0.561-0.381-1.067-0.863-1.067
c-0.818,0-1.125,1.188-1.125,2.575c0,1.599,0.437,2.51,1.096,2.51c0.309,0,0.662-0.157,0.854-0.826
c0.045-0.131,0.069-0.314,0.069-0.523L12.086,43.77L12.086,43.77z M14.148,37.174v9.318c0,0.743,0.037,1.647,0.067,2.359h-1.779
l-0.119-0.947h-0.041c-0.298,0.583-0.948,1.086-1.721,1.086c-1.702,0-2.547-1.874-2.547-4.238c0-2.877,1.263-4.275,2.629-4.275
c0.711,0,1.182,0.346,1.415,0.852h0.034v-4.152h2.062C14.148,37.177,14.148,37.174,14.148,37.174z"/>
<path fill="#787878" d="M18.428,47.415c0.782,0,0.982-1.474,0.982-2.697c0-1.159-0.2-2.67-1.018-2.67
c-0.869,0-1.054,1.511-1.054,2.67c0,1.402,0.232,2.697,1.071,2.697H18.428z M18.387,48.989c-1.889,0-3.081-1.522-3.081-4.238
c0-2.963,1.529-4.275,3.127-4.275c1.877,0,3.05,1.592,3.05,4.232c0,3.393-1.838,4.281-3.076,4.281H18.387z"/>
<path fill="#787878" d="M24.692,45.907c0,0.204,0.035,0.399,0.078,0.525c0.206,0.693,0.561,0.863,0.837,0.863
c0.795,0,1.12-1.004,1.12-2.612c0-1.462-0.343-2.472-1.129-2.472c-0.392,0-0.72,0.423-0.832,0.877
c-0.039,0.142-0.074,0.363-0.074,0.521C24.692,43.609,24.692,45.907,24.692,45.907z M22.634,37.174h2.058v4.293h0.032
c0.406-0.634,0.945-0.994,1.731-0.994c1.55,0,2.331,1.758,2.331,4.049c0,2.91-1.168,4.467-2.67,4.467
c-0.723,0-1.199-0.32-1.631-1.123h-0.042l-0.112,0.986h-1.765c0.03-0.688,0.069-1.616,0.069-2.359v-9.318L22.634,37.174
L22.634,37.174z"/>
<path fill="#787878" d="M33.712,43.945c0.007-1.161-0.328-1.976-0.982-1.976c-0.749,0-1.064,1.094-1.088,1.976H33.712z
M31.635,45.393c0.024,1.49,0.811,1.978,1.788,1.978c0.623,0,1.153-0.135,1.545-0.287l0.282,1.474
c-0.548,0.238-1.393,0.383-2.201,0.383c-2.211,0-3.411-1.498-3.411-4.067c0-2.759,1.394-4.408,3.221-4.408
c1.769,0,2.748,1.458,2.748,3.85c0,0.545-0.026,0.85-0.063,1.093L31.635,45.393z"/>
</g>
</g>
<rect id="cover" width="400" height="400" fill="#efefef"/>
</svg>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47561728-1', 'codepen.io');
ga('send', 'pageview');
</script>
<!-- build:js js/vendor/require.min.js?__inline=true -->
<!-- /build -->
<!-- build:js js/main.js?__inline=true -->
<script data-main="js/main" src="./js/vendor/require.js"></script>
<!-- /build -->
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load(WebFontConfig);
</script>
</body>
</html>