Home Explore Help
Sign In
tum
/
network_report_server
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 21 Releases 0 Wiki

No Description

Tree: 7098c4d1a4
Branches Tags
network_report_server
/
app
/
node_modules
/
granim
/
docs
/
examples.html

examples.html 19KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 
  1. <!DOCTYPE html><html lang="en"><head><title>Examples | Granim.js</title><meta name="description" content="Examples for granim.js. Gradients animations in javascript."><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><link type="text/css" rel="stylesheet" href="assets/css/style.css"><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700"><link rel="icon" href="favicon.ico" type="image/x-icon"><!-- Facebook Metas--><meta property="og:url" content="http://sarcadass.github.io/granim.js"><meta property="og:type" content="website"><meta property="og:title" content="Granim.js"><meta property="og:description" content="Create fluid and interactive gradients animations with this small (&lt; 17kB) .js library"><meta property="og:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><!-- Twitter Metas--><meta property="twitter:card" content="summary_large_image"><meta property="twitter:creator" content="@Sarcadass"><meta property="twitter:title" content="Granim.js"><meta property="twitter:description" content="Create fluid and interactive gradients animations with this small (&lt; 17kB) .js library"><meta property="twitter:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><meta property="twitter:image:width" content="1200"><meta property="twitter:image:height" content="630"><link type="text/css" rel="stylesheet" href="assets/css/prism.css"></head><body class="examples"><header class="main-header"><div class="container clearfix"><div class="bloc-logo"><canvas id="logo-canvas"></canvas><a class="logo-mask" href="index.html">Granim.js</a></div><div class="main-nav"><div class="hamburger-icon"><span></span><span></span><span></span><span></span><span></span><span></span></div><nav><ul class="clearfix"><li><a class="text-link" href="https://github.com/sarcadass/granim.js/releases" target="_blank" rel="external">Download</a></li><li><a class="text-link" id="nav-api" href="api-v2.0.0.html">API</a></li><li><a class="text-link" id="nav-examples" href="examples.html">Examples</a></li><li><a class="github" href="https://github.com/sarcadass/granim.js" target="_blank" title="Github" rel="external"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
    2. 

  2.     <g>
    3. 

  3.         <path fill-rule="evenodd" clip-rule="evenodd" fill="#221E1B" d="M12.476,0C5.587,0,0,5.586,0,12.476
    4. 

  4. 		c0,5.512,3.575,10.189,8.533,11.842c0.623,0.113,0.853-0.271,0.853-0.604c0-0.296-0.011-1.279-0.017-2.32
    5. 

  5. 		c-3.471,0.754-4.203-1.473-4.203-1.473c-0.568-1.444-1.386-1.827-1.386-1.827c-1.132-0.772,0.085-0.758,0.085-0.758
    6. 

  6. 		c1.253,0.088,1.913,1.286,1.913,1.286c1.113,1.908,2.919,1.356,3.631,1.039c0.112-0.81,0.435-1.358,0.791-1.67
    7. 

  7. 		c-2.771-0.315-5.684-1.385-5.684-6.167c0-1.362,0.487-2.475,1.286-3.349c-0.13-0.314-0.558-1.582,0.121-3.301
    8. 

  8. 		c0,0,1.047-0.336,3.432,1.278c0.995-0.276,2.062-0.415,3.122-0.419c1.061,0.004,2.129,0.143,3.125,0.419
    9. 

  9. 		c2.384-1.614,3.43-1.278,3.43-1.278c0.68,1.719,0.25,2.987,0.122,3.301c0.801,0.874,1.283,1.986,1.283,3.349
    10. 

  10. 		c0,4.792-2.918,5.847-5.696,6.157c0.447,0.385,0.847,1.146,0.847,2.309c0,1.671-0.015,3.015-0.015,3.424
    11. 

  11. 		c0,0.333,0.224,0.723,0.855,0.602c4.957-1.652,8.526-6.329,8.526-11.84C24.953,5.586,19.365,0,12.476,0z"/>
    12. 

  12.         <path fill="#221E1B" d="M4.726,17.914c-0.028,0.062-0.124,0.081-0.213,0.037c-0.091-0.04-0.142-0.124-0.113-0.188
    13. 

  13. 		c0.028-0.063,0.125-0.082,0.214-0.038C4.705,17.766,4.757,17.852,4.726,17.914L4.726,17.914z M4.572,17.8"/>
    14. 

  14.         <path fill="#221E1B" d="M5.231,18.477c-0.059,0.057-0.176,0.031-0.255-0.058c-0.081-0.086-0.096-0.202-0.036-0.256
    15. 

  15. 		c0.061-0.058,0.173-0.033,0.256,0.055C5.277,18.306,5.293,18.421,5.231,18.477L5.231,18.477z M5.112,18.351"/>
    16. 

  16.         <path fill="#221E1B" d="M5.723,19.195c-0.076,0.055-0.201,0.003-0.278-0.105c-0.077-0.112-0.077-0.245,0.001-0.298
    17. 

  17. 		c0.078-0.055,0.201-0.006,0.279,0.103C5.801,19.009,5.801,19.142,5.723,19.195L5.723,19.195z M5.723,19.195"/>
    18. 

  18.         <path fill="#221E1B" d="M6.397,19.892c-0.069,0.074-0.214,0.055-0.321-0.049c-0.108-0.102-0.14-0.245-0.072-0.319
    19. 

  19. 		c0.07-0.076,0.216-0.054,0.324,0.048C6.437,19.673,6.469,19.815,6.397,19.892L6.397,19.892z M6.397,19.892"/>
    20. 

  20.         <path fill="#221E1B" d="M7.328,20.294c-0.031,0.097-0.171,0.141-0.313,0.101c-0.141-0.043-0.233-0.158-0.205-0.256
    21. 

  21. 		c0.029-0.099,0.171-0.146,0.313-0.101C7.263,20.08,7.355,20.194,7.328,20.294L7.328,20.294z M7.328,20.294"/>
    22. 

  22.         <path fill="#221E1B" d="M8.347,20.368c0.004,0.102-0.116,0.188-0.264,0.189c-0.149,0.005-0.271-0.079-0.272-0.181
    23. 

  23. 		c0-0.104,0.117-0.188,0.267-0.19C8.226,20.185,8.347,20.266,8.347,20.368L8.347,20.368z M8.347,20.368"/>
    24. 

  24.         <path fill="#221E1B" d="M9.297,20.206c0.018,0.1-0.084,0.203-0.232,0.231c-0.145,0.025-0.279-0.036-0.297-0.135
    25. 

  25. 		C8.749,20.2,8.856,20.097,8.999,20.07C9.147,20.044,9.279,20.104,9.297,20.206L9.297,20.206z M9.297,20.206"/>
    26. 

  26.     </g>
    27. 

  27. </svg>
    28. 

  28. </a></li></ul></nav></div></div></header><div class="main-content"><div class="container bloc" id="canvas-basic-bloc"><h1>Examples</h1><h2>Basic gradient animation</h2><p>Basic gradients animation with 3 gradients in queue composed of 2 colors.</p><div class="sandbox"><canvas id="canvas-basic"></canvas></div><div class="sandbox-footer"><div class="option">Change gradient direction:<select id="select-direction"><option value="left-right">left-right</option><option value="diagonal">diagonal</option><option value="top-bottom">top-bottom</option><option value="radial">radial</option><option value="custom">custom</option></select></div></div><div class="code-wrapper"><ul class="tab-titles"><li class="active"><a href="#basic-js" data-toggle="tab">JS</a></li><li><a href="#basic-html" data-toggle="tab">HTML</a></li><li><a href="#basic-css" data-toggle="tab">CSS</a></li></ul><div class="tab-content"><div class="tab active" id="basic-js" data-toggle="pill"><pre><code class="language-js">var granimInstance = new Granim({
    29. 

  29.     element: '#canvas-basic',
    30. 

  30.     direction: 'left-right',
    31. 

  31.     isPausedWhenNotInView: true,
    32. 

  32.     states : {
    33. 

  33.         "default-state": {
    34. 

  34.             gradients: [
    35. 

  35.                 ['#ff9966', '#ff5e62'],
    36. 

  36.                 ['#00F260', '#0575E6'],
    37. 

  37.                 ['#e1eec3', '#f05053']
    38. 

  38.             ]
    39. 

  39.         }
    40. 

  40.     }
    41. 

  41. });</code></pre></div><div class="tab" id="basic-html" data-toggle="pill"><pre><code class="language-html">&lt;canvas id=&quot;canvas-basic&quot;&gt;&lt;/canvas&gt;</code></pre></div><div class="tab" id="basic-css" data-toggle="pill"><pre><code class="language-css">#canvas-basic {
    42. 

  42.     position: absolute;
    43. 

  43.     display: block;
    44. 

  44.     width: 100%;
    45. 

  45.     height: 100%;
    46. 

  46.     top: 0;
    47. 

  47.     right: 0;
    48. 

  48.     bottom: 0;
    49. 

  49.     left: 0;
    50. 

  50. }</code></pre></div></div></div></div><div class="container bloc" id="canvas-complex-bloc"><h2>Complex gradient animation</h2><p>Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors.</p><div class="sandbox"><canvas id="canvas-complex"></canvas></div><div class="code-wrapper"><ul class="tab-titles"><li class="active"><a href="#complex-js" data-toggle="tab">JS</a></li><li><a href="#complex-html" data-toggle="tab">HTML</a></li><li><a href="#complex-css" data-toggle="tab">CSS</a></li></ul><div class="tab-content"><div class="tab active" id="complex-js" data-toggle="pill"><pre><code class="language-js">var granimInstance = new Granim({
    51. 

  51.     element: '#canvas-complex',
    52. 

  52.     direction: 'left-right',
    53. 

  53.     isPausedWhenNotInView: true,
    54. 

  54.     states : {
    55. 

  55.         "default-state": {
    56. 

  56.             gradients: [
    57. 

  57.                 [
    58. 

  58.                     { color: '#833ab4', pos: .2 },
    59. 

  59.                     { color: '#fd1d1d', pos: .8 },
    60. 

  60.                     { color: '#38ef7d', pos: 1 }
    61. 

  61.                 ], [
    62. 

  62.                     { color: '#40e0d0', pos: 0 },
    63. 

  63.                     { color: '#ff8c00', pos: .2 },
    64. 

  64.                     { color: '#ff0080', pos: .75 }
    65. 

  65.                 ],
    66. 

  66.             ]
    67. 

  67.         }
    68. 

  68.     }
    69. 

  69. });</code></pre></div><div class="tab" id="complex-html" data-toggle="pill"><pre><code class="language-html">&lt;canvas id=&quot;canvas-complex&quot;&gt;&lt;/canvas&gt;</code></pre></div><div class="tab" id="complex-css" data-toggle="pill"><pre><code class="language-css">#canvas-basic {
    70. 

  70.     position: absolute;
    71. 

  71.     display: block;
    72. 

  72.     width: 100%;
    73. 

  73.     height: 100%;
    74. 

  74.     top: 0;
    75. 

  75.     right: 0;
    76. 

  76.     bottom: 0;
    77. 

  77.     left: 0;
    78. 

  78. }</code></pre></div></div></div></div><div class="container bloc" id="canvas-image-blending-bloc"><h2>Gradient animation with an image and blending mode</h2><p>Gradient animation with 2 colors, a background image and a blending mode set.<br>
    79. 

  79. More parameters for <span class="snippet">options.image</span> are available in the&nbsp;<a class="link" href="api-v2.0.0.html#options-image">API</a> page.</p><div class="sandbox"><canvas id="canvas-image-blending"></canvas></div><div class="sandbox-footer"><span>Change blending mode:<select id="select-blending-mode"><option value="multiply">multiply</option><option value="screen">screen</option><option value="normal">normal</option><option value="overlay">overlay</option><option value="darken">darken</option><option value="lighten">lighten</option><option value="lighter">lighter</option><option value="color-dodge">color-dodge</option><option value="color-burn">color-burn</option><option value="hard-light">hard-light</option><option value="soft-light">soft-light</option><option value="difference">difference</option><option value="exclusion">exclusion</option><option value="hue">hue</option><option value="saturation">saturation</option><option value="color">color</option><option value="luminosity">luminosity</option></select></span></div><div class="code-wrapper"><ul class="tab-titles"><li class="active"><a href="#image-blending-js" data-toggle="tab">JS</a></li><li><a href="#image-blending-html" data-toggle="tab">HTML</a></li><li><a href="#image-blending-css" data-toggle="tab">CSS</a></li></ul><div class="tab-content"><div class="tab active" id="image-blending-js" data-toggle="pill"><pre><code class="language-js">var granimInstance = new Granim({
    80. 

  80.     element: '#canvas-image-blending',
    81. 

  81.     direction: 'top-bottom',
    82. 

  82.     isPausedWhenNotInView: true,
    83. 

  83.     image : {
    84. 

  84.         source: '../assets/img/bg-forest.jpg',
    85. 

  85.         blendingMode: 'multiply'
    86. 

  86.     },
    87. 

  87.     states : {
    88. 

  88.         "default-state": {
    89. 

  89.             gradients: [
    90. 

  90.                 ['#29323c', '#485563'],
    91. 

  91.                 ['#FF6B6B', '#556270'],
    92. 

  92.                 ['#80d3fe', '#7ea0c4'],
    93. 

  93.                 ['#f0ab51', '#eceba3']
    94. 

  94.             ],
    95. 

  95.             transitionSpeed: 7000
    96. 

  96.         }
    97. 

  97.     }
    98. 

  98. });</code></pre></div><div class="tab" id="image-blending-html" data-toggle="pill"><pre><code class="language-html">&lt;canvas id=&quot;canvas-image-blending&quot;&gt;&lt;/canvas&gt;</code></pre></div><div class="tab" id="image-blending-css" data-toggle="pill"><pre><code class="language-css">#canvas-image {
    99. 

  99.     position: absolute;
    100. 

  100.     display: block;
    101. 

  101.     width: 100%;
    102. 

  102.     height: 100%;
    103. 

  103.     top: 0;
    104. 

  104.     right: 0;
    105. 

  105.     bottom: 0;
    106. 

  106.     left: 0;
    107. 

  107. }</code></pre></div></div></div></div><div class="container bloc"><h2>Gradients with an image mask</h2><p>Gradient animation with an image mask to create a gradient animation under a shape.<br>
    108. 

  108. Look at the logo on the left of the header.</p><div class="sandbox canvas-image-wrapper"><div class="bloc-logo"><canvas id="canvas-image-mask"></canvas><a class="logo-mask" href="index.html">Granim.js</a></div></div><div class="code-wrapper"><ul class="tab-titles"><li class="active"><a href="#image-mask-js" data-toggle="tab">JS</a></li><li><a href="#image-mask-html" data-toggle="tab">HTML</a></li><li><a href="#image-mask-css" data-toggle="tab">CSS</a></li></ul><div class="tab-content"><div class="tab active" id="image-mask-js" data-toggle="pill"><pre><code class="language-js">var granimInstance = new Granim({
    109. 

  109.     element: '#logo-canvas',
    110. 

  110.     direction: 'left-right',
    111. 

  111.     states : {
    112. 

  112.         "default-state": {
    113. 

  113.             gradients: [
    114. 

  114.                 ['#EB3349', '#F45C43'],
    115. 

  115.                 ['#FF8008', '#FFC837'],
    116. 

  116.                 ['#4CB8C4', '#3CD3AD'],
    117. 

  117.                 ['#24C6DC', '#514A9D'],
    118. 

  118.                 ['#FF512F', '#DD2476'],
    119. 

  119.                 ['#DA22FF', '#9733EE']
    120. 

  120.             ],
    121. 

  121.             transitionSpeed: 2000
    122. 

  122.         }
    123. 

  123.     }
    124. 

  124. });</code></pre></div><div class="tab" id="image-mask-html" data-toggle="pill"><pre><code class="language-html">&lt;div class=&quot;bloc-logo&quot;&gt;
    125. 

  125.     &lt;canvas id=&quot;logo-canvas&quot;&gt;&lt;/canvas&gt;
    126. 

  126.     &lt;a href=&quot;index.html&quot; class=&quot;logo-mask&quot;&gt;Granim.js&lt;/a&gt;
    127. 

  127. &lt;/div&gt;</code></pre></div><div class="tab" id="image-mask-css" data-toggle="pill"><pre><code class="language-css">.bloc-logo {
    128. 

  128.     position: relative;
    129. 

  129.     width: 130px;
    130. 

  130.     height: 49px;
    131. 

  131.     float: left;
    132. 

  132. }
    133. 

  133. <br>
    134. 

  134. .bloc-logo canvas,
    135. 

  135. .bloc-logo .logo-mask {
    136. 

  136.     display: block;
    137. 

  137.     width: 130px;
    138. 

  138.     height: 49px;
    139. 

  139. }
    140. 

  140. <br>
    141. 

  141. .bloc-logo .logo-mask {
    142. 

  142.     position: absolute;
    143. 

  143.     top: 0;
    144. 

  144.     left: 0;
    145. 

  145.     background-size: 130px;
    146. 

  146.     background-image: url("../img/logo-mask.png");
    147. 

  147.     text-indent: -9999px;
    148. 

  148. }</code></pre></div></div></div></div><div class="container bloc"><h2>Interactive Gradients</h2><p>Create a gradient animation that responds to events.<br>
    149. 

  149. Click on the different states in the gradient animation to see the gradients change.</p><div class="sandbox canvas-interactive-wrapper"><canvas id="canvas-interactive"></canvas><div class="cta-wrapper"><span><a class="active" id="default-state-cta" href="#default-state">Default state</a></span><span><a id="violet-state-cta" href="#violet-state">Violet animated state</a></span><span><a id="orange-state-cta" href="#orange-state">Orange static state</a></span></div></div><div class="code-wrapper"><ul class="tab-titles"><li class="active"><a href="#interactive-js" data-toggle="tab">JS</a></li><li><a href="#interactive-html" data-toggle="tab">HTML</a></li><li><a href="#interactive-css" data-toggle="tab">CSS</a></li></ul><div class="tab-content"><div class="tab active" id="interactive-js" data-toggle="pill"><pre><code class="language-js">var granimInstance = new Granim({
    150. 

  150.     element: '#canvas-interactive',
    151. 

  151.     name: 'interactive-gradient',
    152. 

  152.     elToSetClassOn: '.canvas-interactive-wrapper',
    153. 

  153.     direction: 'diagonal',
    154. 

  154.     isPausedWhenNotInView: true,
    155. 

  155.     stateTransitionSpeed: 500,
    156. 

  156.     states : {
    157. 

  157.         "default-state": {
    158. 

  158.             gradients: [
    159. 

  159.                 ['#B3FFAB', '#12FFF7'],
    160. 

  160.                 ['#ADD100', '#7B920A'],
    161. 

  161.                 ['#1A2980', '#26D0CE']
    162. 

  162.             ],
    163. 

  163.             transitionSpeed: 10000
    164. 

  164.         },
    165. 

  165.         "violet-state": {
    166. 

  166.             gradients: [
    167. 

  167.                 ['#9D50BB', '#6E48AA'],
    168. 

  168.                 ['#4776E6', '#8E54E9']
    169. 

  169.             ],
    170. 

  170.             transitionSpeed: 2000
    171. 

  171.         },
    172. 

  172.         "orange-state": {
    173. 

  173.             gradients: [ ['#FF4E50', '#F9D423'] ],
    174. 

  174.             loop: false
    175. 

  175.         }
    176. 

  176.     }
    177. 

  177. });
    178. 

  178. <br>
    179. 

  179. // With jQuery
    180. 

  180. $('#default-state-cta').on('click', function(event) {
    181. 

  181.     event.preventDefault();
    182. 

  182.     granimInstance.changeState('default-state');
    183. 

  183.     setClass('#default-state-cta')
    184. 

  184. });
    185. 

  185. $('#violet-state-cta').on('click', function(event) {
    186. 

  186.     event.preventDefault();
    187. 

  187.     granimInstance.changeState('violet-state');
    188. 

  188.     setClass('#violet-state-cta')
    189. 

  189. });
    190. 

  190. $('#orange-state-cta').on('click', function(event) {
    191. 

  191.     event.preventDefault();
    192. 

  192.     granimInstance.changeState('orange-state');
    193. 

  193.     setClass('#orange-state-cta')
    194. 

  194. });
    195. 

  195. <br>
    196. 

  196. function setClass(element) {
    197. 

  197.     $('.canvas-interactive-wrapper a').removeClass('active');
    198. 

  198.     $(element).addClass('active');
    199. 

  199. };</code></pre></div><div class="tab" id="interactive-html" data-toggle="pill"><pre><code class="language-html">&lt;div class=&quot;canvas-interactive-wrapper&quot;&gt;
    200. 

  200.     &lt;canvas id=&quot;canvas-interactive&quot;&gt;&lt;/canvas&gt;
    201. 

  201.     &lt;div class=&quot;cta-wrapper&quot;&gt;
    202. 

  202.         &lt;a href=&quot;#default-state&quot; id=&quot;default-state-cta&quot; class=&quot;active&quot;&gt;Default state&lt;/a&gt;
    203. 

  203.         &lt;a href=&quot;#violet-state&quot; id=&quot;violet-state-cta&quot;&gt;Violet state&lt;/a&gt;
    204. 

  204.         &lt;a href=&quot;#orange-state&quot; id=&quot;orange-state-cta&quot;&gt;Orange state&lt;/a&gt;
    205. 

  205.     &lt;/div&gt;
    206. 

  206. &lt;/div&gt;</code></pre></div><div class="tab" id="interactive-css" data-toggle="pill"><pre><code class="language-css">.canvas-interactive-wrapper {
    207. 

  207.     position: relative;
    208. 

  208.     height: 300px;
    209. 

  209.     text-align: center;
    210. 

  210. }
    211. 

  211. <br>
    212. 

  212. .canvas-interactive-wrapper canvas {
    213. 

  213.     position: absolute;
    214. 

  214.     display: block;
    215. 

  215.     width: 100%;
    216. 

  216.     height: 100%;
    217. 

  217.     top: 0;
    218. 

  218.     right: 0;
    219. 

  219.     bottom: 0;
    220. 

  220.     left: 0;
    221. 

  221. }
    222. 

  222. <br>
    223. 

  223. .canvas-interactive-wrapper .cta-wrapper {
    224. 

  224.     margin-top: 130px;
    225. 

  225. }
    226. 

  226. <br>
    227. 

  227. .canvas-interactive-wrapper .cta-wrapper a {
    228. 

  228.     position: relative;
    229. 

  229.     display: inline-block;
    230. 

  230.     padding: 3px 7px;
    231. 

  231.     border: solid 1px transparent;
    232. 

  232.     margin-right: 50px;
    233. 

  233.     z-index: 1;
    234. 

  234.     text-decoration: none;
    235. 

  235.     color: #222;
    236. 

  236.     transition: border .3s;
    237. 

  237. }
    238. 

  238. <br>
    239. 

  239. .canvas-interactive-wrapper .cta-wrapper a.active {
    240. 

  240.     border-color: #222;
    241. 

  241. }</code></pre></div></div></div></div><div class="footer container bloc clearfix"><p><strong>Granim v<span>2.0.0</span></strong>, created by <a href="https://twitter.com/Sarcadass" target="_blank">Benjamin Blonde</a>.
    242. 

  242. MIT license.<br>
    243. 

  243. Thanks to <a href="https://twitter.com/designcouch" target="_blank">@designcouch</a>
    244. 

  244. for the <a href="https://codepen.io/designcouch/pen/Atyop" target="_blank">hamburger icon</a>.
    245. 

  245. Inspired by <a href="http://uigradients.com/" target="_blank">uiGradients</a>.</p><div class="bloc-social"><a class="cta-social cta-facebook" href="http://www.facebook.com/sharer.php?u=http://sarcadass.github.io/granim.js" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    246. 

  246. <path d="M8,5.333H6V8h2v8h3.334V8h2.428L14,5.333h-2.666V4.222c0-0.637,0.127-0.889,0.742-0.889H14V0h-2.539
    247. 

  247. 	C9.064,0,8,1.055,8,3.077V5.333z"/>
    248. 

  248. </svg>
    249. 

  249. Share on Facebook</a><a class="cta-social cta-twitter" href="https://twitter.com/share?text=Create%20fluid%20and%20interactive%20gradients%20animations%20with%20this%20small%20%28&lt;%2010kB%29%20.js%20library&amp;via=Sarcadass&amp;url=http%3A%2F%2Fsarcadass.github.io%2Fgranim.js" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg"x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    250. 

  250. <path d="M16,3.538c-0.588,0.261-1.221,0.437-1.885,0.516c0.677-0.406,1.198-1.049,1.442-1.816c-0.634,0.376-1.337,0.65-2.084,0.797
    251. 

  251. 	c-0.599-0.638-1.452-1.037-2.396-1.037c-2.119,0-3.676,1.977-3.198,4.03c-2.727-0.137-5.146-1.444-6.765-3.43
    252. 

  252. 	c-0.86,1.475-0.446,3.405,1.016,4.383C1.592,6.964,1.085,6.817,0.644,6.571C0.607,8.092,1.698,9.514,3.276,9.83
    253. 

  253. 	C2.814,9.956,2.308,9.985,1.793,9.887C2.21,11.19,3.422,12.14,4.86,12.166c-1.38,1.082-3.119,1.565-4.86,1.36
    254. 

  254. 	C1.453,14.458,3.179,15,5.032,15c6.094,0,9.539-5.146,9.33-9.763C15.003,4.774,15.561,4.195,16,3.538z"/>
    255. 

  255. </svg>
    256. 

  256. Share on Twitter</a></div></div></div><script src="assets/js/vendor/jquery-3.1.0.min.js"></script><script src="assets/js/vendor/granim.min.js"></script><script src="assets/js/vendor/prism.js"></script><script src="assets/js/vendor/bootstrap.min.js"></script><script type="text/javascript">var pageId = 'examples';</script><script src="assets/js/script.js"></script><script type="text/javascript">(function(i, s, o, g, r, a, m) {
    257. 

  257.   i['GoogleAnalyticsObject'] = r;
    258. 

  258.   i[r] = i[r] || function() {
    259. 

  259.     (i[r].q = i[r].q || []).push(arguments)
    260. 

  260.   }, i[r].l = 1 * new Date();
    261. 

  261.   a = s.createElement(o),
    262. 

  262.   m = s.getElementsByTagName(o)[0];
    263. 

  263.   a.async = 1;
    264. 

  264.   a.src = g;
    265. 

  265.   m.parentNode.insertBefore(a, m)
    266. 

  266. })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    267. 

  267. ga('create', 'UA-83387901-1', 'auto');
    268. 

  268. ga('send', 'pageview');</script></body></html>
    269.