/
index6.html
115 lines (115 loc) · 9.54 KB
/
index6.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D Particle Explorations | Demo 6 | Codrops</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="demo-6">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="icon-github" viewBox="0 0 32.6 31.8">
<title>github</title>
<path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
</symbol>
<symbol id="icon-keyboard" viewBox="0 0 100 70">
<title>keyboard</title>
<!-- https://thenounproject.com/term/keyboard/783/ by Paul te Kortschot from the Noun Project -->
<path d="M 60.94,1.83 39.22,1.83 C 36.71,1.83 34.67,3.86 34.67,6.376 L 34.67,28.1 C 34.67,30.61 36.71,32.65 39.22,32.65 L 60.94,32.65 C 63.45,32.65 65.5,30.61 65.5,28.1 L 65.5,6.376 C 65.5,3.86 63.45,1.83 60.94,1.83 Z M 44.79,18.63 50.08,11.74 55.37,18.63 Z" opacity="0.2"/>
<path d="M 60.86,36.75 39.14,36.75 C 36.63,36.75 34.59,38.79 34.59,41.3 L 34.59,63.02 C 34.59,65.53 36.63,67.57 39.14,67.57 L 60.86,67.57 C 63.38,67.57 65.41,65.53 65.41,63.02 L 65.41,41.3 C 65.42,38.79 63.38,36.75 60.86,36.75 Z M 50.08,57.45 44.79,50.55 55.37,50.55 Z" opacity="0.2" />
<path d="M 95.45,36.75 73.73,36.75 C 71.22,36.75 69.18,38.79 69.18,41.3 L 69.18,63.02 C 69.18,65.53 71.22,67.57 73.73,67.57 L 95.45,67.57 C 97.97,67.57 100,65.53 100,63.02 L 100,41.3 C 100,38.79 97.97,36.75 95.45,36.75 Z M 83.4,57.45 83.4,46.86 90.3,52.16 Z" />
<path d="M 26.27,36.75 4.55,36.75 C 2.037,36.75 0,38.79 0,41.3 L 0,63.02 C 0,65.53 2.037,67.57 4.55,67.57 L 26.27,67.57 C 28.78,67.57 30.82,65.53 30.82,63.02 L 30.82,41.3 C 30.82,38.79 28.78,36.75 26.27,36.75 Z M 16.69,57.45 9.79,52.16 16.69,46.86 Z" />
</symbol>
<symbol id="icon-debug" viewBox="0 0 146.001 101">
<title>Toggle Debug Mode</title>
<path d="M145.448,72.105L129.237,64l16.211-8.105c0.494-0.247,0.694-0.848,0.447-1.342c-0.247-0.494-0.846-0.694-1.342-0.447
L127,62.882L111.237,55l16.211-8.105c0.494-0.247,0.694-0.848,0.447-1.342c-0.247-0.494-0.847-0.695-1.342-0.447L109,53.882
L93.237,46l16.211-8.105c0.494-0.247,0.694-0.848,0.447-1.342s-0.847-0.695-1.342-0.447L92,44.382V28V10
c0-0.013-0.005-0.024-0.005-0.037c-0.001-0.028-0.008-0.055-0.012-0.083c-0.011-0.093-0.036-0.185-0.074-0.274
c-0.007-0.017-0.006-0.036-0.014-0.053c-0.005-0.011-0.015-0.017-0.021-0.027c-0.057-0.105-0.128-0.198-0.213-0.273
c-0.018-0.016-0.04-0.026-0.059-0.04c-0.05-0.038-0.098-0.078-0.155-0.107l-18-9c-0.281-0.141-0.613-0.141-0.895,0l-18,9
c-0.057,0.029-0.106,0.069-0.155,0.107c-0.019,0.014-0.04,0.024-0.058,0.04c-0.085,0.075-0.156,0.168-0.213,0.273
c-0.006,0.01-0.016,0.016-0.021,0.027c-0.009,0.017-0.007,0.036-0.014,0.053c-0.039,0.09-0.063,0.182-0.074,0.274
c-0.003,0.028-0.011,0.055-0.012,0.083C54.005,9.976,54,9.987,54,10v18v16.382l-16.553-8.276c-0.496-0.248-1.095-0.047-1.342,0.447
c-0.247,0.494-0.047,1.095,0.447,1.342L52.764,46L37,53.882l-17.553-8.776c-0.495-0.248-1.095-0.046-1.342,0.447
c-0.247,0.494-0.047,1.095,0.447,1.342L34.764,55L19,62.882L1.448,54.105c-0.495-0.247-1.095-0.046-1.342,0.447
c-0.247,0.494-0.047,1.095,0.447,1.342L16.764,64L0.553,72.105c-0.494,0.247-0.694,0.848-0.447,1.342
C0.281,73.798,0.634,74,1.001,74c0.15,0,0.303-0.034,0.446-0.105L19,65.118L34.764,73l-16.211,8.105
c-0.494,0.247-0.694,0.848-0.447,1.342C18.281,82.798,18.634,83,19.001,83c0.15,0,0.303-0.034,0.446-0.105L37,74.118L52.764,82
l-16.211,8.105c-0.494,0.247-0.694,0.848-0.447,1.342C36.281,91.798,36.634,92,37.001,92c0.15,0,0.303-0.034,0.446-0.105L55,83.118
L70.764,91l-16.211,8.105c-0.494,0.247-0.694,0.848-0.447,1.342c0.175,0.351,0.528,0.553,0.896,0.553
c0.15,0,0.303-0.034,0.446-0.105L73,92.118l17.553,8.776c0.144,0.072,0.296,0.105,0.446,0.105c0.367,0,0.72-0.202,0.896-0.553
c0.247-0.494,0.047-1.095-0.447-1.342L75.237,91L91,83.118l17.553,8.776c0.144,0.072,0.296,0.105,0.446,0.105
c0.367,0,0.72-0.202,0.896-0.553c0.247-0.494,0.047-1.095-0.447-1.342L93.237,82L109,74.118l17.553,8.776
c0.144,0.072,0.296,0.105,0.446,0.105c0.367,0,0.72-0.202,0.896-0.553c0.247-0.494,0.047-1.095-0.447-1.342L111.237,73L127,65.118
l17.553,8.776c0.144,0.072,0.296,0.105,0.446,0.105c0.367,0,0.72-0.202,0.896-0.553C146.142,72.953,145.942,72.353,145.448,72.105z
M73,2.118L88.764,10L73,17.882L57.237,10L73,2.118z M56,11.618l0.118,0.059L70.764,19l1.118,0.559L72,19.618v1v14.764l-0.118-0.059
L57.237,28l-1.118-0.559L56,27.382v-1V11.618z M90,26.382v1l-0.118,0.059L88.764,28L74,35.382V20.618v-1l0.118-0.059L75.237,19
L90,11.618V26.382z M56,47.618l0.118,0.059L70.764,55l0,0l1.118,0.559L72,55.618v1v14.764l-0.118-0.059L57.237,64l0,0l-1.118-0.559
L56,63.382v-1V47.618z M75.236,55L75.236,55L90,47.618v14.764v1l-0.118,0.059L88.764,64l0,0L74,71.382V56.618v-1l0.118-0.059
L75.236,55z M106.764,55L92,62.382V47.618L106.764,55z M90,44.382v1l-0.118,0.059L88.764,46l0,0L74,53.382V38.618v-1l0.118-0.059
L75.237,37L90,29.618V44.382z M56,29.618l0.118,0.059L70.764,37l1.118,0.559L72,37.618v1v14.764l-0.118-0.059L57.237,46l0,0
l-1.118-0.559L56,45.382v-1V29.618z M54,62.382L39.237,55L54,47.618V62.382z M21.237,64L37,56.118L52.764,64L37,71.882L21.237,64z
M39.237,73L55,65.118L70.764,73L55,80.882L39.237,73z M57.237,82L73,74.118L88.764,82L73,89.882L57.237,82z M75.237,73L91,65.118
L106.764,73L91,80.882L75.237,73z M93.237,64L109,56.118L124.764,64L109,71.882L93.237,64z"/>
</symbol>
</svg>
<main>
<div class="content content--fixed">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">3D Particle Explorations</h1>
<span class="info"></span>
</header>
<a class="github" href="" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
<nav class="demos">
<svg class="icon icon--keyboard"><use xlink:href="#icon-keyboard"></use></svg>
<a class="demo" href="index.html"><span>Demo 1</span></a>
<a class="demo" href="index2.html"><span>Demo 2</span></a>
<a class="demo" href="index3.html"><span>Demo 3</span></a>
<a class="demo" href="index4.html"><span>Demo 4</span></a>
<a class="demo" href="index5.html"><span>Demo 5</span></a>
<a class="demo demo--current" href="index6.html"><span>Demo 6</span></a>
<a class="demo" href="index7.html"><span>Demo 7</span></a>
<a class="demo" href="index8.html"><span>Demo 8</span></a>
<svg class="icon icon--debug" title="Toggle Debug Mode"><use xlink:href="#icon-debug"></use></svg>
</nav>
<!-- Pater
<a class="pater" href="" rel="nofollow" onClick="recordOutboundLink(this, 'Outbound Links', 'CODEHERE');return false;">
<div class="pater__img"><div class="pater__img-inner"></div></div>
<h3 class="pater__title"></h3>
<p class="pater__description"></p>
</a>-->
</div>
<div class="loader"></div>
<div class="content-outer">
<div class="content-inner">
<h1>Codrops</h1>
<p>Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge.</p>
<a href="#" class="replay-loader">Replay Loader</a>
</div>
</div>
</main>
<script src="js/demo.js"></script>
<script src="js/vendor/three.min.js"></script>
<script src="js/vendor/OrbitControls.js"></script>
<script src="js/vendor/fast-simplex-noise.js"></script>
<script src="dist/js/demo-6/index.bundle.js"></script>
</body>
</html>