🎨 Generate CSS Mesh Gradients

Related tags

Learning resource gradient css-gradients gradient-generator mesh-gradient
Overview

🎨 Meshgrad meshgrad minzip package size meshgrad package version

Meshgrad is a tiny utility to generate native-CSS Mesh Gradients.

Demo - meshgrad.cretu.dev

Install

$ npm install meshgrad

Use

Vanilla Javascript

<script type="module">
  import { generateMeshGradient } from "https://cdn.skypack.dev/meshgrad";

  // Number of color stops
  const ELEMENTS = 6;

  document.getElementById("box");
  box.style = generateMeshGradient(ELEMENTS);
</script>

<div id="box" class="..." />

Svelte

<script>
import { generateMeshGradient } from 'meshgrad';

// Number of color stops
const ELEMENTS = 6;
</script>

<div style={generateMeshGradient(ELEMENTS)} class="..."/>

React JSX

import { generateJSXMeshGradient } from "meshgrad";

// Number of color stops
const ELEMENTS = 6;

export function App() {
  return <div style={generateJSXMeshGradient(ELEMENTS)} className="..." />;
}
You might also like...

Generate meshes from signed distance functions and constructive solid geometry operations.

Generate meshes from signed distance functions and constructive solid geometry operations.

sdf-csg Generate meshes from signed distance functions and constructive solid geometry operations. This library is heavily based upon Inigo Quilez's 3

Oct 24, 2022

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Dec 7, 2022

generate a map server side and save/return it as png image

NFT map generator Request a new map to be generated with latitude and longitude params, for example http://localhost:3000/maps?lat=45.3579&lng=9.4427

Jul 12, 2022

Base62-token.js - Generate & Verify GitHub-style & npm-style Base62 Tokens

base62-token.js Generate & Verify GitHub-style & npm-style Secure Base62 Tokens Works in Vanilla JS (Browsers), Node.js, and Webpack. Online Demo See

Jun 11, 2022

🎡 Generate a random number, a list of them, or a generator with optional configuration

random_number Generate a random number, a list of them, or a generator with optional configuration Usage import randomNumber from "https://deno.land/x

Aug 7, 2022

faker.js - generate massive amounts of fake data in the browser and node.js

faker.js - generate massive amounts of fake data in the browser and node.js

Jan 7, 2022

Generate massive amounts of fake data in the browser and node.js

Faker Generate massive amounts of fake data in the browser and node.js. FAQ - What happened to the original faker.js? This project was originally crea

Jan 2, 2023

A simple npm script to generate an .editorconfig file.

Create EditorConfig A simple npm script to generate an .editorconfig file. You don't know EditorConfig? Check out the official documentation! Usage Si

Dec 7, 2022

Generate massive amounts of fake data in the browser and node.js

Faker Generate massive amounts of fake data in the Browser and Node.js. Installation Please replace your faker dependency with @faker-js/faker. This i

Jan 4, 2023
Comments
Releases(v0.0.10)

  • v0.0.10(Nov 13, 2022)

  • v0.0.9(Nov 13, 2022)

  • v0.0.8(Nov 12, 2022)

    What's new

    Added two new arguments: ✨

    • Specify a starting color (i.e what will the dominant color be, and what will the root of all color stops be)
    • Provide a hash number, this will make sure the generation will look the same, and the color stops will be in the same position

    New usage

    JSX

    import { generateJSXMeshGradient } from 'meshgrad'
// new arguments syntax (generateJSXMeshGradient(6, "#FF0000", 59));
    Source code(tar.gz)
    Source code(zip)

  • v0.0.6(Aug 21, 2022)

    What's new

    Added support for all frameworks ✨ You can now use meshgrad with Svelte, React, Vanilla Javascript and more!

    New usage

    JSX

    import { generateJSXMeshGradient } from 'meshgrad'
// same syntax (generateJSXMeshGradient(6))

    Svelte

    <script>
import { generateMeshGradient } from 'meshgrad';

// Number of color stops
const ELEMENTS = 6;
</script>

<div style={generateMeshGradient(ELEMENTS)} class="..."/>

    Vanilla

    // Add cdn from skypack
<script type="module">
  import { generateMeshGradient } from "https://cdn.skypack.dev/meshgrad";

  // Number of color stops
  const ELEMENTS = 6;

  document.getElementById("box");
  box.style = generateMeshGradient(ELEMENTS);
</script>

<div id="box" class="..." />
    Source code(tar.gz)
    Source code(zip)

  • v0.0.2(Aug 19, 2022)

Owner
Cristian Crețu
Developer & Designer
Cristian Crețu
GitHub https://meshgrad.cretu.dev
A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh

three-bvh-csg An experimental, in progress, flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. More than 100 time

Garrett Johnson 208 Jan 5, 2023
Library for controlling MESH blocks using JavaScript.

MESH.js Library for controlling MESH blocks using JavaScript. MESH official web site is here. Verified Environment Node.js (16.15.1) npm (8.11.0) Prer

MESH project 6 Nov 22, 2022
A mesh network that connects remote communities to emergency responders without relying on internet, cell towers, or satellites

A mesh network that connects remote communities to emergency responders without relying on internet, cell towers, or satellites. Winner of Hack the North 2022. ??

Alice Cai 4 Sep 23, 2022
Generate deterministic fake values: The same input will always generate the same fake-output.

import { copycat } from '@snaplet/copycat' copycat.email('foo') // => '[email protected]' copycat.email('bar') // => 'Thurman.Schowalter668@

Snaplet 201 Dec 30, 2022
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Introduction Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without

Swagger 23.2k Dec 28, 2022
Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

Shaun Bharat 12 Oct 10, 2022
Instagram.css - Complete set of Instagram filters in pure CSS

Instagram.css Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to t

Yan Zhu 4k Dec 30, 2022
Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Gino 4 Sep 26, 2021
(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱

MatoCSS Transform CSS Modules to enable Atomic CSS benefits Please note that it is still experimenting. I do not recommend using this in production. U

Huy Nguyen 4 Nov 24, 2022
🚀AI拟声: 5秒内克隆您的声音并生成任意语音内容 Clone a voice in 5 seconds to generate arbitrary speech in real-time

English | 中文 Features ?? Chinese supported mandarin and tested with multiple datasets: aidatatang_200zh, magicdata, aishell3, and etc. ?? PyTorch work

Vega 25.6k Dec 29, 2022