Skip to content

Instantly share code, notes, and snippets.

@sivartravis

sivartravis/index.html

Created March 10, 2017 16:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sivartravis/4f1454c978fb65d5049e8638596b39f9 to your computer and use it in GitHub Desktop.
Save sivartravis/4f1454c978fb65d5049e8638596b39f9 to your computer and use it in GitHub Desktop.
Download ZIP
Tendrils
Raw
index.html
<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>
Raw
script.js
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);
}
Raw
scripts
<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>
Raw
style.css
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;
}
Raw
tendrils.markdown

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

A Pen by Chris Gannon on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment