feat(new-tool): svg mesh gradient generator
This commit is contained in:
		
							parent
							
								
									ce3150c65d
								
							
						
					
					
						commit
						a8c1231753
					
				
							
								
								
									
										279
									
								
								components.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										279
									
								
								components.d.ts
									
									
									
									
										vendored
									
									
								
							| @ -5,147 +5,148 @@ | |||||||
| // Read more: https://github.com/vuejs/core/pull/3399
 | // Read more: https://github.com/vuejs/core/pull/3399
 | ||||||
| import '@vue/runtime-core' | import '@vue/runtime-core' | ||||||
| 
 | 
 | ||||||
| export {}; | export {} | ||||||
| 
 | 
 | ||||||
| declare module '@vue/runtime-core' { | declare module '@vue/runtime-core' { | ||||||
|   export interface GlobalComponents { |   export interface GlobalComponents { | ||||||
|     '404.page': typeof import('./src/pages/404.page.vue')['default']; |     '404.page': typeof import('./src/pages/404.page.vue')['default'] | ||||||
|     About: typeof import('./src/pages/About.vue')['default']; |     About: typeof import('./src/pages/About.vue')['default'] | ||||||
|     App: typeof import('./src/App.vue')['default']; |     App: typeof import('./src/App.vue')['default'] | ||||||
|     'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']; |     'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'] | ||||||
|     Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']; |     Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default'] | ||||||
|     Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']; |     Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default'] | ||||||
|     BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']; |     BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default'] | ||||||
|     Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']; |     Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default'] | ||||||
|     BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']; |     BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default'] | ||||||
|     Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']; |     Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default'] | ||||||
|     CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']; |     CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default'] | ||||||
|     CButton: typeof import('./src/ui/c-button/c-button.vue')['default']; |     CButton: typeof import('./src/ui/c-button/c-button.vue')['default'] | ||||||
|     'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']; |     'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default'] | ||||||
|     CCard: typeof import('./src/ui/c-card/c-card.vue')['default']; |     CCard: typeof import('./src/ui/c-card/c-card.vue')['default'] | ||||||
|     'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']; |     'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default'] | ||||||
|     ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']; |     ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'] | ||||||
|     Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']; |     Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'] | ||||||
|     CLink: typeof import('./src/ui/c-link/c-link.vue')['default']; |     CLink: typeof import('./src/ui/c-link/c-link.vue')['default'] | ||||||
|     'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']; |     'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default'] | ||||||
|     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']; |     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'] | ||||||
|     ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']; |     ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'] | ||||||
|     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']; |     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'] | ||||||
|     CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']; |     CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'] | ||||||
|     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']; |     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'] | ||||||
|     DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']; |     DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'] | ||||||
|     'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']; |     'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default'] | ||||||
|     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']; |     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default'] | ||||||
|     DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']; |     DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'] | ||||||
|     DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']; |     DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default'] | ||||||
|     DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']; |     DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'] | ||||||
|     DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']; |     DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'] | ||||||
|     Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']; |     Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'] | ||||||
|     Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']; |     Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'] | ||||||
|     EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']; |     EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'] | ||||||
|     FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']; |     FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'] | ||||||
|     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']; |     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'] | ||||||
|     GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']; |     GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'] | ||||||
|     HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']; |     HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'] | ||||||
|     HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']; |     HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'] | ||||||
|     'Home.page': typeof import('./src/pages/Home.page.vue')['default']; |     'Home.page': typeof import('./src/pages/Home.page.vue')['default'] | ||||||
|     HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']; |     HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'] | ||||||
|     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']; |     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'] | ||||||
|     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']; |     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'] | ||||||
|     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']; |     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'] | ||||||
|     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']; |     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'] | ||||||
|     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']; |     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'] | ||||||
|     Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']; |     Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'] | ||||||
|     Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']; |     Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'] | ||||||
|     Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']; |     Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'] | ||||||
|     JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']; |     JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default'] | ||||||
|     JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']; |     JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'] | ||||||
|     JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']; |     JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'] | ||||||
|     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']; |     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'] | ||||||
|     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']; |     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'] | ||||||
|     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']; |     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'] | ||||||
|     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']; |     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'] | ||||||
|     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']; |     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'] | ||||||
|     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']; |     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'] | ||||||
|     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']; |     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'] | ||||||
|     MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']; |     MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'] | ||||||
|     MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']; |     MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'] | ||||||
|     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']; |     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'] | ||||||
|     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']; |     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] | ||||||
|     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']; |     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] | ||||||
|     NAlert: typeof import('naive-ui')['NAlert']; |     NAlert: typeof import('naive-ui')['NAlert'] | ||||||
|     NAutoComplete: typeof import('naive-ui')['NAutoComplete']; |     NAutoComplete: typeof import('naive-ui')['NAutoComplete'] | ||||||
|     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']; |     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] | ||||||
|     NButton: typeof import('naive-ui')['NButton']; |     NButton: typeof import('naive-ui')['NButton'] | ||||||
|     NCard: typeof import('naive-ui')['NCard']; |     NCard: typeof import('naive-ui')['NCard'] | ||||||
|     NCheckbox: typeof import('naive-ui')['NCheckbox']; |     NCheckbox: typeof import('naive-ui')['NCheckbox'] | ||||||
|     NCode: typeof import('naive-ui')['NCode']; |     NCode: typeof import('naive-ui')['NCode'] | ||||||
|     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']; |     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] | ||||||
|     NColorPicker: typeof import('naive-ui')['NColorPicker']; |     NColorPicker: typeof import('naive-ui')['NColorPicker'] | ||||||
|     NConfigProvider: typeof import('naive-ui')['NConfigProvider']; |     NConfigProvider: typeof import('naive-ui')['NConfigProvider'] | ||||||
|     NDatePicker: typeof import('naive-ui')['NDatePicker']; |     NDatePicker: typeof import('naive-ui')['NDatePicker'] | ||||||
|     NDivider: typeof import('naive-ui')['NDivider']; |     NDivider: typeof import('naive-ui')['NDivider'] | ||||||
|     NDynamicInput: typeof import('naive-ui')['NDynamicInput']; |     NDynamicInput: typeof import('naive-ui')['NDynamicInput'] | ||||||
|     NEllipsis: typeof import('naive-ui')['NEllipsis']; |     NEllipsis: typeof import('naive-ui')['NEllipsis'] | ||||||
|     NForm: typeof import('naive-ui')['NForm']; |     NForm: typeof import('naive-ui')['NForm'] | ||||||
|     NFormItem: typeof import('naive-ui')['NFormItem']; |     NFormItem: typeof import('naive-ui')['NFormItem'] | ||||||
|     NGi: typeof import('naive-ui')['NGi']; |     NGi: typeof import('naive-ui')['NGi'] | ||||||
|     NGrid: typeof import('naive-ui')['NGrid']; |     NGrid: typeof import('naive-ui')['NGrid'] | ||||||
|     NH1: typeof import('naive-ui')['NH1']; |     NH1: typeof import('naive-ui')['NH1'] | ||||||
|     NH2: typeof import('naive-ui')['NH2']; |     NH2: typeof import('naive-ui')['NH2'] | ||||||
|     NH3: typeof import('naive-ui')['NH3']; |     NH3: typeof import('naive-ui')['NH3'] | ||||||
|     NIcon: typeof import('naive-ui')['NIcon']; |     NIcon: typeof import('naive-ui')['NIcon'] | ||||||
|     NImage: typeof import('naive-ui')['NImage']; |     NImage: typeof import('naive-ui')['NImage'] | ||||||
|     NInput: typeof import('naive-ui')['NInput']; |     NInput: typeof import('naive-ui')['NInput'] | ||||||
|     NInputGroup: typeof import('naive-ui')['NInputGroup']; |     NInputGroup: typeof import('naive-ui')['NInputGroup'] | ||||||
|     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']; |     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'] | ||||||
|     NInputNumber: typeof import('naive-ui')['NInputNumber']; |     NInputNumber: typeof import('naive-ui')['NInputNumber'] | ||||||
|     NLayout: typeof import('naive-ui')['NLayout']; |     NLayout: typeof import('naive-ui')['NLayout'] | ||||||
|     NLayoutSider: typeof import('naive-ui')['NLayoutSider']; |     NLayoutSider: typeof import('naive-ui')['NLayoutSider'] | ||||||
|     NMenu: typeof import('naive-ui')['NMenu']; |     NMenu: typeof import('naive-ui')['NMenu'] | ||||||
|     NP: typeof import('naive-ui')['NP']; |     NP: typeof import('naive-ui')['NP'] | ||||||
|     NPageHeader: typeof import('naive-ui')['NPageHeader']; |     NPageHeader: typeof import('naive-ui')['NPageHeader'] | ||||||
|     NProgress: typeof import('naive-ui')['NProgress']; |     NProgress: typeof import('naive-ui')['NProgress'] | ||||||
|     NScrollbar: typeof import('naive-ui')['NScrollbar']; |     NScrollbar: typeof import('naive-ui')['NScrollbar'] | ||||||
|     NSelect: typeof import('naive-ui')['NSelect']; |     NSelect: typeof import('naive-ui')['NSelect'] | ||||||
|     NSlider: typeof import('naive-ui')['NSlider']; |     NSlider: typeof import('naive-ui')['NSlider'] | ||||||
|     NSpace: typeof import('naive-ui')['NSpace']; |     NSpace: typeof import('naive-ui')['NSpace'] | ||||||
|     NStatistic: typeof import('naive-ui')['NStatistic']; |     NStatistic: typeof import('naive-ui')['NStatistic'] | ||||||
|     NSwitch: typeof import('naive-ui')['NSwitch']; |     NSwitch: typeof import('naive-ui')['NSwitch'] | ||||||
|     NTable: typeof import('naive-ui')['NTable']; |     NTable: typeof import('naive-ui')['NTable'] | ||||||
|     NTag: typeof import('naive-ui')['NTag']; |     NTag: typeof import('naive-ui')['NTag'] | ||||||
|     NText: typeof import('naive-ui')['NText']; |     NText: typeof import('naive-ui')['NText'] | ||||||
|     NTooltip: typeof import('naive-ui')['NTooltip']; |     NTooltip: typeof import('naive-ui')['NTooltip'] | ||||||
|     NUpload: typeof import('naive-ui')['NUpload']; |     NUpload: typeof import('naive-ui')['NUpload'] | ||||||
|     NUploadDragger: typeof import('naive-ui')['NUploadDragger']; |     NUploadDragger: typeof import('naive-ui')['NUploadDragger'] | ||||||
|     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']; |     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'] | ||||||
|     PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']; |     PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default'] | ||||||
|     QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']; |     QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'] | ||||||
|     RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']; |     RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'] | ||||||
|     ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']; |     ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'] | ||||||
|     RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']; |     RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default'] | ||||||
|     RouterLink: typeof import('vue-router')['RouterLink']; |     RouterLink: typeof import('vue-router')['RouterLink'] | ||||||
|     RouterView: typeof import('vue-router')['RouterView']; |     RouterView: typeof import('vue-router')['RouterView'] | ||||||
|     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']; |     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default'] | ||||||
|     SearchBar: typeof import('./src/components/SearchBar.vue')['default']; |     SearchBar: typeof import('./src/components/SearchBar.vue')['default'] | ||||||
|     SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']; |     SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'] | ||||||
|     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']; |     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default'] | ||||||
|     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']; |     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'] | ||||||
|     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']; |     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default'] | ||||||
|     SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']; |     SvgMeshGradientGenerator: typeof import('./src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue')['default'] | ||||||
|     TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']; |     SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default'] | ||||||
|     TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']; |     TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default'] | ||||||
|     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']; |     TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'] | ||||||
|     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']; |     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default'] | ||||||
|     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']; |     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default'] | ||||||
|     'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']; |     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default'] | ||||||
|     'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']; |     'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default'] | ||||||
|     ToolCard: typeof import('./src/components/ToolCard.vue')['default']; |     'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default'] | ||||||
|     UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']; |     ToolCard: typeof import('./src/components/ToolCard.vue')['default'] | ||||||
|     UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']; |     UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default'] | ||||||
|     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']; |     UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default'] | ||||||
|     UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']; |     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'] | ||||||
|     UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']; |     UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'] | ||||||
|     YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']; |     UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'] | ||||||
|  |     YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'] | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | |||||||
| @ -14,6 +14,7 @@ import { tool as userAgentParser } from './user-agent-parser'; | |||||||
| import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator'; | import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator'; | ||||||
| import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter'; | import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter'; | ||||||
| import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor'; | 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 rsaKeyPairGenerator } from './rsa-key-pair-generator'; | ||||||
| import { tool as textToNatoAlphabet } from './text-to-nato-alphabet'; | import { tool as textToNatoAlphabet } from './text-to-nato-alphabet'; | ||||||
| import { tool as slugifyString } from './slugify-string'; | import { tool as slugifyString } from './slugify-string'; | ||||||
| @ -98,7 +99,7 @@ export const toolsByCategory: ToolCategory[] = [ | |||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     name: 'Images', |     name: 'Images', | ||||||
|     components: [qrCodeGenerator, svgPlaceholderGenerator], |     components: [qrCodeGenerator, svgPlaceholderGenerator, svgMeshGradientGenerator], | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     name: 'Development', |     name: 'Development', | ||||||
|  | |||||||
							
								
								
									
										12
									
								
								src/tools/svg-mesh-gradient-generator/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								src/tools/svg-mesh-gradient-generator/index.ts
									
									
									
									
									
										Normal file
									
								
							| @ -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'), | ||||||
|  | }); | ||||||
| @ -0,0 +1,6 @@ | |||||||
|  | import { expect, describe, it } from 'vitest'; | ||||||
|  | // import { } from './svg-mesh-gradient-generator.service';
 | ||||||
|  | //
 | ||||||
|  | // describe('svg-mesh-gradient-generator', () => {
 | ||||||
|  | //
 | ||||||
|  | // })
 | ||||||
| @ -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); | ||||||
|  | } | ||||||
| @ -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> | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user