diff options
Diffstat (limited to 'src')
5 files changed, 86 insertions, 1 deletions
diff --git a/src/tools/index.ts b/src/tools/index.ts index bc54b4d..1e2df49 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -14,6 +14,7 @@ import { tool as userAgentParser } from './user-agent-parser'; import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator'; import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter'; import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor'; +import { tool as svgMeshGradientGenerator } from './svg-mesh-gradient-generator'; import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator'; import { tool as textToNatoAlphabet } from './text-to-nato-alphabet'; import { tool as slugifyString } from './slugify-string'; @@ -98,7 +99,7 @@ export const toolsByCategory: ToolCategory[] = [ }, { name: 'Images', - components: [qrCodeGenerator, svgPlaceholderGenerator], + components: [qrCodeGenerator, svgPlaceholderGenerator, svgMeshGradientGenerator], }, { name: 'Development', diff --git a/src/tools/svg-mesh-gradient-generator/index.ts b/src/tools/svg-mesh-gradient-generator/index.ts new file mode 100644 index 0000000..37bf456 --- /dev/null +++ b/src/tools/svg-mesh-gradient-generator/index.ts @@ -0,0 +1,12 @@ +import { ArrowsShuffle } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'Svg mesh gradient generator', + path: '/svg-mesh-gradient-generator', + description: '', + keywords: ['svg', 'mesh', 'gradient', 'generator'], + component: () => import('./svg-mesh-gradient-generator.vue'), + icon: ArrowsShuffle, + createdAt: new Date('2023-05-05'), +}); diff --git a/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.test.ts b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.test.ts new file mode 100644 index 0000000..240d147 --- /dev/null +++ b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.test.ts @@ -0,0 +1,6 @@ +import { expect, describe, it } from 'vitest'; +// import { } from './svg-mesh-gradient-generator.service'; +// +// describe('svg-mesh-gradient-generator', () => { +// +// })
\ No newline at end of file diff --git a/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.ts b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.ts new file mode 100644 index 0000000..bcf1ab4 --- /dev/null +++ b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.ts @@ -0,0 +1,17 @@ +// A function that generates a blurry mesh gradient background image in a canvas from multiple colors +export function generateMeshGradient(colors: string[], canvas: HTMLCanvasElement) { + const ctx = canvas.getContext('2d')!; + const { width, height } = canvas; + const gradient = ctx.createLinearGradient(0, 0, width, height); + colors.forEach((color, index) => { + gradient.addColorStop(index / (colors.length - 1), color); + }); + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, width, height); + const meshGradient = ctx.createLinearGradient(0, 0, width, height); + meshGradient.addColorStop(0, 'rgba(0, 0, 0, 0)'); + meshGradient.addColorStop(0.5, 'rgba(0, 0, 0, 0.1)'); + meshGradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); + ctx.fillStyle = meshGradient; + ctx.fillRect(0, 0, width, height); +} diff --git a/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue new file mode 100644 index 0000000..e7a32fd --- /dev/null +++ b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue @@ -0,0 +1,49 @@ +<template> + <svg viewBox="0 0 3000 2000" fill="none" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient + v-for="{ id, cx, cy, fx, fy, color } of gradients" + :id="id" + :key="id" + :cx="cx" + :cy="cy" + r="100%" + :fx="fx" + :fy="fy" + gradientUnits="objectBoundingBox" + > + <stop offset="0" :stop-color="color" stop-opacity="1"></stop> + <stop offset="0.5" :stop-color="color + '00'" stop-opacity="0"></stop> + </radialGradient> + </defs> + <rect v-for="{ id, fill } of gradients" :key="id" x="0" y="0" width="100%" height="100%" :fill="fill"></rect> + </svg> +</template> + +<script setup lang="ts"> +import _ from 'lodash'; +import { ref, computed } from 'vue'; + +const randomPercent = () => `${Math.random() * 100}%`; +const randomColor = () => '#' + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, '0'); + +const quantity = ref(5); + +const gradients = computed(() => + Array.from({ length: quantity.value }, () => { + const id = _.uniqueId('id-'); + + return { + id, + fill: `url(#${id})`, + cx: randomPercent(), + cy: randomPercent(), + fx: randomPercent(), + fy: randomPercent(), + color: randomColor(), + }; + }), +); +</script> + +<style lang="less" scoped></style> |