Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

svg-wonderland/index.html

Go to file
 
 
Cannot retrieve contributors at this time
403 lines (371 sloc) 28 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <stroutdated</str browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="weather-container">
<svg id="snow" viewBox="0 0 1000 1000">
<circle class="thin snowflake " cx="245" cy="-10" r="10"></circle>
<circle class="thick snowflake " cx="120" cy="-10" r="10"></circle>
<circle class="thickest snowflake " cx="340" cy="-10" r="10"></circle>
<circle class="thin snowflake " cx="482" cy="-10" r="10"></circle>
<circle class="thick snowflake " cx="831" cy="-10" r="10"></circle>
<circle class="thin snowflake " cx="625" cy="-10" r="10"></circle>
<circle class="thin snowflake " cx="40" cy="-10" r="10"></circle>
<circle class="thick snowflake" cx="306" cy="-10" r="10"></circle>
<circle class="thin snowflake " cx="107" cy="-10" r="10"></circle>
<circle class="thick snowflake" cx="990" cy="-10" r="10"></circle>
<circle class="thin snowflake" cx="980" cy="-10" r="10"></circle>
<circle class="thick snowflake" cx="160" cy="-10" r="10"></circle>
<circle class="thin snowflake" cx="790" cy="-10" r="10"></circle>
<circle class="thickest snowflake" cx="300" cy="-10" r="10"></circle>
<circle class="thi snowflake" cx="801" cy="-10" r="10"></circle>
<circle class="thin snowflake" cx="897" cy="-10" r="10"></circle>
<circle class="thick snowflake" cx="945" cy="-10" r="10"></circle>
<circle class="thin snowflake" cx="120" cy="-10" r="10"></circle>
<circle class="thickest snowflake" cx="860" cy="-10" r="10"></circle>
<circle class="thin snowflake" cx="240" cy="-10" r="10"></circle>
</svg>
</div>
<header>
<svg class="hidden" version="1.1" id="title-svg" xmlns="http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<path class="stwhite" d="M59.4,67.4c2.2-6.8-0.7-14.8-6-19.3s-12.6-5.9-19.4-5c-6.1,0.8-12,3.5-16.1,8.3s-6.1,11.7-4.3,17.9
c2.3,8,9.9,12.7,16.4,17.4c5.4,3.9,10.4,8.3,15.1,13.1c4,4.2,7.8,8.7,10,14.2c2.2,5.5,2.5,12-0.2,17.2c-3,5.6-9.1,8.8-15.3,9.3
c-6.1,0.5-12.2-1.4-17.8-3.8c-4.3-1.9-8.6-4.2-11.8-7.7c-3.2-3.5-5.3-8.6-4.4-13.4"/></path>
<path class="stwhite" d="M62.2,46.3c0-2.1,2.7-3.9,5.1-3.3c10.4,30.7,20.9,61.5,31.3,92.2c0.8,2.3,2,4.9,4.7,5.4
c10-21.6,11.9-45.2,17.1-68c2.2-9.7,5.5-19.8,14.2-26.4"/></path>
<path class="stwhite" d="M181.9,46.5c-12.3-6.9-27.9-3.8-37.8,7.5c-3.7,4.2-6.6,9.5-8.4,15.3c-2.3,7.3-2.7,15.3-3.1,23.1
c-0.5,10.5-0.9,22,4.2,30.5c3.9,6.6,10.4,10.1,16.7,12.8c6.1,2.7,12.4,4.9,18.9,4.8c6.5-0.1,13.1-2.9,17.3-9
c6-8.7,5.3-21.4,4.4-32.7c-10.8-0.4-21.7-0.8-32.5-1.2"/></path>
</svg>
<h1 class="hidden title">Winter Wonderland</h1>
</header>
<div class="container row">
<div class="row intro col-xs-12">
<h2 class="col-xs-12 "><span class="accent">S</span>calable</h2>
<h2 class="col-xs-4 col-xs-offset-4"><span class="accent">V</span>ector</h2>
<h2 class="col-xs-4 col-xs-offset-8"><span class="accent">G</span>raphics</h2>
</div>
<div class="explanation col-xs-12 row">
<div class="col-sm-6 intro-p">
<p>The images we have used so far have been mainly raster types (JPEGs and PNGs), just a group of pixels positioned to look like an image. We can make them pretty responsive by optimizing them for the web. But this leads to having multiple iterations of the same image. SVGS are images that created through vectors that have magnitude and direction instead a pixels grouped together. SVGs are written in an XML based format similar to HTML. For a computer, SVGs are easy to read and provide a lot more information, which can be used to make interesting animations and effects. However, SVGs are most prized for their <a href="http://blog.teamtreehouse.com/scalable-web-design">scalability</a> and small file size. There's no need to have the same picture twice, as the computer can resize without losing any quality.
</p>
</div>
<div class="col-sm-6">
<svg version="1.1" id="sledder" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="510 200 510 670" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<path class="st2" d="M650.7,382c0,0,8.7,3,14,1.3c5.3-1.7,12.3,1.8,20.3,7.8s15.2,5.7,18,9.2s7.3-9.3,7.3-9.3s-0.5-3-0.8-3.8
c-0.3-0.8,0-3.3,0-3.3s5.3,1.3,6.8-0.5c1.5-1.8-4.5-8.2-4.5-8.2c0-2.5-1.2-5-1.2-5S646.5,378.7,650.7,382z"/>
<path class="st2" d="M679.7,376.3c0,0-9.2,4-1.5,7.3"/>
<path class="st2" d="M710.7,370.2c0,0,5.5-1,7.3-2.2s3-6.3,1.5-8s-4-6.8-5-10.7c-1-3.8,4-2,3.8-4c-0.2-2-0.7-6.5-1.8-5.7
c0,0-0.9,0.1-2.4,0.3c-10,1.3-47.6,6.5-54,8.2c-9.3,2.5-42.2,12.7-42.2,12.7s5.5,6.8,7.2,6.5c1.7-0.3-8.2,15.8-2,15.7l3,2.6
c24.5-3.6,24.5-3.6,24.5-3.6"/>
<path class="st2" d="M714.2,340l-3.7-8.6c0,0-22.2-28.4-29.2-28.4s-45-4.2-57.8,16.2c-12.8,20.3-5.5,41.7-5.5,41.7"/>
<path class="st2" d="M710.3,391c0,0,13,7.8,9.9,11s-4.9,10.7-10.7,20.7s-41.2-33-47-33.2s-19.7-1.7-23-1.7s-4.3-0.5-9.3,0
S520,392.3,519.7,382c-0.3-10.3,8.7-19.7,13.7-21.2s34,10.8,52.7,7.5c18.7-3.3,37,5.4,37,5.4"/>
<path class="st2" d="M615.9,388.4c-18.1-2.9-42.2,30.6-42.2,30.6s-19.3,26.3-16.3,25.7c0,0-7.7,30.3,1.3,34.3l-4.4,12
c0,0-2,5.7,2,8.3"/>
<path class="st2" d="M600,428.7"/>
<path class="st2" d="M764.3,464.3"/>
<path class="st2" d="M602.3,422.7c0,0,44-43.4,59.7,14.6"/>
<path class="st2" d="M653.7,437.3c0,0-33.7,16.7-21.5,24.7c12.2,8,47.5,21,47.5,21s-19,11.7-21.3,26.3c-1.1,7-57-22-73.5-30.7
c-16.5-8.7,15.1-45,15.1-45"/>
<path class="st2" d="M658.3,509.3c0,0,2.7-0.3,3.7,6c1,6.3,0.7,17.7,0,20.3c-0.7,2.7,10,9.3,13.3,10H690c0,0,13.3,7.7,17.3,2
c0,0,8.1-2.7,9.2-7.3c1.1-4.7-3.6-2.3-3.6-6c0-3.7,0.7-15.3,0.7-15.3s-1.7,11,10.3,11.3c12,0.3,4.3-4.7,4.3-4.7l-4.7-3
C725.3,518,713,508,713,508s-16-6.7-14.3-10.3c3.3-7.3-19-14.7-19-14.7"/>
<path class="st2" d="M689,499.3c0,0-23.8,3-19.9,7.7"/>
<path class="st2" d="M701,424.2"/>
<path class="st2" d="M689,485c0,0-11-27.3,12-60.8"/>
<path class="st2" d="M818.7,559.7c0,0-20-34.7-23-32.7c0,0,2.3-11.2,0-10.6c-2.3,0.6-26.3-17.7-27.3-15.4c0,0-59.3-3.3-59.3,2.2"/>
<path class="st2" d="M730.7,529.8c0,0,96.9,47.8,105.9,84.2s-75,20-75,20s-144.7-21.7-197-76.3c0,0-21.3-21.3-20.7-23
c0.7-1.7-11.3-19.8,16.3-24.3c27.7-4.4,96,6.6,98,9.6"/>
<path class="st2" d="M822.3,632.3c0,0,10-3.7,6-18c-9.5-33.9-103.3-74.7-103.3-74.7"/>
<path class="st2" d="M544,534.7"/>
<path class="st2" d="M539.7,534.7c0,0-12.3-14.2-1.7-24.3c10.7-10.1,41.7-14.4,84.3-10.4"/>
<path class="st2" d="M812.3,578.2c0,0,37-4.8,40,0c0,0,6.3,4,2.3,10.3c0,0-15.5,21.1-18.8,18.5"/>
<path class="st2" d="M821.8,560.5c0,0,24,0.5,29,15.5"/>
<path class="st2" d="M803.7,538.8c0,0-13.3-0.3-11.2,4.2"/>
<path class="st2" d="M798,531.2c0,0-10.6-2.5-8.6,2.3"/>
<path class="st2" d="M539.8,388.3c0,0,8.2-24.5,14-23.2c5.8,1.3,20.4,3.6,20.4,3.6s-11.9,16.6-8.7,19.5"/>
<path class="st2" d="M600,367.8c0,0-14,16.1-8.5,20.5"/>
<path class="st2" d="M619,388.3c0,0,3.5-6.8,4.2-5.3"/>
<path class="st2" d="M656.7,388.3c0,0,0.3-3.1,2.2-3.8"/>
<path class="st2" d="M675.1,397.2c-1.1,1.3,5.6-7.3,7.7-6.7"/>
<path class="st2" d="M705.3,422.2c1.5-4.8-2-20-2-20"/>
<path class="st2" d="M796.8,565.8"/>
<path class="st2" d="M796.8,565.8c0,0,15.1-8,21.9-4"/>
<path class="st2" d="M707.7,397.1c0,0-8-2.4-6.2-6.4"/>
</svg>
</div>
</div>
<div class="compare-img-types margin-top-25 row col-xs-12">
<div class="row">
<div class="compare-img col-xs-6 col-md-offset-2 col-md-4 margin-top-25">
<img src="img/snowman.jpg">
<h3 class="align-center" style="margin-top: 55px !important;">JPG</h3>
</div>
<ul class="attr-list col-xs-6">
<li class="attr-list-item">Raster: Not very Responsive</li>
<li class="attr-list-item">Lossy: loses data on compression</li>
<li class="attr-list-item">No transparancy</li>
<li class="attr-list-item accent">Small File Size</li>
<li class="attr-list-item accent">Best for Photos</li>
</ul>
</div>
<div class="row">
<div class="compare-img col-xs-6 col-md-offset-2 col-md-4">
<embed src="img/snowman.png"/>
<h3 class="align-center">PNG</h3>
</div>
<ul class="attr-list col-xs-6">
<li class="attr-list-item">Raster: Not very Responsive</li>
<li class="attr-list-item accent">Losseless: keeps data on compression</li>
<li class="attr-list-item accent">Transparancy</li>
<li class="attr-list-item">Variable File Size</li>
<li class="attr-list-item accent">Best for logos, custom art etc.</li>
</ul>
</div>
<div class="row">
<div class="compare-img col-xs-6 col-md-offset-2 col-md-4">
<embed src="img/snowman.svg"/>
<h3 class="align-center accent">SVG</h3>
</div>
<ul class="attr-list col-xs-6">
<li class="attr-list-item accent">Vectors: Very Responsive</li>
<li class="attr-list-item accent">Losseless - keeps data on compression</li>
<li class="attr-list-item accent">Transparancy</li>
<li class="attr-list-item accent">Small File Size</li>
<li class="attr-list-item accent">Best for simple design, animations</li>
</ul>
</div>
</div>
<div class="html col-xs-12 margin-top-75 row">
<h2 class="col-xs-12 align-center">Integrating SVGs inside HTML</h2>
<div class="col-md-6 col-xs-12 html-p">
<p>To start using SVGs, just use them as any <code>img</code> tag or even an <code>embed</code> tag. But each comes with its own warnings
</p>
<p><code>img</code> tags can be a normal go-to, but it really limits some of funcionality of svgs. Older browswers are more likely to read an <code>img</code>. As for <code>embed</code> tags, they also limit functionality of an SVG and may not be recognized by older browsers</p>
<p>A few alternatives are the <code>iframe</code> and <code>object</code>. Each are block elements that has the option to include a fallback image in case something goes wrong. The fallback can be an SVG or to play it even more safe a raster image. Overall, <code>object</code>tags provide more functionality.
</p>
</div>
<div class="col-sm-6 col-xs-12 code-snippet">
<pre>
&lt<span class="tag">embed</span> <span class="attr">type=</span><span class="quote">image/svg+xml"</span> <span class="attr">src=</span><span class="quote">"yourSVG.svg"</span> /&gt
</pre>
<pre>
&lt<span class="tag">img</span> <span class="attr">src=</span>"yourSVG.svg" <span class="attr">alt=</span> <span class="quote">"image description."</span> /&gt
</pre>
</div>
<div class="col-sm-6 col-xs-12 code-snippet">
<pre>
&lt<span class="tag">iframe </span> <span class="attr">src=</span><span class="quote">yourSVG.svg"</span>&gt
&lt<span class="tag">img</span> <span class="attr">src=</span><span class="quote">yourfallback.png"</span> <span class="attr">alt=</span> <span class="quote">"image description."</span> /&gt
&lt/<span class="tag">iframe</span>&gt
</pre>
<pre>
&lt<span class="tag">object</span> <span class="attr">data=</span><span class="quote">yourSVG.svg"</span>&gt
&lt<span class="tag">img</span> <span class="attr">src=</span>"yourfallback.png" <span class="attr">alt=</span> <span class="quote">"image description."</span>/&gt
&lt/<span class="tag">object</span>&gt
</pre>
</div>
</div>
<div class="svg-inline cols-xs-12 row">
<h3 class="align-center"> Create Inline </h3>
<div class="col-sm-6 col-md-5 col-md-offset-1">
<p>
Another method is to make an SVG from scratch inside HTML. A reason to do this would be create some simple SVGs quickly without Photoshop or Illustrator, or have images that are not cached by your computer. But more importantly, it helps for understanding how SVGs work and what vector images are.
</p>
</div>
<div class="col-sm-6 col-md-5">
<p >
The best way to imagine coding an SVG is to imagine drawing on Illustrator or another drawing software. All the same tools are at your side. You can draw paths with brushes and pencils. Line tools and shapes help creating go faster. There are even ways to mask images just as you could do in Photoshop.
</p>
</div>
<div class="col-sm-6 col-md-5 col-md-offset-1 margin-top-25">
<p>
Think of the following code as the canvas on which you can draw on where <code class="attr">viewBox</code> are the dimensions for your canvas. In this case we want to make our svg canvas 200 units wide and 200 units long. The units are not a measurement of pixels or inches. They just define where the computer should draw.
</p>
</div>
<div class="col-sm-6 col-md-5 code-snippet">
<pre>
&lt<span class="tag">svg</span> <span class="attr">class=</span><span class="quote">"yourClass"</span> <span class="attr">version=</span><span class="quote">"1.1"</span> <span class="attr">id=</span><span class="quote">"yourID"</span> <span class="attr">xmlns=</span><span class="quote">"http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink"</span> <span class="attr">x=</span><span class="quote">"0px"</span> <span class="attr">y=</span><span class="quote">"0px"</span>
<span class="attr">viewBox=</span><span class="quote">"0 0 200 200"</span>&gt
<span class="comment">&lt!-- Insert code here --&gt</span>
&lt<span class="tag">svg</span>&gt</pre>
</div>
</div>
<div class="col-xs-12 example-line row">
<h2 class="align-center">Drawing with Code</h2>
<div class="col-xs-8 col-md-5 code-snippet">
<pre>
&ltsvg&gt
&ltline class="basic-stroke" x1="0" y1="0" x2="0" y2="200"&gt&lt/line&gt
&lt/svg&gt
</pre>
</div>
<svg class="col-xs-4 col-md-2 margin-top-50" version="1.1" xmlns="http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200">
<line class="basic-stroke" x1="75" y1="0" x2="75" y2="200"></line>
</svg>
<div class="col-xs-12 col-md-5">
<p>Our first tool we will use is the line tool. Since our view box is a 200 x 200 grid, this line starts coordinate (0,0) and moves to (0,200), creating a vertical line. For every svg element, place the code inside the <code>svg</code> tag. </p>
</div>
</div>
<div class="example-shapes col-xs-12 row">
<svg id="rect" class="col-xs-12 col-sm-6 col-md-5" version="1.1" xmlns="http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100">
<rect class="thin-stroke" x="10" y="10" width="80" height="80"></rect>
</svg>
<div class="col-xs-12 col-sm-6 col-md-7 code-explain remove-padding-md row">
<pre class="code-snippet col-sm-12 col-md-9">
&lt<span class="tag">rect</span> <span class="attr">x=</span><span class="quote">"10"</span> <span class="attr">y=</span><span class="quote">"10"</span> <span class="attr">width=</span><span class="quote">"80"</span> <span class="attr">height=</span><span class="quote">"80"</span>&gt&lt/<span class="tag">rect</span>&gt
</pre>
<ul class="code-list col-sm-12 col-md-8 col-md-offset-4 margin-top-25">
<li><code>x</code> define starting x coordinate</li>
<li><code>y</code> define starting y coordinate</li>
<li><code>width</code> define width of rectangle</li>
<li><code>height</code> define width of rectangle</li>
</ul>
</div>
<svg id="circle" class="col-xs-12 col-sm-6 col-md-5 margin-top-75" version="1.1" xmlns="http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200">
<circle class="basic-stroke" cx="100" cy="100" r="80"></circle>
</svg>
<div class="col-xs-12 col-sm-6 col-md-7 margin-top-75 code-explain row">
<pre class="code-snippet col-sm-12 col-md-9">
&lt<span class="tag">circle</span> <span class="attr">x=</span><span class="quote">"10"</span> <span class="attr">y=</span><span class="quote">"10"</span> <span class="attr">r=</span><span class="quote">"80"</span>&gt&lt/<span class="tag">circle</span>&gt
</pre>
<ul class="code-list col-sm-12 col-md-8 col-md-offset-4 margin-top-25">
<li><code>x</code> x coordinate of center</li>
<li><code>y</code> y coordinate of center</li>
<li><code>r</code> the radius of the circle</li>
</ul>
</div>
<svg id="polygon" class="col-xs-12 col-sm-6 col-md-5 margin-top-75" version="1.1" xmlns="http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100">
<polygon class="basic-stroke" points="0,50 25,10 75,10 100,50 75,90, 25,90">
</polygon>
</svg>
<div class="col-xs-12 col-sm-6 col-md-7 margin-top-75 code-explain row">
<pre class="code-snippet col-sm-12 col-md-9">
&lt<span class="tag">polygon</span> <span class="attr"> <span class="attr">points=</span><span class="quote">"0,50 25,10 75,10 100,50 75,90, 25,90"</span>&gt&lt/<span class="tag">polygon</span>&gt
</pre>
<ul class="code-list col-sm-12 col-md-8 col-md-offset-4 margin-top-25">
<li><code>points</code>define points to connect a polygon</li>
<li>Can create any shape with straight edges</li>
</ul>
</div>
<svg id="path" class="col-xs-12 col-sm-6 col-md-5 margin-top-75" version="1.1" xmlns="http://www.w3.org/200/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100">
<path class="basic-stroke" d="M10,100 C 30,40 80,80 90,0">
</path>
</svg>
<div class="col-xs-12 col-sm-6 col-md-7 margin-top-75 code-explain row">
<pre class="code-snippet col-sm-12 col-md-9">
&lt<span class="tag">path</span> <span class="attr"> <span class="attr">d=</span><span class="quote">"M10,100 C 30,40 80,80 90,0"</span>&gt&lt/<span class="tag">path</span>&gt
</pre>
<ul class="code-list col-sm-12 col-md-8 col-md-offset-4 margin-top-25">
<li><code>d</code>define points for path to follow</li>
<li><code>M10,100</code>represents starting point (10,100)</li>
<li><code>C10,100</code>defines curve to (90,0) with <a href="https://en.wikipedia.org/wiki/Control_point_(mathematics)">control points</a> (30,40) and (80,80)</li>
</ul>
</div>
</div>
<div class="styling-with-css">
<h1 class="align-center">Combining With CSS</h1>
<p class="col-md-5 col-md-offset-1 col-sm-6">
When using SVGs, you can use the same classes as you would for any element in HTML.
You can even set an SVG as a <code>background-image</code>, although this is usually not recommended. Play with the <code>opacity</code>, <code>width</code>, and <code>position</code> to get the desired image.
</p>
<p class="col-md-5 col-md-offset-1 col-sm-6">
There are also CSS styles that can only be applied to SVGs, including <code>fill</code> that takes in a color,<code>stroke</code> that requires a color, and <code>stroke-width</code> that defines the thickness of a line and requires a number. And also, don't forget about CSS animations!!!
</p>
<svg version="1.1" id="light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 200 1200 600">
<g>
<path class="st0 second-light" d="M399.2,509.9c0.4,29.2-15.1,83.9-35.2,84.2c-20.1,0.3-37.1-53.9-37.5-83.1c-0.4-29.2,15.7-43.5,35.8-43.8
C382.3,466.8,398.7,480.7,399.2,509.9z"/>
<path class="st0 fill-grey" d="M389.5,477.4c-2.3-2-12.1-10.2-26.9-10.2c-15.4,0-25.3,8.9-27.5,10.9c-0.2-17.5-0.5-34.9-0.7-52.4l54.4-0.8
L389.5,477.4z"/>
</g>
<path class="st0" d="M73.5,387.8c232.7,61.8,395.9,37.5,503.8,1.9c75.8-25,115-52.4,198.1-67.3c161.2-28.9,305.6,22.2,403.8,71.2"/>
<g>
<path class="st0 first-light" d="M164.3,495.2c-5.7,28.6-32.3,78.9-52,75s-25-60.5-19.3-89.1c5.7-28.6,24.4-39.3,44.1-35.3
S170,466.6,164.3,495.2z"/>
<path class="st0 fill-grey" d="M162.1,461.5c-1.8-2.5-9.7-12.5-24.2-15.5c-15.1-3.2-26.6,3.4-29.2,4.9c3.4-17.1,6.8-34.2,10.2-51.4l53.3,10.6
L162.1,461.5z"/>
</g>
<g>
<path class="st0 first-light" d="M616.6,466.9c8.4,28,8.4,84.8-10.8,90.6c-19.2,5.8-50.5-41.7-58.8-69.7c-8.4-28,3.2-46.1,22.4-51.9
S608.2,439,616.6,466.9z"/>
<path class="st0 fill-grey" d="M597.8,438.4c-2.8-1.3-14.4-6.5-28.6-2.4c-14.8,4.3-21.9,15.5-23.5,18c-5-16.7-10-33.4-15-50.2l52.1-15.6
L597.8,438.4z"/>
</g>
<g>
<path class="st0 second-light" d="M825.1,400.4c5.2,28.7-1.1,85.2-20.9,88.8c-19.8,3.6-45.5-47.1-50.6-75.9c-5.2-28.7,8.3-45.5,28.1-49
C801.4,360.7,819.9,371.6,825.1,400.4z"/>
<path class="st0 fill-grey" d="M809.9,369.9c-2.6-1.6-13.6-8.1-28.2-5.6c-15.2,2.6-23.5,12.9-25.3,15.3c-3.1-17.2-6.2-34.4-9.3-51.5l53.5-9.7
L809.9,369.9z"/>
</g>
<g>
<path class="st0 first-light" d="M1038.6,426.3c-7.3,28.3-36.6,77-56,72c-19.4-5-21.7-61.8-14.4-90.1c7.3-28.3,26.5-37.9,46-32.9
C1033.6,380.3,1045.8,398,1038.6,426.3z"/>
<path class="st0 fill-grey" d="M1037.3,392.4c-1.7-2.6-9-13-23.3-16.8c-14.9-4-26.8,2-29.4,3.3c4.3-16.9,8.7-33.8,13-50.7l52.7,13.5
L1037.3,392.4z"/>
</g>
</svg>
</div>
<div class="more-efficient col-xs-12 row">
<h2 class=" align-center col-xs-12">An Easier Way</h2>
<div class="col-xs-12 col-sm-6 margin-top-25 margin-top-75-md">
<p>
For those who do not want to spend their creating coding out an image, there is a way to create SVGs in Adobe Illustrator. Use the pen tool and the shape tool to create all the same pictures and shapes as you could inside the HTML. Illustrator also has an animation tool for creating SVGs Afterwards save the image as an SVG, and you will be given the option to see the HTML and CSS to create it, which you can copy and paste into your code or save as an image and embed in your page using <code>embed</code>
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img src="img/adobe-icon.png" alt="Adobe Illustrator">
</div>
</div>
<div class="adding-javascript col-xs-12 row">
<h2 class="col-xs-12 align-center">Utilizing JavaScript alongside SVG</h2>
</div>
<div class="col-xs-12 row">
<div class="col-md-6">
<p>Since SVGs are vectors, they can be manipulated by the computer. This is where JavaScript comes in. Using code, we can change the direction of vectors of an SVG, which would be useful for complex animation. There is the possiblity to create SVGs from scratch using JavaScript. Some JavaScript libraries, like <a href="http://snapsvg.io/">Snap.svg</a> and <a href="https://bonsaijs.org/">Bonsai.svg</a> specialize in creating SVG animations, including images as well as interactive charts and graphs.
</p>
<p>There is one particular Javascript module that draws out SVGs onto the screen. <a href="https://maxwellito.github.io/vivus/">Vivus.js</a> is a very compact JavaScript module (about 31KB) that can make images come to life. The following module was created using Snap.svg to create a snowflake and Vivus.js to draw the shape out. Each individual snowflake is randomly generated and is unique in its structure.
</div>
<div class="col-xs-12 col-md-6">
<svg id="snowflake">
</svg>
<h4>Using random number generators, JavaScript, and the beauty of symmetry, form a <span class="bold">unique individual snowflake.</span></h4>
<button class="btn btn-primary col-xs-12" id="genButton">Let It Snow</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.0/vivus.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
</body>
</html>