Created
March 10, 2017 16:11
-
-
Save sivartravis/4f1454c978fb65d5049e8638596b39f9 to your computer and use it in GitHub Desktop.
Revisions
-
sivartravis created this gist
Mar 10, 2017 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,43 @@ <svg class="tendrilSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> <defs> <circle class="blueDot" cx="0" cy="0" r="11.5" fill="#3cc9f3" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/> <circle class="whiteDot" cx="0" cy="0" r="11.5" fill="#fff"/> <circle class="orangeDot" cx="0" cy="0" r="11.5" fill="#ff5d55"/> </defs> <g class="whole"> <g class="tendrils" > <path d="M417,325.15c-1.51,6.35,37.09,47.47,49.86,55.45,6.38,4,13.83,5.9,21.22,7.3a165.76,165.76,0,0,0,36.42,2.93c5.39-.18,11.49-.41,15.36,3.34,5,4.8,3.67,13.76,8.72,18.46,4.72,4.39,12.2,2.8,18.54,4,10.77,2,18.46,14.15,15.72,24.77"/> <path d="M420,323.22c5.34,6.5,68.55,28.52,87.89,30.19,19.7,1.7,39.62,3.39,59.18.47,7.36-1.1,14.62-2.85,22-4a161,161,0,0,1,32.33-1.4c12,.6,24.32,2.23,36-.61s23.08-11.53,24.59-23.5"/> <path d="M434.5,314.5c25.11-1.57,75.92,2.44,100.31,8.61,16.81,4.25,33.47,10.34,50.81,10.33,6.33,0,12.76-.83,18.93.58,5.64,1.29,10.75,4.37,16.4,5.61s12.63-.09,15.21-5.27"/> <path d="M423.25,308.62c7.33,1.27,69.49-27.19,86.52-24.93,5.86.78,10.9,4.35,16.14,7.08,12.51,6.54,27,8.54,41.08,8s28-3.57,41.76-6.57c7.75-1.69,16.58-3.18,23,1.47,0,0,8.74,26.85-5.26,21.85s-55-9-47-21,20-12,22-28"/> <path d="M416.73,290.54c5.61,1.83,59-34.1,65.31-46.16,3.87-7.37,4.39-16,6.14-24.1s5.39-16.71,12.85-20.41c3-1.5,6.41-2,9.72-2.71a130.27,130.27,0,0,0,69.18-38.66c3.84-4.13,7.42-8.51,11.51-12.4,5.69-5.41,12.27-9.77,18.26-14.85a98.52,98.52,0,0,0,20.52-24.12c1.54-2.54,3.06-5.27,5.57-6.84,3.51-2.2,8.22-1.59,11.83.45s6.35,5.28,9,8.45"/> <path d="M421.09,298.37c10.08-1.91,80-42.87,89.1-64.74,2.26-5.45,3.87-11.2,6.76-16.35s7.4-9.78,13.17-11c3.05-.65,6.22-.32,9.34-.33,22.51-.12,41.07-18.34,63.23-22.28,5.44-1,12.69.13,13.9,5.52"/> <path d="M421.19,301.79c5.47,0,61.14-22.71,71.11-30.47s18-17.74,25.45-27.92c3.05-4.15,6.16-8.47,10.58-11.11,6-3.59,13.43-3.51,20.3-4.9,12.15-2.45,23-9.66,35.14-11.92,6.5-1.21,13.26-1,19.6-2.87,11.77-3.53,21.39-14.16,33.68-14,6.23.07,12.22,3,18.44,2.71,4.44-.21,8.61-2,12.78-3.55a97.45,97.45,0,0,1,31.29-5.82,11,11,0,0,1,5.85,1c4,2.36,3.55,8.75.32,12.07s-8.08,4.38-12.63,5.28"/> <path d="M410.18,332.53c2.79.82,32.93,30.57,36,36.54s5.07,12.49,8.69,18.15c3.17,4.95,7.6,9.3,9.09,15,.85,3.23.66,6.65,1.3,9.94s2.44,6.7,5.62,7.73c1.52.49,3.2.38,4.7.94,3.37,1.26,4.65,5.24,5.74,8.67s3.1,7.33,6.69,7.64c3.36.28,6.11-3.09,6.44-6.44s-1.09-6.6-2.48-9.67"/> <path d="M403.86,334.7c2.66,4.48,24.88,47.68,28,59.28,2.34,8.59,3.78,17.93.61,26.25-1.88,4.93-5.28,9.21-6.85,14.25-2.5,8.06,0,16.81,3.47,24.53s7.78,15.21,9.1,23.55c.75,4.75.49,9.67,1.85,14.28,1.81,6.16,6.3,11.12,9.28,16.81,3.27,6.25,4.68,13.3,7.55,19.74,5.83,13,17.21,22.62,28.22,31.73"/> <path d="M401.26,333.84c-5.33,7.52-7.47,68.89-4.45,90,1.73,12.05,6.45,24.21,15.77,32a7.63,7.63,0,0,1,1.91,2c2,3.67-3.07,6.92-6.74,8.95-11.54,6.37-15.8,20.56-19,33.35-1.36,5.41-2.73,11-1.59,16.5,1.24,5.94,5.26,10.84,8.43,16a63.17,63.17,0,0,1,4.07,57.14"/> <path d="M388.7,332.54c-2.91,4.3-21.71,50.57-27,61.31-3.29,6.64-6.34,13.5-7.58,20.81-1.52,9-.2,18.32,2.77,26.94,1.15,3.35,2.58,6.8,2.14,10.32-1,8.33-10.88,11.72-17.83,16.41-12.45,8.41-17.44,26.27-11.14,39.91"/> <path d="M381.34,328.21c.88,3.91-13.82,43.3-11.79,52.32,1.06,4.69,2.11,9.64.72,14.24-1.18,3.9-4,7.09-7,9.83-11.82,10.77-28.15,17.08-36.34,30.82-2.66,4.46-4.34,9.56-7.75,13.48-10.18,11.68-31,8.25-41.12,20-3.59,4.18-5.19,9.65-7.29,14.74-5.87,14.21-16.09,26.11-26.13,37.75-1,1.18-2.33,2.47-3.86,2.21-1.32-.22-2.18-1.54-2.58-2.82-1.74-5.6,2.13-11.25,5.76-15.85"/> <path d="M370.51,318.62c-.07,6.9-30.57,37.56-39.08,51-11.55,18.29-34.42,25.14-52.13,37.57-18,12.67-31.65,34-29,55.87"/> <path d="M368.33,311.58c-3.28,3.79-39.44,17.54-44.59,27.9a42,42,0,0,1-8.67,11.25c-20.89,20.18-51.57,26.13-76,41.83-7.86,5.05-15.27,11.37-19.47,19.72-5.07,10.07-4.92,22.12-2,33s8.5,20.84,14,30.69"/> <path d="M370.16,315.9c-5.57,4.57-57.2,21.05-71.84,29-4.7,2.54-9.55,5-13.41,8.66a37.62,37.62,0,0,1-4.85,4.46c-5.94,3.94-13.77,1.4-20.83.42a44,44,0,0,0-17,1c-12.41,3.22-22.82,11.67-34.93,15.88-28.22,9.8-59.64-4.9-89,.79a65.73,65.73,0,0,0-42.05,28.33S68.5,422.5,89.5,420.5s24-22,21-27,1-33,9-36c0,0,11-9,17-5s10,3,13,0"/> <path d="M371.6,315.7c-4.34-3.16-59.62-24-72-23.66-11.71.32-22.74,7.86-34.35,6.31-5.9-.79-11.24-3.89-16-7.5-8.41-6.44-15.49-14.95-18.92-25s-2.91-21.63,2.65-30.65c2.13-3.45,5-6.65,5.62-10.66s-2.68-8.89-6.59-7.82"/> <path d="M374.63,290.48c-3.77-2.21-42-42.28-50.7-47.39l-5.65-3.31-28.91-17c-6.65-3.91-13.42-7.86-20.91-9.73-10.91-2.73-22.37-.82-33.62-.59s-23.59-1.79-31-10.24c-2.07-2.35-3.66-5.11-5.81-7.39-5-5.26-12.31-7.4-19.28-9.33-11.56-3.19-24.64-6.21-34.93-.07-4.36,2.6-7.67,6.58-11.29,10.15a74.82,74.82,0,0,1-13.12,10.32c-1.48.92-3.22,1.82-4.9,1.36a6,6,0,0,1-2.7-2,26,26,0,0,1-6.51-15,7.69,7.69,0,0,1,.91-5.09c1-1.45,3.24-2.14,4.58-1"/> <path d="M378.56,286.82c-2.63-4.58-35.37-55.29-42.9-64.87a77.57,77.57,0,0,1-13.89-27.75c-3-11-3.86-23.44-11.85-31.56-4-4.12-9.58-6.69-13-11.3-4.7-6.25-4.62-14.75-4.32-22.57,0,0-3.05-6.26-12.05-7.26s8-19,15-18,6,24,14,18"/> <path d="M380.37,285.8c-5-.38-40-40-51.5-40.85-9.48-.73-19.09-1.48-28-4.7-22.22-8-38.19-30.25-61.5-34-12.58-2-25.33,1.81-38.07,1.78-15.18,0-30-5.63-42.68-13.95s-23.45-19.28-33.3-30.83c-2.86-3.36-5.78-6.88-9.73-8.84s-9.29-1.93-12.27,1.33-1.53,9.8,2.84,10.39"/> <path d="M382.72,284.76c-7.82-8.84-45-84.33-60.27-106.87-3-4.4-6.12-8.79-10.23-12.18-4.74-3.91-10.52-6.27-16.18-8.65-18.8-7.91-38-17.15-50.6-33.18C229,102.93,225.81,73,206.49,54.6a53.62,53.62,0,0,0-29.64-14.17c-3.87-.51-8.38-.35-10.87,2.65-3,3.58-1,9.51,2.91,12s9,2.22,13.53,1.06"/> <path d="M386.5,272.5c-1-19.55-6.59-72.25-20.72-85.8-7.06-6.77-15.73-12.66-19.23-21.8-1.62-4.22-2-8.8-2.08-13.32-.42-18.07,2.93-36.71-2.74-53.87C335.56,79.06,319.78,65.35,310,48.28a83.78,83.78,0,0,1-10.62-33.71l12.07,4.21"/> <path d="M392.12,283c1.64-9-2.57-85-14.37-102.61-3.85-5.75-8.5-11.17-10.53-17.79-4.13-13.5,3.22-30-5.28-41.32"/> <path d="M394.64,282.24c.9-9.44,5.67-87.2-1.15-108-2.34-7.15-5.74-14.73-3.44-21.9,3.08-9.62,14.49-13.29,24.33-15.59"/> <path d="M396.32,281.49c3.38-6.57,19.39-74.17,27.2-89.33,3.92-7.62,7.94-15.56,8.23-24.12.23-6.59-1.6-13.92,2.23-19.29,3.17-4.44,9.17-5.85,13.06-9.68,6.42-6.31,5.17-17.19,1-25.16S437.33,99.29,433.78,91a36.25,36.25,0,0,1-.1-28c1.31-3.11,3.26-6.22,6.37-7.55s7.47,0,8.27,3.28c.41,1.66-.14,3.41,0,5.11.57,6.9,10.57,8.19,14.6,13.81"/> <path d="M404.24,284.17c-.06-12.17,26.33-96.38,47.18-115.22,7-6.33,15.53-12.76,16.5-22.15,1.2-11.71-10.23-22.11-8.56-33.76,1-7.08,6.72-12.59,12.83-16.3s12.95-6.22,18.67-10.51S501.19,75.11,500.11,68c-1.23-8-9-13.17-16.28-16.81"/> <path d="M422.24,310.3c7.32,1,72.91-1,84.53,11.45,3.08,3.3,5.53,7.14,8.52,10.53,5.79,6.59,13.38,11.29,20.85,15.89,10.12,6.24,20.53,12.59,32.2,14.83,10.27,2,20.88.62,31.28,1.66a68.77,68.77,0,0,1,34,13.21c3.45,2.57,6.77,5.63,8.25,9.67,3.42,9.33-4,18.82-10.95,26"/> <path d="M421.32,311.76c7.8,7.8,77,27.29,101.33,34.75,7.56,2.31,15.46,4.07,23.32,3.23,5.8-.62,11.36-2.62,17.09-3.69,9.76-1.81,19.83-.86,29.64.66a259.44,259.44,0,0,1,56.88,15.61c10.14,4.07,20.28,8.85,31.17,9.73s23-3.16,28.22-12.79c1.8-3.35,2.53-7.81.13-10.77s-8.48-2-8.65,1.79"/> </g> <circle class="centerPulse" cx="400" cy="300" r="65" fill="none" stroke="#393534" stroke-width="25" opacity="1"/> <circle class="centerPulse" cx="400" cy="300" r="65" fill="none" stroke="#393534" stroke-width="15" opacity="0.8"/> <circle class="centerPulse" cx="400" cy="300" r="65" fill="none" stroke="#393534" stroke-width="10" opacity="0.5"/> <g class="dotContainer"/> <ellipse class="centerDot" cx="400" cy="300" rx="160" ry="160" fill="#393534" stroke="#ededed" stroke-width="0"/> </g> </svg> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,122 @@ var xmlns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink", select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, oDot = select('.orangeDot'), bDot = select('.blueDot'), wDot = select('.whiteDot'), dotsArr = [oDot, bDot, wDot], lineArr = selectAll('.tendrils path'), num = lineArr.length, dotContainer = select('.dotContainer'), pathArr = [] CustomEase.create("creep", "M0,0 C0.018,0.318 0.04,0.97 1,1"); CustomEase.create("drop", "M0,0 C0.172,0 0.952,-0.082 1,1") TweenMax.set('svg', { visibility: 'visible' }) var mainTl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1}); var introTl = new TimelineMax(); introTl .to('.centerDot',1, { attr:{ rx:36, ry:36 }, strokeWidth:50, fill:'#ff5d55', stroke:'#ff5d55', ease:'drop' }) .staggerTo('.centerPulse', 3, { cycle:{ stroke:['#7AC8F0','#ff5d55','#ededed'] }, attr:{ r:230 }, strokeWidth:0, alpha:0, ease:Expo.easeOut }, 0.196,'-=0.051') mainTl.add(introTl); function createPaths(){ TweenMax.set('.whole', { //rotation:randomBetween(0, 360), transformOrigin:'50% 50%' }) var path, dot, dur, line, rot, g ; for(var i = 0; i < num; i++){ g = document.createElementNS(xmlns, 'g'); dotContainer.appendChild(g); line = lineArr[i]; line.setAttribute('stroke', '#ededed'); line.setAttribute('stroke-width', '0.75'); line.setAttribute('fill', 'none'); path = MorphSVGPlugin.pathDataToBezier(line.getAttribute('d'), { offsetX: 0, offsetY: 0 }) g.appendChild(line); dot = createDot(); g.appendChild(dot); dur = randomBetween(40, 80)/10; rot = randomBetween(50, 70); TweenMax.set(dot, { attr:{ r:randomBetween(30, 90)/10 }, x:path[0].x, y:path[0].y }) var tl = new TimelineMax(); tl.to(dot, dur, { bezier: { type: "cubic", values: path, autoRotate: false }, ease: 'creep' }) .from(line, dur, { drawSVG:'0% 0%', ease: 'creep' },'-='+dur) .to(g,dur, { rotation:rot, svgOrigin:'400 300', ease: 'creep' },'-=' + dur) mainTl.add(tl, 1); } } function createDot(){ var r = Math.floor(Math.random()*3); return dotsArr[r].cloneNode(true); } createPaths() function randomBetween(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,4 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script> <script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script> <script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,23 @@ body { background-color:#393534; overflow: hidden; text-align:center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg{ width:100%; height:100%; visibility:hidden; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,9 @@ Tendrils -------- I really want to create thousands of these appearing randomly all over my studio walls. On each visit a new set of nodes and colours is generated as is the rotation speed and duration. Inspired by [this](https://dribbble.com/shots/2808974-Circles-Rule) A [Pen](http://codepen.io/chrisgannon/pen/VpLZjj) by [Chris Gannon](http://codepen.io/chrisgannon) on [CodePen](http://codepen.io/). [License](http://codepen.io/chrisgannon/pen/VpLZjj/license).