Skip to content

Instantly share code, notes, and snippets.

@caputomarcos

caputomarcos/hexagonal-spider-web-animation.markdown

Created July 10, 2022 04:34
Show Gist options
  • Save caputomarcos/bca56dcecb4d106a4d754f6dc70909a6 to your computer and use it in GitHub Desktop.
Save caputomarcos/bca56dcecb4d106a4d754f6dc70909a6 to your computer and use it in GitHub Desktop.
Download ZIP
Hexagonal Spider Web Animation
Raw
hexagonal-spider-web-animation.markdown

Hexagonal Spider Web Animation

Animation project for landing page background made in HTML and Stylus. This project is oriented to preserve the performance of browser.

A Pen by Guillermo on CodePen.

License.

Raw
index.html
<div class="hexagon-wrapper">
<div class="hexagon h-1">
<div class="left"></div>
<div class="right"></div>
<div class="bullet"></div>
</div>
<div class="hexagon h-2">
<div class="left"></div>
<div class="right"></div>
<div class="bullet"></div>
</div>
<div class="hexagon h-3">
<div class="left"></div>
<div class="right"></div>
<div class="bullet"></div>
</div>
<div class="hexagon h-4">
<div class="left"></div>
<div class="right"></div>
<div class="bullet"></div>
</div>
<div class="hexagon h-5">
<div class="left"></div>
<div class="right"></div>
<div class="bullet"></div>
</div>
<div class="hexagon h-6">
<div class="left"></div>
<div class="right"></div>
<div class="bullet"></div>
</div>
<div class="axis"></div>
</div>
Raw
style.stylus
$hexagones-size = 150
$hexagones = 7
$gap = 20
body
background: #222
.hexagon-wrapper
width: ($hexagones-size)px
height: ($hexagones-size)px
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
.hexagon
.left,
.left:before,
.left:after,
.right,
.right:before,
.right:after
background: rgba(255, 255, 255, 0.1)
.bullet
background: #444
/* ---------Hexagon */
for i in (1..$hexagones)
.h-{i}
position: absolute
height: ((100+$gap)-(i*$gap))%
width: ((100+$gap)-(i*$gap))%
top: 50%
left: 50%
transform: translate(-50%, -50%)
.bullet
position: absolute
width: 6px
height: 6px
left: (-36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px
top: 0
border-radius: 50%
border: 2px solid #222
margin: -4px 0 0 -4px
z-index: 1
right: -36.2%
will-change: top, left
-webkit-animation: hexagon-orbit-+i linear infinite
animation: hexagon-orbit-+i linear infinite
animation-duration: math(math(0, 'random') * 10 + 12, 'floor') s;
animation-delay: i+(-1) s
background: #444
.left
width: 100%
height: 1px
transform: rotate(90deg)
-moz-transform: rotate(90deg)
-webkit-transform: rotate(90deg)
transform-origin: 0 100%
-moz-transform-origin: 0 100%
-webkit-transform-origin: 0 100%
position: absolute
left: -36.2%
margin-top: -1px;
z-index: 0
&:before
content: ""
display: block
width: 100%
height: 1px
margin-top: -1px
margin-left: 1px
transform: rotate(-120deg)
-moz-transform: rotate(-120deg)
-webkit-transform: rotate(-120deg)
transform-origin: 0 100%
-moz-transform-origin: 0 100%
-webkit-transform-origin: 0 100%
&:after
content: ""
display: block
width: 100%
height: 1px
margin-top: -1px
transform: rotate(-240deg)
-moz-transform: rotate(-240deg)
-webkit-transform: rotate(-240deg)
transform-origin: 100% 100%
-moz-transform-origin: 100% 100%
-webkit-transform-origin: 100% 100%
.right
width: 100%
height: 1px
-webkit-transform: rotate(-90deg)
-webkit-transform-origin: 100% 0
position: absolute
right: -36.2%
z-index: 0
&:before
content: ""
display: block
width: 100%
height: 1px
margin-top: -1px;
-webkit-transform: rotate(-120deg)
-webkit-transform-origin: 0 100%
&:after
content: ""
display: block
width: 100%
height: 1px
margin-left: -1px
-webkit-transform: rotate(-240deg)
-webkit-transform-origin: 100% 100%
/* ----------- Animations */
@-webkit-keyframes hexagon-orbit-{i} {
0% {
transform: translate(0, 0)
}
16% {
transform: translate(((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))px, (-50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px)
}
33% {
transform: translate((((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))*2)px, 0)
}
49% {
transform: translate((((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))*2)px, ((((100+$gap)-(i*$gap))*$hexagones-size)/100)px)
}
64% {
transform: translate(((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))px, (150*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px)
}
83% {
transform: translate(0, ((((100+$gap)-(i*$gap))*$hexagones-size)/100)px)
}
100% {
transform: translate(0, 0)
}
}
@-moz-keyframes hexagon-orbit-{i} {
0% {
transform: translate(0, 0)
}
16% {
transform: translate(((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))px, (-50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px)
}
33% {
transform: translate((((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))*2)px, 0)
}
49% {
transform: translate((((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))*2)px, ((((100+$gap)-(i*$gap))*$hexagones-size)/100)px)
}
64% {
transform: translate(((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))px, (150*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px)
}
83% {
transform: translate(0, ((((100+$gap)-(i*$gap))*$hexagones-size)/100)px)
}
100% {
transform: translate(0, 0)
}
}
@keyframes hexagon-orbit-{i} {
0% {
transform: translate(0, 0)
}
16% {
transform: translate(((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))px, (-50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px)
}
33% {
transform: translate((((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))*2)px, 0)
}
49% {
transform: translate((((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))*2)px, ((((100+$gap)-(i*$gap))*$hexagones-size)/100)px)
}
64% {
transform: translate(((50*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)+(36.2*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100))px, (150*((((100+$gap)-(i*$gap))*$hexagones-size)/100)/100)px)
}
83% {
transform: translate(0, ((((100+$gap)-(i*$gap))*$hexagones-size)/100)px)
}
100% {
transform: translate(0, 0)
}
}
/* ----------- Axis */
.axis
position: absolute
width: 1px
top: -50%
bottom: -50%
background: rgba(255, 255, 255, 0.06)
left: 50%
z-index: 0
&:before
content:""
display: block
position: absolute
width: 1px
top: 0
bottom: 0
background: rgba(255, 255, 255, 0.06)
transform: rotate(60deg)
z-index: 0
&:after
content:""
display: block
position: absolute
width: 1px
top: 0
bottom: 0
background: rgba(255, 255, 255, 0.06)
transform: rotate(120deg)
z-index: 0
/* ---------- Presets */
.h-1
.left,
.left:before,
.left:after,
.right,
.right:before,
.right:after
background: rgba(255, 255, 255, 0.04)
.bullet
background: #444
.h-2
.left,
.left:before,
.left:after,
.right,
.right:before,
.right:after
background: rgba(255, 255, 255, 0.06)
.bullet
background: #444
.h-3
.left,
.left:before,
.left:after,
.right,
.right:before,
.right:after
background: rgba(255, 255, 255, 0.08)
.bullet
background: #793625
animation-direction: reverse
.h-4
.left,
.left:before,
.left:after,
.right,
.right:before,
.right:after
background: rgba(255, 255, 255, 0.1)
.bullet
background: #572E26
.h-5
.left,
.left:before,
.left:after,
.right,
.right:before,
.right:after
background: rgba(255, 255, 255, 0.1)
.bullet
background: #793625
animation-direction: reverse
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment