https://github.com/zequez/wavy-svg-generator

A random wavy SVG generator with many customization parameters
https://github.com/zequez/wavy-svg-generator

generator plain-javascript svg

Last synced: about 9 hours ago
JSON representation

A random wavy SVG generator with many customization parameters

• Host: GitHub
• URL: https://github.com/zequez/wavy-svg-generator
• Owner: Zequez
• License: other
• Created: 2023-06-02T20:55:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-27T19:49:29.000Z (6 months ago)
• Last Synced: 2024-05-28T05:25:20.315Z (6 months ago)
• Topics: generator, plain-javascript, svg
• Language: JavaScript
• Homepage: https://zequez.github.io/wavy-svg-generator/
• Size: 410 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Wavy SVG seed-based generator

![Alt text](/screenshot.png?raw=true "App UI screenshot")

## Features

- 10 parameters to customize the generator

- Randomness is seed based, it will always generate the same result with the same seed

- Stroke generator in addition to filled shape

- Visualization of bezier curves control points

- Text SVG output and quick copy button

- Configuration persists on browser local storage, so you don't miss your tuning when you reload or close the app

## Use as a library

```javascript

  import wavySvg from 'https://cdn.jsdelivr.net/gh/zequez/[email protected]/wavySvg.js';

  const wavy = wavySvg({

    seed,

    boxW,

    boxH,

    points,

    angleRange,

    controlMinRate,

    controlMaxLen,

    controlMaxShift,

    heightRange,

  });

  html``

  html``

```

## Bundler-free development

I developed this without using any package bundler, using JS modules and a plain HTML file

You can grab yourself a pretty solid bundler-free toolbox with:

```javascript

import { h, render } from "https://esm.sh/preact";

import { useState, useEffect } from "https://esm.sh/preact/hooks";

import htm from "https://esm.sh/htm";

import { tw, setup } from "https://cdn.skypack.dev/twind";

const html = htm.bind(h);

function App(props) {

  return html`
Hello ${props.name} World
`;

}


render(html`<${App} name="World" />`, document.getElementById("app"));

```

Look how clean the repo is! Just plain HTML and JavaScript.

Sure there is no pre-rendering... yet. There are some possible work arounds. I'm thinking a small file server that allows outputting to the filesystem. And we can pre-render on the browser and output hydratable static files.

For the development process, I just use [VSCode Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). It creates a static file server for the files and reload the page on changes.

## License

All code is copyleft under the *GPL V3* software license.