-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dc11ba2
commit 9622f98
Showing
12 changed files
with
362 additions
and
35 deletions.
There are no files selected for viewing
This file contains 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 characters
This file contains 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 characters
This file contains 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 characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| geometric-pattern(args...) | ||
| background-color: args[0] | ||
| background-image: linear-gradient(30deg, args[2] 12%, transparent 12.5%, transparent 87%, args[2] 87.5%, args[2]), linear-gradient(150deg, args[2] 12%, transparent 12.5%, transparent 87%, args[2] 87.5%, args[2]), linear-gradient(30deg, args[2] 12%, transparent 12.5%, transparent 87%, args[2] 87.5%, args[2]), linear-gradient(150deg, args[2] 12%, transparent 12.5%, transparent 87%, args[2] 87.5%, args[2]), linear-gradient(60deg, args[1] 25%, transparent 25.5%, transparent 75%, args[1] 75%, args[1]), linear-gradient(60deg, args[1] 25%, transparent 25.5%, transparent 75%, args[1] 75%, args[1]) | ||
| background-position: 0 0, 0 0, args[3] args[4], args[3] args[4], 0 0, args[3] args[4] | ||
| background-size: args[3] args[4] | ||
|
|
||
| conic-background($c, $deg = 45deg) | ||
| $arr = ($c + 12%), $c, ($c - 7%), ($c + 8%), $c, ($c - 5%), ($c + 12%), $c, ($c - 5%), ($c + 7%), $c, ($c - 7%), ($c + 15%) | ||
| background: radial-gradient(($c + 45%), ($c - 25%)) | ||
| background: conic-gradient(from $deg, $arr) | ||
|
|
||
| random(min, max) | ||
| return floor(math(0, 'random') * (max - min + 1) + min) |
This file contains 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 characters
This file contains 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 characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains 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 characters
This file contains 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 characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| // Animated background with low-poly triangles art | ||
| // Credits: Samuel Marchal (https://www.bypeople.com/svg-low-poly-background-css-js-snippet/) | ||
|
|
||
| export default function () { | ||
| const refreshDuration = 10000 | ||
| let refreshTimeout | ||
| let numPointsX | ||
| let numPointsY | ||
| let unitWidth | ||
| let unitHeight | ||
| let points | ||
|
|
||
| function onLoad() { | ||
| const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') | ||
| svg.setAttribute('width', window.innerWidth) | ||
| svg.setAttribute('height', window.innerHeight) | ||
| document.querySelector('#background').appendChild(svg) | ||
|
|
||
| const unitSize = (window.innerWidth + window.innerHeight) / 20 | ||
| numPointsX = Math.ceil(window.innerWidth / unitSize) + 1 | ||
| numPointsY = Math.ceil(window.innerHeight / unitSize) + 1 | ||
| unitWidth = Math.ceil(window.innerWidth / (numPointsX - 1)) | ||
| unitHeight = Math.ceil(window.innerHeight / (numPointsY - 1)) | ||
|
|
||
| points = [] | ||
|
|
||
| for (let y = 0; y < numPointsY; y++) { | ||
| for (let x = 0; x < numPointsX; x++) { | ||
| points.push( | ||
| { x: unitWidth * x, y: unitHeight * y, originX: unitWidth * x, originY: unitHeight * y } | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| randomize() | ||
|
|
||
| for (let i = 0; i < points.length; i++) { | ||
| if (points[i].originX !== unitWidth * (numPointsX - 1) && points[i].originY !== unitHeight * (numPointsY - 1)) { | ||
| const topLeftX = points[i].x | ||
| const topLeftY = points[i].y | ||
| const topRightX = points[i + 1].x | ||
| const topRightY = points[i + 1].y | ||
| const bottomLeftX = points[i + numPointsX].x | ||
| const bottomLeftY = points[i + numPointsX].y | ||
| const bottomRightX = points[i + numPointsX + 1].x | ||
| const bottomRightY = points[i + numPointsX + 1].y | ||
|
|
||
| const rnd = Math.floor(Math.random() * 2) | ||
|
|
||
| for (let n = 0; n < 2; n++) { | ||
| const polygon = document.createElementNS(svg.namespaceURI, 'polygon') | ||
|
|
||
| if (rnd === 0) { | ||
| if (n === 0) { | ||
| polygon.point1 = i | ||
| polygon.point2 = i + numPointsX | ||
| polygon.point3 = i + numPointsX + 1 | ||
| polygon.setAttribute( | ||
| 'points', | ||
| `${topLeftX},${topLeftY} ${bottomLeftX},${bottomLeftY} ${bottomRightX},${bottomRightY}` | ||
| ) | ||
| } else if (n === 1) { | ||
| polygon.point1 = i | ||
| polygon.point2 = i + 1 | ||
| polygon.point3 = i + numPointsX + 1 | ||
| polygon.setAttribute( | ||
| 'points', | ||
| `${topLeftX},${topLeftY} ${topRightX},${topRightY} ${bottomRightX},${bottomRightY}` | ||
| ) | ||
| } | ||
| } else if (rnd === 1) { | ||
| if (n === 0) { | ||
| polygon.point1 = i | ||
| polygon.point2 = i + numPointsX | ||
| polygon.point3 = i + 1 | ||
| polygon.setAttribute( | ||
| 'points', | ||
| `${topLeftX},${topLeftY} ${bottomLeftX},${bottomLeftY} ${topRightX},${topRightY}` | ||
| ) | ||
| } else if (n === 1) { | ||
| polygon.point1 = i + numPointsX | ||
| polygon.point2 = i + 1 | ||
| polygon.point3 = i + numPointsX + 1 | ||
| polygon.setAttribute( | ||
| 'points', | ||
| `${bottomLeftX},${bottomLeftY} ${topRightX},${topRightY} ${bottomRightX},${bottomRightY}` | ||
| ) | ||
| } | ||
| } | ||
| polygon.setAttribute('fill', `rgba(0,0,0,${Math.random() / 3})`) | ||
| const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate') | ||
| animate.setAttribute('fill', 'freeze') | ||
| animate.setAttribute('attributeName', 'points') | ||
| animate.setAttribute('dur', `${refreshDuration}ms`) | ||
| animate.setAttribute('calcMode', 'linear') | ||
| polygon.appendChild(animate) | ||
| svg.appendChild(polygon) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| refresh() | ||
| } | ||
|
|
||
| function randomize() { | ||
| for (let i = 0; i < points.length; i++) { | ||
| if (points[i].originX !== 0 && points[i].originX !== unitWidth * (numPointsX - 1)) { | ||
| points[i].x = points[i].originX + Math.random() * unitWidth - unitWidth / 2 | ||
| } | ||
| if (points[i].originY !== 0 && points[i].originY !== unitHeight * (numPointsY - 1)) { | ||
| points[i].y = points[i].originY + Math.random() * unitHeight - unitHeight / 2 | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function refresh() { | ||
| randomize() | ||
| for (let i = 0; i < document.querySelector('#background svg').childNodes.length; i++) { | ||
| const polygon = document.querySelector('#background svg').childNodes[i] | ||
| const animate = polygon.childNodes[0] | ||
| if (animate.getAttribute('to')) { | ||
| animate.setAttribute('from', animate.getAttribute('to')) | ||
| } | ||
| animate.setAttribute( | ||
| 'to', | ||
| `${points[polygon.point1].x},${points[polygon.point1].y} ${points[polygon.point2].x},${points[polygon.point2].y} ${points[polygon.point3].x},${points[polygon.point3].y}` | ||
| ) | ||
| animate.beginElement() | ||
| } | ||
| refreshTimeout = setTimeout(() => { refresh() }, refreshDuration) | ||
| } | ||
|
|
||
| function onResize() { | ||
| document.querySelector('#background svg').remove() | ||
| clearTimeout(refreshTimeout) | ||
| onLoad() | ||
| } | ||
|
|
||
| window.onload = onLoad | ||
| window.onresize = onResize | ||
| } |
Oops, something went wrong.