-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtemplate.html
104 lines (91 loc) · 4.95 KB
/
template.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="2024-02-17T21:21:21+01:00" id="date" itemprop="datePublished">
<meta content="2024-02-17T21:21:21+01:00" id="last-modified" itemprop="dateModified">
<title>Animated Sine Wave Generator for Canvas | JavaScript Library</title>
<!-- Meta Tags -->
<meta content="Sebastien Rousseau" name="author">
<meta content="Discover how to create dynamic, animated sine waves on your web projects with the sine-wave-generator.js library." name="description">
<meta content="telephone=no" name="format-detection">
<meta content="sine wave generator, JavaScript library, canvas animation, wave animation, interactive web design, sine wave JavaScript, easing functions, dynamic web backgrounds, animated sine waves, web development tools" name="keywords">
<meta content="en-GB" name="language">
<meta content="https://sine-wave-generator.com" name="permalink">
<meta content="general" name="rating">
<meta content="no-referrer" name="referrer">
<meta content="7 days" name="revisit-after">
<meta content="index, follow" name="robots">
<meta content="40, 202, 245" name="theme-color">
<meta content="Animated Sine Wave Generator for Canvas | JavaScript Library" name="title">
<meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport">
<meta content="Discover how to create dynamic, animated sine waves on your web projects with the sine-wave-generator.js library." name="og:description">
<meta content="https://kura.pro/sinewavegenerator/images/logos/sinewavegenerator.webp" name="og:image">
<meta content="Logo of Sine Wave Generator" name="og:image:alt">
<meta content="161.8" name="og:image:height">
<meta content="161.8" name="og:image:width">
<meta content="en_GB" name="og:locale">
<meta content="Animated Sine Wave Generator for Canvas | JavaScript Library" name="og:title">
<meta content="website" name="og:type">
<meta content="https://sine-wave-generator.com" name="og:url">
<meta content="ARIA, fullKeyboardControl, noFlashingHazard" name="accessibility">
<meta content="portrait" name="apple_mobile_web_app_orientations">
<meta content="192x192" name="apple_touch_icon_sizes">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-inset">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="Animated Sine Wave Generator for Canvas | JavaScript Library" name="apple-mobile-web-app-title">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="rgb(40, 202, 245)" name="msapplication-navbutton-color">
<meta content="summary" name="twitter:card">
<meta content="@wwdseb" name="twitter:creator">
<meta content="Discover how to create dynamic, animated sine waves on your web projects with the sine-wave-generator.js library." name="twitter:description">
<meta content="https://kura.pro/sinewavegenerator/images/logos/sinewavegenerator.webp" name="twitter:image">
<meta content="Logo of Sine Wave Generator" name="twitter:image:alt">
<meta content="161.8" name="twitter:image:width">
<meta content="161.8" name="twitter:image:width">
<meta content="https://sine-wave-generator.com" name="twitter:site">
<meta content="https://sine-wave-generator.com" name="twitter:url">
<meta content="Animated Sine Wave Generator for Canvas | JavaScript Library" name="twitter:title">
<!-- End Meta Tags -->
<!-- Links -->
<link href="https://sine-wave-generator.com" hreflang="en" rel="alternate">
<link href="https://sine-wave-generator.com" rel="canonical">
<link rel="stylesheet" href="reset.css" />
<link sizes="16x16 32x32" href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://kura.pro//sinewavegenerator/images/icons/192x192.png" rel="apple-touch-icon" sizes="192x192">
<!-- End Links -->
</head>
<body>
<header>
<img src="https://kura.pro/sinewavegenerator/images/logos/sinewavegenerator.webp" alt="Sine Wave Generator Logo" width="50" height="50" />
<h1>Sine Wave Generator</h1>
<p>sine-wave-generator.js offers a powerful and flexible way to add animated sine waves to web projects, providing a range of configurable parameters for customization.</p>
</header>
<section class="example">
<h2>Example 1</h2>
<h3>Basic Single Wave</h3>
<canvas title="Basic single sine wave" id="sineCanvas1"></canvas>
</section>
<section class="example">
<h2>Example 2</h2>
<h3>Multiple Waves Config</h3>
<canvas title="Multiple Waves Config" id="sineCanvas2"></canvas>
</section>
<section class="example">
<h2>Example 3</h2>
<h3>Interactive Wave</h3>
<canvas title="Interactive Wave" id="sineCanvas3"></canvas>
</section>
<section class="example">
<h2>Example 4</h2>
<h3>Dynamic Wave Management</h3>
<canvas title="Interactive Wave" id="sineCanvas4"></canvas>
</section>
<footer role="contentinfo">
© Copyright 2024 Sine Wave Generator. All rights reserved.
</footer>
<!-- Scripts -->
<script type="module" src="example.js"></script>
</body>
</html>