Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad

hatefulcrawdad/01-circle.html

Created April 29, 2015 16:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hatefulcrawdad/76ba6a88d40864d7a02e to your computer and use it in GitHub Desktop.
Save hatefulcrawdad/76ba6a88d40864d7a02e to your computer and use it in GitHub Desktop.
Download ZIP
Code samples from my talk, "The Wonderful World of SVGs"
Raw
01-circle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Examples</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<svg class="circles" viewBox="0 0 10 5" preserveAspectRatio="xMinYMin meet">
<circle fill="purple" cx="1" cy="1" r="1" />
<circle fill="purple" cx="3" cy="1" r="1" />
<circle fill="purple" cx="5" cy="1" r="1" />
<circle fill="purple" cx="7" cy="1" r="1" />
<circle fill="purple" cx="9" cy="1" r="1" />
</svg>
<a href="#" class="number-icon">
<svg viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet">
<circle cx="16" cy="16" r="16" />
<text x="9px" y="23px">1</text>
</svg>
</a>
<svg width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMinYMin meet">
<ellipse cx="16" cy="10" rx="16" ry="10" />
<image xlink:href="path/to/image" x="0" y="30" width="12px" height="12px" />
<rect x="0" y="50" width="100" height="100" rx="10" ry="10" />
<line x1="0" y1="200" x2="100" y2="200" stroke="black" stroke-width="6" />
<polyline points="10,220 100,280 150,100 160,150" fill="none" stroke="purple" />
<polygon points="160,20 200,40 200,80 160,100 120,80 120,40" />
</svg>
</body>
</html>
Raw
02-path.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Path Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<svg width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMinYMin meet">
<path d="M0,0 L300,0 L150,200" fill="orange" />
</svg>
<svg width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMinYMin meet">
<path d="M45,30 c 50,0 50,100 100,100 50,0 50,-100 100,-100 M145,30" fill="none" stroke="orange" stroke-width="6px" />
</svg>
</body>
</html>
Raw
03-style-animate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styling Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<svg id="space" viewBox="0 0 600 400" preserveAspectRatio="xMinYMin meet">
<title>Space: The Final Frontier</title>
<desc>A spaceship flying through stars in space.</desc>
<defs>
<g id="stars">
<title>Stars</title>
<desc>Clusters of stars floating in space.</desc>
<polygon points="9,25.4 0,21.7 8.5,17.9 103.5,21.7" />
<polygon points="62.7,65.8 53.8,62 62.4,58.3 157.2,62" />
<polygon points="149.1,25.4 140.2,21.7 148.8,17.9 243.6,21.7" />
<polygon points="202.8,65.8 193.9,62 202.5,58.3 297.4,62" />
<polygon points="290.9,25.4 282,21.7 290.6,17.9 385.4,21.7" />
<polygon points="344.6,65.8 335.8,62 344.3,58.3 439.3,62" />
<polygon points="441.3,25.4 432.4,21.7 441,17.9 535.9,21.7" />
<polygon points="495.2,65.8 486.2,62 494.7,58.3 589.7,62" />
</g>
</defs>
<use xlink:href="#stars" class="flying-star" x="0" y="0" />
<use xlink:href="#stars" class="flying-star" x="60" y="0" />
<use xlink:href="#stars" class="flying-star" x="-20" y="20" />
<use xlink:href="#stars" class="flying-star" x="-10" y="40" />
<use xlink:href="#stars" class="flying-star" x="0" y="60" />
<use xlink:href="#stars" class="flying-star" x="-60" y="75" />
<use xlink:href="#stars" class="flying-star" x="0" y="120" />
<use xlink:href="#stars" class="flying-star" x="-30" y="140" />
<use xlink:href="#stars" class="flying-star" x="70" y="140" />
<use xlink:href="#stars" class="flying-star" x="600" y="0" />
<use xlink:href="#stars" class="flying-star" x="660" y="0" />
<use xlink:href="#stars" class="flying-star" x="580" y="20" />
<use xlink:href="#stars" class="flying-star" x="590" y="40" />
<use xlink:href="#stars" class="flying-star" x="600" y="60" />
<use xlink:href="#stars" class="flying-star" x="540" y="75" />
<use xlink:href="#stars" class="flying-star" x="600" y="120" />
<use xlink:href="#stars" class="flying-star" x="570" y="140" />
<use xlink:href="#stars" class="flying-star" x="670" y="140" />
<g id="spaceship">
<title>Spaceship</title>
<desc>A flying spaceship.</desc>
<path fill="#E35359" d="M269,77.5l-26.7-11.4l-26.7,11.4L242.4,89l0,0L269,77.5z M226.6,77.5l15.8-6.7l0,0l15.8,6.7l-15.8,6.7L226.6,77.5z" />
<path fill="#F3825C" d="M242.3,70.8L242.3,70.8l-15.8,6.7l15.8,6.7l15.8-6.7L242.3,70.8z M242.3,80.5l-6.8-2.9l6.8-2.9l6.8,2.9L242.3,80.5L242.3,80.5z" />
<polygon fill="#E3B239" points="242.3,74.7 235.6,77.5 242.3,80.5 242.3,80.5 249.2,77.5" />
<rect x="336.4" y="42" fill="#9FA1A7" width="14" height="70.2" />
<rect x="340.7" y="42" fill="#C8C9CC" width="5.2" height="70.2" />
<polygon fill="#E9E7E8" points="365.9,113.3 372.9,105.6 327.9,105.6 321.1,113.3" />
<polygon fill="#C8C9CC" points="371.4,107.3 372.9,105.6 327.9,105.6 326.5,107.3" />
<polygon fill="#C8C9CC" points="365.9,113.3 367.4,111.7 322.4,111.7 321.1,113.3" />
<polygon fill="#E9E7E8" points="326.3,48.1 319.5,40.5 364.4,40.5 371.3,48.1" />
<polygon fill="#C8C9CC" points="320.9,42 319.5,40.5 364.4,40.5 365.9,42" />
<polygon fill="#C8C9CC" points="326.3,48.1 324.9,46.6 369.8,46.6 371.3,48.1" />
<polygon class="ship-stripe" points="303.5,105.2 303.5,50.1 296.8,48 296.8,107.3" />
<polygon class="ship-stripe" points="254.8,121.2 254.8,34.2 248,32.2 248,123.3" />
<rect x="248" y="59.7" class="ship-stripe-shadow" width="6.7" height="35.9" />
<rect x="258.2" y="16.8" fill="#C8C9CC" width="29" height="125" />
<rect x="258.2" y="24" fill="#B4B6BD" width="21.2" height="111.1" />
<rect x="286.3" y="24" fill="#E9E7E8" width="1" height="111.1" />
<polygon class="ship-stripe" points="313.7,14.5 310.3,19.3 245.1,19.3 241.7,14.5" />
<polygon fill="#E9E7E8" points="296.8,19.3 293.4,24 248.6,24 245.1,19.3" />
<polygon fill="#E9E7E8" points="293.4,135.1 296.8,139.8 245.1,139.8 248.6,135.1" />
<polygon class="ship-stripe" points="310.3,139.5 313.7,144.2 241.7,144.2 245.1,139.5" />
<rect x="254.8" y="62.8" fill="#C3C5CA" width="97.6" height="29.7" />
<polygon class="ship-stripe" points="243.2,89 243.2,66.3 254.8,62.8 254.8,92.5" />
<polygon fill="#E9E7E8" points="254.8,62.8 254.8,34.2 296.8,48 296.8,62.8" />
<polygon fill="#E9E7E8" points="254.8,121 254.8,92.5 296.8,92.5 296.8,107.3" />
<rect x="254.8" y="62.8" fill="#B4B6BD" width="97.6" height="2.8" />
<rect x="254.8" y="89.6" fill="#B4B6BD" width="97.6" height="2.8" />
<polygon fill="#D4D5D8" points="254.8,95.6 254.8,92.5 324.8,92.5 316.9,95.6" />
<polygon fill="#D4D5D8" points="254.8,62.8 254.8,59.7 316.9,59.7 324.8,62.8" />
<rect x="264.6" y="69.4" fill="#D4D5D8" width="31.6" height="16.7" />
<rect x="254.8" y="69.4" fill="#898F9A" width="4.4" height="16.7" />
<rect x="259.1" y="69.4" fill="#E9E7E8" width="4.4" height="16.7" />
<rect x="243.2" y="69.4" class="ship-stripe-shadow" width="11.5" height="16.7" />
<rect x="297.4" y="69.4" fill="#E0DEE0" width="4.4" height="16.7" />
<polygon fill="#E0DEE0" points="337.8,86.1 337.8,69.4 342.2,69.4 349.1,77.5 342.2,86.1" />
<rect x="301.3" y="69.4" fill="#515C65" width="36.7" height="16.7" />
<rect x="301.3" y="69.4" fill="#18242A" width="36.7" height="2.7" />
<rect x="301.3" y="83.3" fill="#18242A" width="36.7" height="2.7" />
<rect x="352.4" y="62.8" class="ship-stripe" width="17.5" height="29.7" />
<polygon fill="#B4B5B9" points="410.8,84.7 410.8,70.6 408,69.5 408,85.6" />
<polygon fill="#B4B5B9" points="408,85.5 408,69.7 369.8,62.8 369.8,92.5" />
<rect x="352.4" y="62.8" class="ship-stripe-shadow" width="17.5" height="2.8" />
<polygon fill="#C8C9CC" points="408,85.5 408,69.7 369.8,66.3 369.8,89" />
<polygon fill="#E0DEE0" points="408,84.7 408,70.8 369.8,74.2 369.8,81.2" />
<rect x="352.4" y="89.6" class="ship-stripe-shadow" width="17.5" height="2.8" />
</g>
</svg>
<!-- Original SVG Code -->
<!--
<svg viewBox="0 0 621.4 166.4">
<g opacity="0.1">
<polygon fill="#FFFFFF" points="9,25.4 0,21.7 8.5,17.9 103.5,21.7 "></polygon>
<polygon fill="#FFFFFF" points="62.7,65.8 53.8,62 62.4,58.3 157.2,62 "></polygon>
<polygon fill="#FFFFFF" points="11,105.2 2,101.4 10.6,97.7 105.5,101.4 "></polygon>
<polygon fill="#FFFFFF" points="62.7,145 53.8,141.3 62.4,137.5 157.2,141.3 "></polygon>
<polygon fill="#FFFFFF" points="149.1,25.4 140.2,21.7 148.8,17.9 243.6,21.7 "></polygon>
<polygon fill="#FFFFFF" points="202.8,65.8 193.9,62 202.5,58.3 297.4,62 "></polygon>
<polygon fill="#FFFFFF" points="151.1,105.2 142.2,101.4 150.8,97.7 245.6,101.4 "></polygon>
<polygon fill="#FFFFFF" points="202.8,145 193.9,141.3 202.5,137.5 297.4,141.3 "></polygon>
<polygon fill="#FFFFFF" points="290.9,25.4 282,21.7 290.6,17.9 385.4,21.7 "></polygon>
<polygon fill="#FFFFFF" points="344.6,65.8 335.8,62 344.3,58.3 439.3,62 "></polygon>
<polygon fill="#FFFFFF" points="292.9,105.2 284.1,101.4 292.6,97.7 387.5,101.4 "></polygon>
<polygon fill="#FFFFFF" points="344.6,145 335.8,141.3 344.3,137.5 439.3,141.3 "></polygon>
<polygon fill="#FFFFFF" points="441.3,25.4 432.4,21.7 441,17.9 535.9,21.7 "></polygon>
<polygon fill="#FFFFFF" points="495.2,65.8 486.2,62 494.7,58.3 589.7,62 "></polygon>
<polygon fill="#FFFFFF" points="443.3,105.2 434.5,101.4 443,97.7 537.9,101.4 "></polygon>
<polygon fill="#FFFFFF" points="495.2,145 486.2,141.3 494.7,137.5 589.7,141.3 "></polygon>
</g>
<g opacity="0.1">
<polygon fill="#FFFFFF" points="40.6,45.6 31.8,41.8 40.3,38.1 135.3,41.8 "></polygon>
<polygon fill="#FFFFFF" points="94.5,85.9 85.5,82.2 94.1,78.4 189,82.2 "></polygon>
<polygon fill="#FFFFFF" points="42.7,125.3 33.8,121.6 42.4,117.8 137.3,121.6 "></polygon>
<polygon fill="#FFFFFF" points="94.5,165.1 85.5,161.4 94.1,157.6 189,161.4 "></polygon>
<polygon fill="#FFFFFF" points="180.9,45.6 171.9,41.8 180.4,38.1 275.4,41.8 "></polygon>
<polygon fill="#FFFFFF" points="234.6,85.9 225.7,82.2 234.3,78.4 329.1,82.2 "></polygon>
<polygon fill="#FFFFFF" points="182.9,125.3 173.9,121.6 182.5,117.8 277.4,121.6 "></polygon>
<polygon fill="#FFFFFF" points="234.6,165.1 225.7,161.4 234.3,157.6 329.1,161.4 "></polygon>
<polygon fill="#FFFFFF" points="322.7,45.6 313.7,41.8 322.3,38.1 417.2,41.8 "></polygon>
<polygon fill="#FFFFFF" points="376.4,85.9 367.6,82.2 376.1,78.4 471,82.2 "></polygon>
<polygon fill="#FFFFFF" points="324.7,125.3 315.7,121.6 324.3,117.8 419.3,121.6 "></polygon>
<polygon fill="#FFFFFF" points="376.4,165.1 367.6,161.4 376.1,157.6 471,161.4 "></polygon>
<polygon fill="#FFFFFF" points="473.1,45.6 464.2,41.8 472.8,38.1 567.6,41.8 "></polygon>
<polygon fill="#FFFFFF" points="526.8,85.9 518,82.2 526.5,78.4 621.4,82.2 "></polygon>
<polygon fill="#FFFFFF" points="475.1,125.3 466.2,121.6 474.8,117.8 569.7,121.6 "></polygon>
<polygon fill="#FFFFFF" points="526.8,165.1 518,161.4 526.5,157.6 621.4,161.4 "></polygon>
</g>
<g opacity="0.1">
<polygon fill="#FFFFFF" points="23.9,7.5 15,3.7 23.5,0 118.5,3.7 "></polygon>
<polygon fill="#FFFFFF" points="77.7,47.8 68.8,44.1 77.4,40.3 172.2,44.1 "></polygon>
<polygon fill="#FFFFFF" points="26,87.2 17,83.5 25.5,79.7 120.5,83.5 "></polygon>
<polygon fill="#FFFFFF" points="77.7,127 68.8,123.3 77.4,119.5 172.2,123.3 "></polygon>
<polygon fill="#FFFFFF" points="26,166.4 17,162.7 25.5,158.9 120.5,162.7 "></polygon>
<polygon fill="#FFFFFF" points="164.1,7.5 155.2,3.7 163.7,0 258.6,3.7 "></polygon>
<polygon fill="#FFFFFF" points="217.8,47.8 208.9,44.1 217.5,40.3 312.4,44.1 "></polygon>
<polygon fill="#FFFFFF" points="166.1,87.2 157.2,83.5 165.8,79.7 260.6,83.5 "></polygon>
<polygon fill="#FFFFFF" points="217.8,127 208.9,123.3 217.5,119.5 312.4,123.3 "></polygon>
<polygon fill="#FFFFFF" points="166.1,166.4 157.2,162.7 165.8,158.9 260.6,162.7 "></polygon>
<polygon fill="#FFFFFF" points="305.9,7.5 297,3.7 305.6,0 400.4,3.7 "></polygon>
<polygon fill="#FFFFFF" points="359.6,47.8 350.7,44.1 359.3,40.3 454.3,44.1 "></polygon>
<polygon fill="#FFFFFF" points="307.9,87.2 299,83.5 307.6,79.7 402.5,83.5 "></polygon>
<polygon fill="#FFFFFF" points="359.6,127 350.7,123.3 359.3,119.5 454.3,123.3 "></polygon>
<polygon fill="#FFFFFF" points="307.9,166.4 299,162.7 307.6,158.9 402.5,162.7 "></polygon>
<polygon fill="#FFFFFF" points="456.3,7.5 447.4,3.7 456,0 550.9,3.7 "></polygon>
<polygon fill="#FFFFFF" points="510.1,47.8 501.1,44.1 509.7,40.3 604.7,44.1 "></polygon>
<polygon fill="#FFFFFF" points="458.3,87.2 449.4,83.5 458,79.7 552.8,83.5 "></polygon>
<polygon fill="#FFFFFF" points="510.1,127 501.1,123.3 509.7,119.5 604.7,123.3 "></polygon>
<polygon fill="#FFFFFF" points="458.3,166.4 449.4,162.7 458,158.9 552.8,162.7 "></polygon>
</g>
<g opacity="0.8">
<path fill="none" d="M238.1,87.8l-0.9,0.3L238.1,87.8z"></path>
<polygon fill="none" points="230.4,85.2 237.2,88.1 230.4,85.2 "></polygon>
<polygon fill="none" points="238.1,91.6 237.2,91.9 237.2,92 238.1,91.6 "></polygon>
<polygon fill="none" points="238.1,78.9 238.1,78.9 237.2,78.4 237.2,78.4 "></polygon>
<path fill="#18242A" d="M402.8,77.2v0.1l-38.2-6.9h-17.5h-2V55.8h21l-1.4-1.6h-0.1l-4-4.4h0.1l-1.5-1.6h-45l1.4,1.6l0,0l4,4.4l0,0
l1.4,1.6h10v14.7h-11.6l-7.9-3.1h-13.3v-9.7l-6.7-2l-9.7-3.2V31.6h6.2l3.5-4.7H305l3.5-4.7h-72.1l3.5,4.7l3.5,4.7h9.6V43l-3.5-1.1
V42l-6.7-2v27.4v5.1l-4.7,1.5v0.3l-0.8-0.3l-26.7,11.2l26.7,11.4l0.8-0.3v0.3l4.7,1.4v5.1V131l6.7-2v-0.1l3.5-1.1V143h-9.6
l-3.2,4.4H240l-3.5,4.7h72.1l-3.5-4.7h-13.7l-3.2-4.4H282v-24.8l9.7-3.2v0.1l6.7-2v-9.8h13.3l7.9-3h11.6v13.2h-8.6l-5.4,5.9l0,0
l-1.4,1.7h44.9l5.4-6h0.1l1.4-1.7h-22.5V100h2h17.5l38.2-6.9v0.1l2.8-1V78.1L402.8,77.2z M230.4,85.2L230.4,85.2l6.8,2.9l0.9-0.3
l0,0l-0.9,0.3L230.4,85.2z M238.1,78.9L238.1,78.9l-0.8-0.3l0,0L238.1,78.9z M237.2,91.9l0.8-0.3l0,0L237.2,91.9L237.2,91.9z"></path>
</g>
<path fill="#E35359" d="M269,77.5l-26.7-11.4l-26.7,11.4L242.4,89l0,0L269,77.5z M226.6,77.5l15.8-6.7l0,0l15.8,6.7l-15.8,6.7
L226.6,77.5z"></path>
<path fill="#F3825C" d="M242.3,70.8L242.3,70.8l-15.8,6.7l15.8,6.7l15.8-6.7L242.3,70.8z M242.3,80.5l-6.8-2.9l6.8-2.9l6.8,2.9
L242.3,80.5L242.3,80.5z"></path>
<polygon fill="#E3B239" points="242.3,74.7 235.6,77.5 242.3,80.5 242.3,80.5 249.2,77.5 "></polygon>
<rect x="336.4" y="42" fill="#9FA1A7" width="14" height="70.2"></rect>
<rect x="340.7" y="42" fill="#C8C9CC" width="5.2" height="70.2"></rect>
<polygon fill="#E9E7E8" points="365.9,113.3 372.9,105.6 327.9,105.6 321.1,113.3 "></polygon>
<polygon fill="#C8C9CC" points="371.4,107.3 372.9,105.6 327.9,105.6 326.5,107.3 "></polygon>
<polygon fill="#C8C9CC" points="365.9,113.3 367.4,111.7 322.4,111.7 321.1,113.3 "></polygon>
<polygon fill="#E9E7E8" points="326.3,48.1 319.5,40.5 364.4,40.5 371.3,48.1 "></polygon>
<polygon fill="#C8C9CC" points="320.9,42 319.5,40.5 364.4,40.5 365.9,42 "></polygon>
<polygon fill="#C8C9CC" points="326.3,48.1 324.9,46.6 369.8,46.6 371.3,48.1 "></polygon>
<polygon fill="#54BAB4" points="303.5,105.2 303.5,50.1 296.8,48 296.8,107.3 "></polygon>
<polygon fill="#54BAB4" points="254.8,121.2 254.8,34.2 248,32.2 248,123.3 "></polygon>
<rect x="248" y="59.7" fill="#05A68E" width="6.7" height="35.9"></rect>
<rect x="258.2" y="16.8" fill="#C8C9CC" width="29" height="125"></rect>
<rect x="258.2" y="24" fill="#B4B6BD" width="21.2" height="111.1"></rect>
<rect x="286.3" y="24" fill="#E9E7E8" width="1" height="111.1"></rect>
<polygon fill="#54BAB4" points="313.7,14.5 310.3,19.3 245.1,19.3 241.7,14.5 "></polygon>
<polygon fill="#E9E7E8" points="296.8,19.3 293.4,24 248.6,24 245.1,19.3 "></polygon>
<polygon fill="#E9E7E8" points="293.4,135.1 296.8,139.8 245.1,139.8 248.6,135.1 "></polygon>
<polygon fill="#54BAB4" points="310.3,139.5 313.7,144.2 241.7,144.2 245.1,139.5 "></polygon>
<rect x="254.8" y="62.8" fill="#C3C5CA" width="97.6" height="29.7"></rect>
<polygon fill="#54BAB4" points="243.2,89 243.2,66.3 254.8,62.8 254.8,92.5 "></polygon>
<polygon fill="#E9E7E8" points="254.8,62.8 254.8,34.2 296.8,48 296.8,62.8 "></polygon>
<polygon fill="#E9E7E8" points="254.8,121 254.8,92.5 296.8,92.5 296.8,107.3 "></polygon>
<rect x="254.8" y="62.8" fill="#B4B6BD" width="97.6" height="2.8"></rect>
<rect x="254.8" y="89.6" fill="#B4B6BD" width="97.6" height="2.8"></rect>
<polygon fill="#D4D5D8" points="254.8,95.6 254.8,92.5 324.8,92.5 316.9,95.6 "></polygon>
<polygon fill="#D4D5D8" points="254.8,62.8 254.8,59.7 316.9,59.7 324.8,62.8 "></polygon>
<rect x="264.6" y="69.4" fill="#D4D5D8" width="31.6" height="16.7"></rect>
<rect x="254.8" y="69.4" fill="#898F9A" width="4.4" height="16.7"></rect>
<rect x="259.1" y="69.4" fill="#E9E7E8" width="4.4" height="16.7"></rect>
<rect x="243.2" y="69.4" fill="#05A68E" width="11.5" height="16.7"></rect>
<rect x="297.4" y="69.4" fill="#E0DEE0" width="4.4" height="16.7"></rect>
<polygon fill="#E0DEE0" points="337.8,86.1 337.8,69.4 342.2,69.4 349.1,77.5 342.2,86.1 "></polygon>
<rect x="301.3" y="69.4" fill="#515C65" width="36.7" height="16.7"></rect>
<rect x="301.3" y="69.4" fill="#18242A" width="36.7" height="2.7"></rect>
<rect x="301.3" y="83.3" fill="#18242A" width="36.7" height="2.7"></rect>
<rect x="352.4" y="62.8" fill="#54BAB4" width="17.5" height="29.7"></rect>
<polygon fill="#B4B5B9" points="410.8,84.7 410.8,70.6 408,69.5 408,85.6 "></polygon>
<polygon fill="#B4B5B9" points="408,85.5 408,69.7 369.8,62.8 369.8,92.5 "></polygon>
<rect x="352.4" y="62.8" fill="#05A68E" width="17.5" height="2.8"></rect>
<polygon fill="#C8C9CC" points="408,85.5 408,69.7 369.8,66.3 369.8,89 "></polygon>
<polygon fill="#E0DEE0" points="408,84.7 408,70.8 369.8,74.2 369.8,81.2 "></polygon>
<rect x="352.4" y="89.6" fill="#05A68E" width="17.5" height="2.8"></rect>
</svg>
-->
</body>
</html>
Raw
04-copypasta.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Copy and Paste Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Copy something from illustrator and paste the code in here :) -->
</body>
</html>
Raw
style.sass
svg
background: #efefef
.circles
max-width: 600px
.number-icon
display: block
text-decoration: none
@media screen and (max-width: 767px)
width: 32px
height: 32px
@media screen and (min-width: 768px)
width: 64px
height: 64px
circle
fill: purple
text
fill: #fff
font-family: Courier
font-weight: bold
font-size: 24px
&:hover,
&:focus
circle
fill: blue
// Styling and animating
#space
width: 100%
height: 100%
max-width: 600px
max-height: 400px
background-color: #2a3042
border-radius: 14px
#stars
fill: #fff
opacity: 0.3
.flying-star
&:nth-child(even)
-webkit-animation: flying-stars 10s linear forwards
&:nth-child(odd)
-webkit-animation: flying-stars-alt 10s linear forwards
#spaceship
-webkit-animation: flying-spaceship 10s linear forwards
.ship-stripe
$ship-stripe: #54BAB4
fill: $ship-stripe
&-shadow
fill: darken($ship-stripe, 8%)
@-webkit-keyframes flying-stars
0%
transform: translateX(0)
100%
transform: translateX(-20%)
@-webkit-keyframes flying-stars-alt
0%
transform: translateX(0)
100%
transform: translateX(-50%)
@-webkit-keyframes flying-spaceship
0%
transform: translateY(20px)
50%
transform: translateY(50px)
100%
transform: translateY(20px)
Raw
svg-helper.rb
# Public: Used throughout the application to include svg illustrations,
# which are often only used once and therefore don't need to be cached like
# the other icons in the application.
#
# Usage Examples:
# 1. illustration("path/to/logo")
def illustration(path)
render file: "#{Rails.root}/app/assets/illustrations/#{path}.svg"
end
# Public: Used throughout the application to include svg icons.
#
# Usage Examples:
# 1. icon("logo")
# 2. icon("#logo")
def icon(name, html_options = {})
html_options[:preserveAspectRatio] ||= "xMinYMin meet"
# Create an <svg><use> tag which that refers to the icon #id
if icon = ICONS.find { |icon| icon[:css_id] == name }
html_options[:viewBox] = icon[:viewBox]
html_options[:class] ||= icon[:html_id]
content_tag :svg,
content_tag(:use, nil, "xlink:href" => "#{asset_path("icons.svg") + icon[:href]}"),
html_options
# Create an <svg> tag for the icon
elsif icon = ICONS.find { |icon| icon[:path] == "#{Rails.root}/app/assets/icons/#{name}.svg" }
html_options[:viewBox] = icon[:viewBox]
html_options[:class] ||= icon[:html_id]
content_tag :svg, icon[:html], html_options
else
error = RuntimeError.new("Missing icon #{name}")
if Rails.env.development?
raise error
else
Treehouse::ErrorNotifier.notify(error)
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment