Angular Setup
12 | 13 | To use **Dynamowaves** in an Angular project, follow these additional steps after installing via npm: 14 | 15 | 1. In yourangular.json file, add the dynamowaves script to the scripts array:
16 |
17 | ```json
18 | "scripts": [
19 | "node_modules/dynamowaves/dist/dynamowaves.js"
20 | ]
21 | ```
22 |
23 | 2. In your app.module.ts file, add CUSTOM_ELEMENTS_SCHEMA to the schemas array:
24 |
25 | ```typescript
26 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
27 |
28 | @NgModule({
29 | // ...
30 | schemas: [CUSTOM_ELEMENTS_SCHEMA]
31 | })
32 |
33 | export class AppModule { }
34 | ```
35 |
--------------------------------------------------------------------------------
/www/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Mark Zebley
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/www/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
26 |
--------------------------------------------------------------------------------
/www/snippets/usage/overview.md:
--------------------------------------------------------------------------------
1 | ---
2 | slug: usage-header
3 | title: Overview
4 | type: docs
5 | group: usage
6 | order: 1
7 | groupOrder: 2
8 | groupLabel: Usage
9 | ---
10 |
11 | Usage
12 | 13 | Since **Dynamowaves** use HTML templating syntax, all it takes to call one is to add the custom element to your HTML! 14 | 15 | ```html 16 | 17 |class**, **id**, or **style** applied to its invoking element.
23 |
24 | ```html
25 |
26 | Markdown supports inline HTML.
23 | ``` 24 | 25 | 3. Write standard Markdown or HTML. 26 | 27 | ## How docs are built 28 | Two phases: 29 | 30 | 1. **Manifest generation** → `www/snippets-index.json` 31 | 2. **Page compilation** → consumes manifest + `www-src/index.html` → outputs `www/index.html` 32 | 33 | ## Commands 34 | 35 | ### Build once 36 | - `npm run docs:manifest` 37 | - `npm run docs:build` 38 | 39 | ### Watch while editing 40 | - `npm run docs:watch` 41 | 42 | Pairs well with: 43 | 44 | ```bash 45 | npx serve www 46 | ``` 47 | 48 | ## CDN client-side hydration (optional) 49 | 50 | ```html 51 | 56 | ``` 57 | 58 | ## Deployment 59 | Commit: 60 | - Markdown files 61 | - `www/snippets-index.json` 62 | - Compiled `www/index.html` 63 | 64 | Everything in `www/` is static and production‑ready. 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamowaves", 3 | "version": "2.1.1", 4 | "type": "module", 5 | "description": "Lightweight, dependency-free SVG wave templates that dynamically generate themselves on render.", 6 | "main": "dist/dynamowaves.js", 7 | "module": "dist/dynamowaves.js", 8 | "types": "dist/dynamowaves.d.ts", 9 | "files": [ 10 | "dist" 11 | ], 12 | "scripts": { 13 | "test": "node --test", 14 | "build": "rollup -c", 15 | "prepublishOnly": "npm run build", 16 | "release": "npm publish", 17 | "release:dry": "npm run build && npm pack --dry-run", 18 | "docs:manifest": "mark-down build www/snippets --output www/snippets/snippets-index.json", 19 | "docs:manifest:watch": "mark-down watch www/snippets --output www/snippets/snippets-index.json", 20 | "docs:build": "npm run docs:manifest && mark-down compile-page www-src/index.html --manifest www/snippets/snippets-index.json --outDir www", 21 | "docs:watch": "chokidar \"www-src/index.html\" \"www/snippets/**/*.md\" -c \"npm run docs:build\"" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/mzebley/dynamowaves.git" 26 | }, 27 | "keywords": [ 28 | "javascript", 29 | "svg", 30 | "html", 31 | "waves", 32 | "wave", 33 | "generative", 34 | "templates-html" 35 | ], 36 | "author": "Mark Zebley", 37 | "license": "ISC", 38 | "bugs": { 39 | "url": "https://github.com/mzebley/dynamowaves/issues" 40 | }, 41 | "homepage": "https://dynamowaves.markzebley.com/", 42 | "devDependencies": { 43 | "@mzebley/mark-down-cli": "^1.2.2", 44 | "@rollup/plugin-terser": "^0.4.4", 45 | "chokidar-cli": "^3.0.0", 46 | "rollup": "^3.29.4", 47 | "rollup-plugin-dts": "^6.1.1" 48 | } 49 | } -------------------------------------------------------------------------------- /www/snippets/usage/functions.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: usage-functions 3 | title: Functions 4 | type: docs 5 | group: usage 6 | order: 3 7 | groupOrder: 2 8 | groupLabel: Usage 9 | --- 10 | 11 |Available Functions
12 | 13 | **Dynamowaves** come with a few functions that can be called to manipulate the wave after it's been rendered. 14 | 15 |.generateNewWave()
16 | 17 | Want to see a new wave? Call **generateNewWave(duration)** on the **dynamowave** you'd like to regenerate. The **duration** parameter is an optional integer that determines how quickly the old wave morphs into the new wave - default is **800**(ms).
18 |
19 | ```javascript
20 | const wave = document.querySelector('dynamo-wave');
21 | wave.generateNewWave(500);
22 | ```
23 |
24 | .play()
29 | 30 | Call **play(duration)** on any **dynamowave** that you'd like to animate. The **duration** parameter is an optional integer that determines the length of the animation loop - default is **7500**(ms).
31 |
32 |
33 | .pause()
34 | 35 | To stop the animation loop, call **pause()** on the **dynamowave** you'd like to stop.
36 |
37 | ```javascript
38 | const wave = document.querySelector('dynamo-wave');
39 |
40 | function toggleWaveAnimation() {
41 | if (wave.isAnimating) {
42 | wave.pause();
43 | } else {
44 | wave.play(5000);
45 | }
46 | }
47 | ```
48 |
49 | Practical Application
12 | 13 | **Dynamowaves** come out of the box entirely style agnostic. The onus is on the developer to add the necessary attributes to get them to fit their intended platform, but at the same time this provides nearly endless possibilities for customization. 14 | 15 | Make use of **```position:sticky```** and create a neat little header! 16 | 17 | ```html 18 | 19 | 26 | ``` 27 | 28 | 59 | 60 | 61 | Use an animated **dynamowave** to add some more pizzazz to transition effects. 62 | 63 | 80 | 81 | Slap one of these bad boys along the edge of a photo to create an always fresh, **mask-image** effect without having to actually create multiple clip paths or image masks!
82 |
83 | ```html
84 |
85 |
94 | ```
95 |
96 |
--------------------------------------------------------------------------------
/www/dynamowaves.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Dynamowaves={})}(this,(function(t){"use strict";class e extends HTMLElement{constructor(){super(),this.isAnimating=!1,this.animationFrameId=null,this.elapsedTime=0,this.startTime=null,this.isGeneratingWave=!1,this.currentPath=null,this.targetPath=null,this.pendingTargetPath=null,this.intersectionObserver=null,this.observerOptions=null,this.random=Math.random,this.startEndZero=!1}connectedCallback(){const t=this.id??Math.random().toString(36).substring(7),e=this.getAttribute("data-wave-face")||"top",n=parseInt(this.getAttribute("data-wave-points"),10);this.points=Number.isFinite(n)?Math.max(2,n):6;const r=this.getAttribute("data-wave-variance"),a=this.getAttribute("data-variance"),h=parseFloat(r??a??"");this.variance=Number.isFinite(h)?h:3,this.duration=parseFloat(this.getAttribute("data-wave-speed"))||7500;const o=this.getAttribute("data-wave-seed"),d=s(o),c="string"==typeof o&&""!==o.trim();this.random=c&&!d?function(t){let e=0;const i=String(t);for(let t=0;t
86 | 
87 |
90 |
92 |
87 |
90 | ...
93 |