-
Notifications
You must be signed in to change notification settings - Fork 0
/
Circular-Navigation-Menu.html
618 lines (540 loc) · 33.9 KB
/
Circular-Navigation-Menu.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
<meta http-equiv="content-language" content="en">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="author" content="DarkSoul">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="keywords" content="DarkSoul CodePen, Circular Navigation Menu, Circular Navigation Menu Codepen , Circular Navigation, Navigation Menu, Navigation Menu in circle, circle Navigation Menu, Dark Soul Codepens, DarkSoul CodePen How To's Blogs, DarkSoul UI/UX Designs, DarkSoul Codedamn" />
<meta name="description" content="Explore an innovative Circular Navigation Menu on DarkSoul CodePen. Experience live previews and effortlessly download the source code for seamless integration into your projects. Elevate your web design with this sleek and intuitive navigation solution." />
<title>Circular Navigation Menu Codepen - DarkSoul CodePen</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional CSS Files -->
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/darksoul-codepen.css">
<link rel="stylesheet" href="assets/css/owl.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet"href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
textarea
{
resize: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: large;
min-height: 400px;
background-color: rgba(19, 19, 19, 0.44);
border: none;
border-radius: 15px;
font-weight: 500;
color: rgb(255, 255, 255);
}
p{
color: #ffffff;
margin: auto;
}
li
{
list-style-type: square;
color: #B1E3FA;
}
strong
{
color: #B1E3FA;
}
h1
{
font-weight: 900 !important;
margin-bottom: 40px;
}
h2,h4
{
font-weight: 900 !important;
}
/* width */
::-webkit-scrollbar
{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track
{
background-color: rgba(226, 247, 255, 0);
}
/* Handle */
::-webkit-scrollbar-thumb
{
background: #B1E3FA;
border-radius: 10px;
height: 10px;
width: 3px;
}
.most-popular p
{
text-align: justify;
}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0XRHJTRGGH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0XRHJTRGGH');
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9669180356185936"
crossorigin="anonymous"></script>
<!-- Clarity tracking code for https://darksoul-codepen.github.io/ -->
<script>
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i+"?ref=bwt";
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "k6ctefq607");
</script>
</head>
<body>
<!-- ***** Preloader Start ***** -->
<div id="js-preloader" class="js-preloader">
<div class="preloader-inner">
<span class="dot"></span>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- ***** Preloader End ***** -->
<!-- ***** Header Area Start ***** -->
<header class="header-area header-sticky" style="background-color: rgba(0, 0, 0, 0);">
<div class="container" style="padding: 0px;">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="https://darksoul-codepen.github.io/" class="logo">
<img src="assets/images/logo.png" alt="DarkSoul CodePen - Logo" width="100%">
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Search End ***** -->
<div class="darksoul-search-bar" id="searchbar">
<i class="fa fa-search"></i>
<input id="searchbarinput" class="darksoul-search-bar-input" type="text" name="search" id="searchval" placeholder="Type something" />
<div class="darksoul-dropdown" id="dropdown">
<ul id="resultlist">
<a href="https://darksoul-codepen.github.io/How-to-center-an-image-using-display-flex.html"><li><p>How to Center an Image Using Display Flex</p></li></a>
<a href="https://darksoul-codepen.github.io/How-to-create-and-style-buttons-like-bootstrap.html"><li><p>How to Create and Style Buttons like Bootstrap</p></li></a>
<a href="https://darksoul-codepen.github.io/How-to-Create-an-Animated-Alert-box.html"><li><p>How to Create an Animated Alert Box</p></li></a>
<a href="https://darksoul-codepen.github.io/How-to-Find-the-Size-of-a-GitHub-Repository.html"><li><p>How to Find the Size of a GitHub Repo</p></li></a>
<a href="https://darksoul-codepen.github.io/How-to-merge-Video-and-Text-in-PPT.html"><li><p>How to Merge Video and Text in PPT</p></li></a>
<a href="https://darksoul-codepen.github.io/How-to-merge-Picture-and-Text-in-PPT.html"><li><p>How to Merge Picture and Text in PPT</p></li></a>
<a href="https://darksoul-codepen.github.io/CSS-Shapes-Lab.html"><li><p>CSS Shapes Lab Codedamn</p></li></a>
<a href="https://darksoul-codepen.github.io/Header-Tag-Lab.html"><li><p>Header Tag Lab Codedamn</p></li></a>
<a href="https://darksoul-codepen.github.io/Radio-Buttons-Lab.html"><li><p>Radio Buttons Lab Codedamn</p></li></a>
<a href="https://darksoul-codepen.github.io/Fibonacci-Generator-Lab.html"><li><p>Fibonacci Generator Lab Codedamn</p></li></a>
<a href="https://darksoul-codepen.github.io/Color-Change-Lab.html"><li><p>Color Change Lab Codedamn</p></li></a>
<a href="https://darksoul-codepen.github.io/Glassy-Date-Time-Weather-Widget.html"><li><p>Glassy Date,Time & Weather Widget CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Glassy-Music-Player.html"><li><p>Glassy Music Player CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Circular-Navigation-Menu.html"><li><p>Circular Navigation Menu CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Neumorphic-Theme-Toggle-Switch.html"><li><p>Neumorphism Toggle Switch CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Glowing-Border-Button.html"><li><p>Glowing Border Button CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Sticky-Search-Bar.html"><li><p>Sticky Search Bar CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Glowing-Gradient-Border-cards.html"><li><p>Glowing Gradient Border Cards CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Hover-Fill-Card.html"><li><p>Hover Fill Card CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Hover-Fill-Button.html"><li><p>Hover Fill Button CodePen</p></li></a>
<a href="https://darksoul-codepen.github.io/Preloader.html"><li><p>Preloader CodePen</p></li></a>
</ul>
</div>
</div>
<!-- ***** Search End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li><a href="https://darksoul-codepen.github.io/">Home</a></li>
<li><a href="posts.html">Posts</a></li>
<li><a href="codepen.html" class="active">CodePens</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About Me <img src="assets/images/profile-header.png" alt="DarkSoul Profile"></a></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>
</div>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-content">
<!-- ***** Banner Start ***** -->
<div class="main-banner">
<div class="row">
<div class="col-lg-7">
<div class="header-text">
<h1 style="color: #38B6FF;">Circular <b style="color: #000000;">Navigation Menu</b> CodePen</h1>
<h6 style="color: black;">CodePen</h6>
<div class="main-button">
<a href="Circular-Navigation-Menu/Preview-Circular-Navigation-Menu.html">Preview</a>
<a href="Zips/Circular-Navigation-Menu.zip" download>Download Source code</a>
</div>
</div>
</div>
</div>
</div>
<!-- ***** Banner End ***** -->
<!-- ***** Most Popular Start ***** -->
<div class="most-popular">
<div class="row">
<div class="col-lg-12">
<div class="heading-section">
<h4>Procedure</h4>
<div class="row">
<p><b>Step 1 - Create the HTML structure:</b><br />Start with the basic HTML structure and add the necessary div elements to represent the circular navigation menu.</p>
<p><b>Step 2 - Style the body:</b><br />Set the margin to 0, and set the height and width to 100% to cover the entire viewport. Use flexbox to align items vertically.</p>
<p><b>Step 3 - Style the .darksoul-circular-nav:</b><br />Set the margin to auto to horizontally center the menu. Set the width and height to 300px to create a circular shape. Use grid layout with three columns to position the menu items evenly.</p>
<p><b>Step 4 - Style the .darksoul-circle-1,2,3..9 classes:</b><br /> Define styles for individual menu items. Set the width, height, and border-radius to create circular shapes. Adjust other properties like background color, box-shadow, and margin to achieve the desired visual appearance.</p>
<p><b>Step 5 - Add the Menu icons:</b><br />Download or get the menu icons needed from <a href="https://icons8.com/" target="_blank">Icons8</a> in svg or png and set the margin to auto to center them horizontally. Optionally, you can define animation properties for rotation.</p>
<p><b>Step 6 - Add hover effects:</b><br />Define styles for menu items when hovered over. For example, increase the scale of the hovered item, change box-shadow, and pause any ongoing animations.</p>
<p><b>Step 7 - Implement animation control:</b><br /> Define JavaScript functions to start and stop the animation when the mouse hovers over the menu.</p>
<p><b>Step 8 - Bind event listeners:</b><br /> Add event listeners to the circular navigation menu div to trigger the animation control functions on mouseover and mouseout events.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ***** Most Popular End ***** -->
<!-- ***** Most Popular Start ***** -->
<div class="most-popular">
<div class="row">
<div class="col-lg-12">
<div class="heading-section">
<h4>Html</h4>
</div>
<div class="row">
<textarea disabled id="html">
<!DOCTYPE html>
<html lang="en">
<head>
/* Internal styles goes here.. */
</head>
<body>
<div class="darksoul-circular-nav" onmouseover="stopanim()" onmouseout="startanim()" id="svg">
<div class="darksoul-circle-1">
</div>
<div class="darksoul-circle-2">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path d="M 12.462891 2.9921875 C 7.2252655 2.9921875 2.9570313 7.2584727 2.9570312 12.496094 C 2.9570313 17.733715 7.2252655 22.001953 12.462891 22.001953 C 13.551086 22.001953 14.59344 21.809606 15.568359 21.470703 C 15.99358 22.887072 16.692358 24.307595 17.519531 25.537109 C 18.577194 27.109224 19.7277 28.416844 21.224609 28.794922 C 26.102058 30.025875 30.187787 25.499181 28.738281 21.185547 C 28.256532 19.751584 26.978583 18.591015 25.451172 17.566406 C 24.223816 16.743079 22.81752 16.060497 21.423828 15.638672 C 21.771069 14.653136 21.96875 13.598209 21.96875 12.496094 C 21.96875 7.2584726 17.700515 2.9921875 12.462891 2.9921875 z M 12.462891 4.9921875 C 16.619636 4.9921875 19.96875 8.339351 19.96875 12.496094 C 19.96875 15.357898 18.380714 17.836704 16.035156 19.103516 A 1.0001 1.0001 0 0 0 15.617188 19.304688 C 14.657924 19.748285 13.592418 20.001953 12.462891 20.001953 C 8.306145 20.001953 4.9570313 16.652836 4.9570312 12.496094 C 4.9570312 8.339351 8.306145 4.9921875 12.462891 4.9921875 z M 20.542969 17.472656 C 21.786212 17.810526 23.17863 18.450868 24.337891 19.228516 C 25.66373 20.117907 26.6425 21.223229 26.84375 21.822266 C 27.804244 24.680631 25.251442 27.748516 21.712891 26.855469 C 21.264781 26.740933 20.097832 25.784656 19.179688 24.419922 C 18.399212 23.25982 17.748239 21.852135 17.408203 20.595703 C 18.682449 19.814124 19.756598 18.743656 20.542969 17.472656 z"/></svg>
</div>
<div class="darksoul-circle-3">
</div>
<div class="darksoul-circle-4">
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32">
<path d="M 20.455078 4.7519531 C 19.347051 4.7757776 18.202062 5.0893295 17.111328 5.7636719 C 14.890526 7.1361011 12.838975 8.7495765 10.990234 10.566406 C 8.5649573 12.950567 6.8890333 15.898332 5.8632812 19.070312 A 1.0001 1.0001 0 0 0 5.6757812 19.724609 C 5.0803984 21.789935 4.6916746 23.920766 4.7421875 26.107422 C 4.7563305 26.730187 5.2715454 27.244697 5.8945312 27.257812 C 8.0805181 27.308113 10.210713 26.919488 12.275391 26.324219 A 1.0001 1.0001 0 0 0 12.929688 26.136719 C 16.101605 25.110844 19.048028 23.433772 21.431641 21.007812 C 23.249576 19.157965 24.862109 17.106227 26.234375 14.886719 C 28.032621 11.978096 27.264736 8.6944239 25.285156 6.7148438 C 24.295366 5.7250536 22.978936 5.0371209 21.546875 4.8222656 C 21.18886 4.7685518 20.82442 4.7440116 20.455078 4.7519531 z M 20.541016 6.7207031 C 20.796625 6.7147589 21.047429 6.732706 21.292969 6.7714844 C 22.275127 6.9265978 23.165509 7.4233213 23.871094 8.1289062 C 25.282264 9.5400762 25.858957 11.691561 24.533203 13.835938 C 24.461793 13.951431 24.355983 14.039771 24.283203 14.154297 C 22.809995 11.415367 20.586852 9.18791 17.851562 7.7089844 C 17.963773 7.6377404 18.050919 7.5347649 18.164062 7.4648438 C 18.968204 6.9676861 19.774189 6.7385358 20.541016 6.7207031 z M 16.125 9.0644531 C 19.138178 10.456945 21.544591 12.863417 22.929688 15.880859 C 21.993489 17.156927 21.112563 18.479338 20.005859 19.605469 C 18.042935 21.603265 15.661654 23.069064 13.082031 24.023438 C 12.548664 21.426565 10.573434 19.451336 7.9765625 18.917969 C 8.9306698 16.338659 10.395766 13.957421 12.392578 11.994141 C 13.520031 10.886148 14.846417 10.002092 16.125 9.0644531 z M 7.4335938 20.806641 C 9.3891799 21.132294 10.867706 22.61082 11.193359 24.566406 C 9.7647736 24.934212 8.3058475 25.156333 6.8105469 25.189453 C 6.8436669 23.694148 7.0658132 22.235277 7.4335938 20.806641 z"></path>
</svg>
</div>
<div class="darksoul-circle-5">
<svg id="svg5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path d="M 16.105469 2.5351562 C 15.649335 2.5315682 15.193947 2.6430484 14.791016 2.8710938 C 12.204135 4.3291982 9.3582739 6.0810231 6.3964844 7.7871094 A 1.0001 1.0001 0 0 0 6.390625 7.7910156 C 4.934111 8.6442641 3.7537333 9.984391 3.5507812 11.599609 A 1.0001 1.0001 0 0 0 3.5507812 11.601562 C 3.070352 15.475925 3.2819546 19.358573 4.1835938 23.226562 A 1.0001 1.0001 0 0 0 4.1894531 23.246094 C 4.4585727 24.308167 5.1073155 25.27809 5.9121094 26.095703 C 6.7169032 26.913317 7.6791299 27.579013 8.7421875 27.863281 A 1.0001 1.0001 0 0 0 8.7617188 27.869141 C 13.579059 29.056186 18.420941 29.056186 23.238281 27.869141 A 1.0001 1.0001 0 0 0 23.257812 27.863281 C 24.320871 27.579013 25.283157 26.913542 26.087891 26.095703 C 26.892624 25.277864 27.542058 24.306963 27.810547 23.244141 A 1.0001 1.0001 0 0 0 27.814453 23.226562 C 28.718163 19.352345 28.930776 15.464439 28.447266 11.583984 A 1.0001 1.0001 0 0 0 28.445312 11.582031 C 28.242468 9.9798449 27.07737 8.6471954 25.634766 7.7910156 A 1.0001 1.0001 0 0 0 25.628906 7.7871094 C 22.732857 6.095988 19.951052 4.355459 17.417969 2.8886719 C 17.01807 2.6566693 16.561603 2.5387444 16.105469 2.5351562 z M 16.091797 4.5097656 C 16.190422 4.5107078 16.289962 4.5471445 16.414062 4.6191406 C 18.902981 6.0603535 21.691183 7.8027971 24.621094 9.5136719 C 25.63428 10.117407 26.372813 11.145633 26.460938 11.832031 C 26.91478 15.474383 26.718353 19.107322 25.869141 22.755859 C 25.727048 23.31585 25.268911 24.076675 24.662109 24.693359 C 24.055311 25.31004 23.303878 25.779371 22.744141 25.929688 C 21.997265 26.11325 21.253393 26.082382 20.507812 26.205078 C 20.945272 23.683317 20.958002 21.066257 20.421875 18.570312 A 1.0001 1.0001 0 0 0 20.396484 18.341797 A 1.0001 1.0001 0 0 0 20.375 18.261719 A 1.0001 1.0001 0 0 0 20.371094 18.246094 A 1.0001 1.0001 0 0 0 20.363281 18.222656 A 1.0001 1.0001 0 0 0 20.355469 18.203125 A 1.0001 1.0001 0 0 0 20.324219 18.130859 A 1.0001 1.0001 0 0 0 20.277344 18.042969 A 1.0001 1.0001 0 0 0 19.386719 17.550781 C 17.224714 16.610059 14.8144 16.617036 12.652344 17.554688 A 1.0001 1.0001 0 0 0 11.603516 18.341797 C 11.602316 18.346897 11.602764 18.352322 11.601562 18.357422 A 1.0001 1.0001 0 0 0 11.578125 18.564453 A 1.0001 1.0001 0 0 0 11.578125 18.568359 C 11.04162 21.064863 11.054622 23.68268 11.492188 26.205078 C 10.746607 26.082382 10.002735 26.113247 9.2558594 25.929688 C 8.6960893 25.779394 7.9448786 25.310016 7.3378906 24.693359 C 6.7320554 24.077874 6.2742554 23.319202 6.1308594 22.759766 C 5.2833441 19.117002 5.0844626 15.486039 5.5351562 11.849609 L 5.5351562 11.847656 C 5.623024 11.154921 6.3775335 10.115977 7.4023438 9.515625 C 10.394786 7.7916807 13.239164 6.0397011 15.773438 4.6113281 A 1.0001 1.0001 0 0 0 15.775391 4.6113281 C 15.895459 4.5433734 15.993171 4.5088235 16.091797 4.5097656 z M 16 18.744141 C 16.858834 18.742541 17.69746 19.001507 18.505859 19.339844 C 18.957083 21.671327 18.962039 24.134409 18.478516 26.455078 C 16.827372 26.604628 15.172628 26.604628 13.521484 26.455078 C 13.038759 24.138253 13.043261 21.679682 13.492188 19.351562 C 14.299845 19.009047 15.139857 18.745697 16 18.744141 z"/></svg>
</div>
<div class="darksoul-circle-6">
<svg id="svg3" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32">
<path d="M 15.857422 3.015625 C 13.583363 3.0341579 11.309618 3.4941687 9.0605469 4.3945312 C 7.3131314 5.0939849 6.0588651 6.6124601 5.5742188 8.3867188 C 3.9302864 14.408984 3.979683 20.470192 5.7207031 26.490234 C 6.1731256 28.054988 7.8218378 29.052054 9.4257812 28.574219 A 1.0001 1.0001 0 0 0 9.4277344 28.574219 C 11.461092 27.967103 13.817877 26.805283 15.982422 25.089844 C 16.004472 25.072364 15.982511 25.07049 16.009766 25.09375 A 1.0001 1.0001 0 0 0 16.009766 25.095703 C 18.117576 26.890652 20.550662 28.017842 22.609375 28.597656 C 24.205007 29.047667 25.825388 28.05488 26.275391 26.505859 A 1.0001 1.0001 0 0 0 26.275391 26.503906 C 28.018455 20.482908 28.071568 14.421752 26.429688 8.3984375 C 25.909351 6.4889364 24.479412 4.9842541 22.658203 4.2851562 C 20.407376 3.4208261 18.131481 2.9970921 15.857422 3.015625 z M 15.873047 5.0019531 C 17.887483 4.985486 19.903233 5.3696739 21.941406 6.1523438 C 23.194197 6.633246 24.154336 7.6553292 24.5 8.9238281 C 26.05012 14.610514 26.000458 20.25827 24.353516 25.947266 L 24.355469 25.947266 C 24.199472 26.484245 23.648712 26.811864 23.152344 26.671875 A 1.0001 1.0001 0 0 0 23.150391 26.671875 C 21.353793 26.165883 19.148358 25.140254 17.308594 23.574219 L 17.306641 23.572266 C 16.583881 22.957185 15.489496 22.929464 14.740234 23.523438 C 12.788779 25.069999 10.620112 26.131319 8.8554688 26.658203 C 8.3519949 26.808257 7.8008041 26.483891 7.6425781 25.935547 A 1.0001 1.0001 0 0 0 7.6425781 25.933594 C 5.9975982 20.245683 5.9518386 14.599797 7.5039062 8.9140625 C 7.8332599 7.708321 8.6841029 6.7004995 9.8046875 6.2519531 C 11.844616 5.4353157 13.858606 5.0184202 15.873047 5.0019531 z"></path>
</svg>
</div>
<div class="darksoul-circle-7">
</div>
<div class="darksoul-circle-8">
<svg id="svg4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32">
<path d="M 16 3 C 8.8321388 3 3 8.832144 3 16 C 3 23.167856 8.8321388 29 16 29 C 23.167861 29 29 23.167856 29 16 C 29 8.832144 23.167861 3 16 3 z M 16 5 C 22.086982 5 27 9.9130223 27 16 C 27 22.086978 22.086982 27 16 27 C 9.9130183 27 5 22.086978 5 16 C 5 9.9130223 9.9130183 5 16 5 z M 15.822266 9 C 14.45725 9 13.289623 9.988467 13.029297 11.314453 C 12.955127 11.690538 12.891325 12.066997 12.835938 12.445312 C 12.802727 12.66688 12.665355 12.803239 12.443359 12.835938 C 12.065681 12.891267 11.689906 12.955249 11.314453 13.029297 C 9.9891902 13.289481 9 14.45725 9 15.822266 L 9 16.123047 C 9 17.515153 9.9891902 18.710519 11.314453 18.970703 C 11.689906 19.044753 12.065681 19.108735 12.443359 19.164062 C 12.665908 19.196842 12.803159 19.334092 12.835938 19.556641 C 12.891267 19.934319 12.955249 20.310094 13.029297 20.685547 C 13.289623 22.011533 14.45725 23 15.822266 23 L 16.177734 23 C 17.54275 23 18.710377 22.011533 18.970703 20.685547 C 19.044753 20.310094 19.108735 19.934319 19.164062 19.556641 L 19.164062 19.554688 C 19.197192 19.333673 19.333674 19.197189 19.554688 19.164062 C 19.933004 19.108673 20.309462 19.044875 20.685547 18.970703 C 22.01081 18.710566 23 17.54275 23 16.177734 L 23 15.876953 C 23 14.484847 22.01081 13.289481 20.685547 13.029297 C 20.310094 12.955247 19.934319 12.891264 19.556641 12.835938 L 19.554688 12.835938 C 19.333673 12.802808 19.197189 12.666327 19.164062 12.445312 L 19.164062 12.443359 C 19.108783 12.065728 19.044751 11.689906 18.970703 11.314453 C 18.710377 9.988467 17.54275 9 16.177734 9 L 15.822266 9 z M 15.822266 11 L 16.177734 11 C 16.586719 11 16.926139 11.283205 17.007812 11.699219 A 1.0001 1.0001 0 0 0 17.007812 11.701172 C 17.075643 12.045087 17.134936 12.388692 17.185547 12.734375 A 1.0001 1.0001 0 0 0 17.185547 12.736328 C 17.342768 13.803779 18.196221 14.657232 19.263672 14.814453 A 1.0001 1.0001 0 0 0 19.265625 14.814453 C 19.611308 14.865063 19.954913 14.924359 20.298828 14.992188 A 1.0001 1.0001 0 0 0 20.300781 14.992188 C 20.717424 15.073909 21 15.385059 21 15.876953 L 21 16.177734 C 21 16.586719 20.717518 16.925997 20.300781 17.007812 A 1.0001 1.0001 0 0 0 20.298828 17.007812 C 19.954913 17.075643 19.611308 17.134936 19.265625 17.185547 A 1.0001 1.0001 0 0 0 19.263672 17.185547 C 18.196221 17.342768 17.342768 18.196221 17.185547 19.263672 A 1.0001 1.0001 0 0 0 17.185547 19.265625 C 17.134937 19.611308 17.07564 19.954913 17.007812 20.298828 A 1.0001 1.0001 0 0 0 17.007812 20.300781 C 16.926232 20.716701 16.586719 21 16.177734 21 L 15.822266 21 C 15.413281 21 15.073862 20.716795 14.992188 20.300781 A 1.0001 1.0001 0 0 0 14.992188 20.298828 C 14.924357 19.954913 14.865064 19.611308 14.814453 19.265625 A 1.0001 1.0001 0 0 0 14.814453 19.263672 C 14.657232 18.196221 13.803779 17.342768 12.736328 17.185547 A 1.0001 1.0001 0 0 0 12.734375 17.185547 C 12.388692 17.134937 12.045087 17.07564 11.701172 17.007812 A 1.0001 1.0001 0 0 0 11.699219 17.007812 C 11.282576 16.92609 11 16.614941 11 16.123047 L 11 15.822266 C 11 15.413281 11.282482 15.074004 11.699219 14.992188 A 1.0001 1.0001 0 0 0 11.701172 14.992188 C 12.045087 14.924357 12.388692 14.865064 12.734375 14.814453 A 1.0001 1.0001 0 0 0 12.736328 14.814453 C 13.803779 14.657232 14.657232 13.803779 14.814453 12.736328 A 1.0001 1.0001 0 0 0 14.814453 12.734375 C 14.865063 12.388692 14.924359 12.045087 14.992188 11.701172 A 1.0001 1.0001 0 0 0 14.992188 11.699219 C 15.073767 11.283299 15.413281 11 15.822266 11 z"></path>
</svg>
</div>
<div class="darksoul-circle-9">
</div>
</div>
<p class="disclaimer">Designed & Created by <a href="https://darksoul-codepen.github.io/" target="_blank">DarkSoul</a> | Icons by <a href="https://icons8.com/" target="_blank">Icons8</a></p>
/* Script goes here.. */
</body>
</html>
</textarea>
</div>
</div>
</div>
</div>
<!-- ***** Most Popular End ***** -->
<!-- ***** Most Popular Start ***** -->
<div class="most-popular">
<div class="row">
<div class="col-lg-12">
<div class="heading-section">
<h4>Css</h4>
</div>
<div class="row">
<textarea disabled id="css">
.body
{
margin: 0;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0);
overflow: hidden;
}
.darksoul-circular-nav
{
margin: auto;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: auto auto auto;
border-radius: 50%;
animation-name: nav-rotate;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-delay: 0s;
animation-timing-function: linear;
}
.darksoul-circle-1
{
width: 50px;
height: 50px;
border-radius: 50%;
margin: auto;
}
.darksoul-circle-2
{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 20px rgb(208, 207, 207);
margin: auto;
display: flex;
}
.darksoul-circle-3
{
width: 50px;
height: 50px;
border-radius: 50%;
margin: auto;
}
.darksoul-circle-4
{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 20px rgb(208, 207, 207);
margin: auto;
display: flex;
}
.darksoul-circle-5
{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 20px rgb(208, 207, 207);
margin: auto;
display: flex;
}
svg
{
margin: auto;
animation-name: svg-rotate;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-delay: 0s;
animation-timing-function: linear;
}
.darksoul-circle-6
{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 20px rgb(208, 207, 207);
margin: auto;
display: flex;
}
.darksoul-circle-7
{
width: 50px;
height: 50px;
border-radius: 50%;
margin: auto;
}
.darksoul-circle-8
{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 20px rgb(208, 207, 207);
margin: auto;
display: flex;
}
.darksoul-circle-9
{
width: 50px;
height: 50px;
border-radius: 50%;
margin: auto;
}
.darksoul-circular-nav:hover
{
animation-play-state: paused;
}
.darksoul-circle-2:hover
{
transform: scale(1.09);
transition: 0.5s;
cursor: pointer;
box-shadow: 1px 1px 40px rgb(208, 207, 207);
animation-play-state: paused;
}
.darksoul-circle-4:hover
{
transform: scale(1.09);
transition: 0.5s;
cursor: pointer;
}
.darksoul-circle-6:hover
{
transform: scale(1.09);
transition: 0.5s;
cursor: pointer;
}
.darksoul-circle-8:hover
{
transform: scale(1.09);
transition: 0.5s;
cursor: pointer;
}
.darksoul-circle-5:hover
{
transform: scale(1.09);
transition: 0.5s;
cursor: pointer;
}
@keyframes nav-rotate {
100%
{
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
100%
{
transform: rotate(-360deg);
}
}
.disclaimer
{
margin: auto;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a
{
color: black;
text-decoration: none;
font-weight: 500;
}
a:hover
{
color: rgb(105, 106, 106);
}
</textarea>
</div>
</div>
</div>
</div>
<!-- ***** Most Popular End ***** -->
<!-- ***** Most Popular Start ***** -->
<div class="most-popular">
<div class="row">
<div class="col-lg-12">
<div class="heading-section">
<h4>Js</h4>
</div>
<div class="row">
<textarea disabled id="js">
<script async>
let s1 = document.getElementById("svg1");
let s2 = document.getElementById("svg2");
let s3 = document.getElementById("svg3");
let s4 = document.getElementById("svg4");
let s5 = document.getElementById("svg5");
function stopanim() {
s1.style.animationPlayState = "paused";
s2.style.animationPlayState = "paused";
s3.style.animationPlayState = "paused";
s4.style.animationPlayState = "paused";
s5.style.animationPlayState = "paused";
}
function startanim() {
s1.style.animationPlayState = "running";
s2.style.animationPlayState = "running";
s3.style.animationPlayState = "running";
s4.style.animationPlayState = "running";
s5.style.animationPlayState = "running";
}
</script>
</textarea>
</div>
</div>
</div>
</div>
<!-- ***** Most Popular End ***** -->
<!-- ***** Gaming Library Start ***** -->
<div class="gaming-library">
<div class="col-lg-12">
<div class="heading-section">
<h4>Output Screenshot</h4>
</div>
<img src="Circular-Navigation-Menu/Output-Screenshot-Circular-Navigation-Menu.png" alt="Output Screenshot - Circular Navigation Menu" style="width: 100%; border-radius: 10px;"/>
<p> </p>
<div class="col-lg-12">
<div class="main-button">
<a href="Circular-Navigation-Menu/Preview-Circular-Navigation-Menu.html">View Live Output</a>
</div>
</div>
</div>
<!-- ***** Gaming Library End ***** -->
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>Copyright © 2024 <a href="https://darksoul-codepen.github.io/">DarkSoul CodePen</a> | <a href="https://darksoul-codepen.github.io/Disclaimer.html">Disclaimer</a> | <a href="https://darksoul-codepen.github.io/Privacy-policy.html">Privacy Policy</a> | <a href="https://darksoul-codepen.github.io/FAQ.html">FAQ</a> | <a href="https://darksoul-codepen.github.io/sitemap.xml">Sitemap</a></p>
<p><img src="assets/images/codepen_logo.png" alt="Codepen Logo" style="max-width: 20px;"/><a href="https://codepen.io/DarkSoul-" target="_blank" > CodePen</a> | <img src="assets/images/dribbble_logo.png" alt="Dribbble Logo" style="max-width: 20px;"/><a href="https://dribbble.com/dark-soul" target="_blank" > Dribbble</a> | <img src="assets/images/instagram-white-icon.webp" alt="Instagram Logo" style="max-width: 20px;"/><a href="https://www.instagram.com/dark.soul.io/" target="_blank"> Instagram</a> | <img src="assets/images/YouTube-Logo.png" alt="YouTube Logo" style="max-width: 20px;"/><a href="https://www.youtube.com/channel/UCooCOD2j8Q4Y9ysYZIFzI_w" target="_blank"> YouTube</a></p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/isotope.min.js"></script>
<script src="assets/js/owl-carousel.js"></script>
<script src="assets/js/tabs.js"></script>
<script src="assets/js/popup.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/search.js"></script>
</body>
</html>