Light

timmikeladze / reptiles.dev Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 1.0 509 KB

Generate colorful and temporarily identifiable SVGs with unique urls.

Home Page: https://reptiles.dev

License: MIT License

Shell 0.88% TypeScript 97.97% JavaScript 0.93% CSS 0.23%

color grid placeholder svg tiles svg-tiles incremental-static-regeneration nextjs redis image

reptiles.dev's Introduction

reptiles.dev

Generate colorful and temporarily identifiable SVGs with unique urls.

<!-- A random svg  -->
<img src="https://reptiles.dev/svg " />

<!-- A temporarily identifiable random svg with key 123 or any key of your choosing.  -->
<img src="https://reptiles.dev/123" />

💻 Website · 🔗 Random SVG · 🛝 GraphQL Playground

Usage

Get a random image: reptiles.dev/svg

Get a temporarily identifiable random image: reptiles.dev/123 or reptiles.dev/svg?key=123

Customize generated image: reptiles.dev/svg?hue=green&luminosity=dark&size=20

Visit reptiles.dev to use a UI to customize generated images and view available options.

Alternatively use the GraphQL playground and read the detailed documentation on all available options.

How it works

Generated SVGs are cached for up to 30 minutes before they are removed. After that point a new image will be generated when the url is visited.

This method of generating random yet temporarily identifiable images is great to use when mocking & developing front-ends, mapping some fake ids to images, or as placeholder images inside a Storybook.

Examples

<img src="https://reptiles.dev/svg" />

<img src="https://reptiles.dev/some-identifier" />

<img src="https://reptiles.dev/svg?width=10&luminosity=light&hue=147A34" />

<!-- /random is alias of /svg -->
<img src="https://reptiles.dev/random" />

reptiles.dev's People

Contributors

Stargazers

Watchers

Forkers

reptiles.dev's Issues

Fix viewport scaling / slightly zoomed in

Observe the screenshot below and notice how the content stretches into the right side of the screen.

<meta name="viewport" content="width=device-width, initial-scale=1" /> is already present in _app.tsx. I suspect the issue is somewhere in the components or css being rendered.

request: randomly generate colors if param `count` is > number of colors passed to param `colors`

Specifically, only do this if both parameters are explicitly passed by the user, ie:

?colors=0b486b -> only use Astronaut Blue, since count was not explicitly passed
?count=4&colors=0b486b -> use Astronaut Blue and randomly generate three extra colors

I can do up a PR for this if it's something which makes sense to add :)

Love this project by the way, going to be using it in quite a few places.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

chore(deps): update dependency @iconify/react to v4
chore(deps): update dependency @iconify/types to v2
chore(deps): update dependency typescript to v5
chore(deps): update graphqlcodegenerator monorepo to v3 (major) (@graphql-codegen/cli, @graphql-codegen/typescript-resolvers)
chore(deps): update nextjs monorepo to v13 (major) (eslint-config-next, next)
chore(deps): update node.js to v18 (node, @types/node)
fix(deps): update dependency micro to v10
fix(deps): update dependency svgo to v3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update all non-major dependencies (@commitlint/cli, @commitlint/config-conventional, @graphql-codegen/cli, @graphql-codegen/typescript-resolvers, @nextui-org/react, @types/lodash, @types/randomcolor, @types/react, @types/react-dom, @types/svgo, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, apollo-server-micro, concurrently, eslint, eslint-config-next, eslint-config-prettier, eslint-plugin-prettier, ga-gtag, graphql, graphql-modules, graphql-scalars, graphql-shield, husky, ioredis, lint-staged, micro, nanoid, next, next-seo, next-themes, prettier, svgdom, typescript)
chore(deps): update dependency eslint-import-resolver-typescript to v3
chore(deps): update wagoid/commitlint-github-action action to v5
Click on this checkbox to rebase all open PRs at once

Detected dependencies

docker-compose

docker-compose.yml

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

bahmutov/npm-install v1

wagoid/commitlint-github-action v4

npm

package.json

@nextui-org/react 1.0.0-beta.9

@svgdotjs/svg.js 3.1.2

@types/randomcolor 0.5.6

apollo-server-micro 3.8.2

entropy-string 4.2.0

ga-gtag 1.1.1

graphql 16.5.0

graphql-modules 2.0.0

graphql-rate-limit 3.3.0

graphql-scalars 1.17.0

graphql-shield 7.5.0

ioredis 5.0.6

kofi-button 1.1.1

lodash 4.17.21

micro 9.3.4

nanoid 4.0.0

next 12.1.6

next-seo 5.4.0

next-themes 0.2.0

object-hash 3.0.0

randomcolor 0.6.2

react 18.2.0

react-dom 18.2.0

svgdom 0.1.10

svgo 2.8.0

@commitlint/cli 17.0.2

@commitlint/config-conventional 17.0.2

@graphql-codegen/cli 2.6.2

@graphql-codegen/typescript-resolvers 2.6.6

@iconify/react 3.2.2

@iconify/types 1.1.0

@ryansonshine/commitizen 4.2.8

@ryansonshine/cz-conventional-changelog 3.3.4

@types/graphql 14.5.0

@types/ioredis 4.28.10

@types/lodash 4.14.182

@types/node 17.0.43

@types/react 18.0.12

@types/react-dom 18.0.5

@types/svgo 2.6.3

@typescript-eslint/eslint-plugin 5.28.0

@typescript-eslint/parser 5.28.0

concurrently 7.2.2

eslint 8.17.0

eslint-config-next 12.1.6

eslint-config-prettier 8.5.0

eslint-import-resolver-typescript 2.7.1

eslint-plugin-prettier 4.0.0

husky 8.0.1

lint-staged 13.0.1

prettier 2.7.0

typescript 4.7.3

nvm

.nvmrc

node 12.22

Check this box to trigger a request for Renovate to run again on this repository

Add "rotate" option to generator

It would be great to support a url query option rotate or r which will produce a generated image which is rotated n degrees.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.