Skip to content

glaucopater/negative-space-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A negative space generator

Have you ever been in the situation of printing a large image cropping it into smaller tiles? This app will help you to speed up this process with the concept of negative space.

Negative space, in the context of art and design, refers to the area around and between the subject(s) of an image or the spaces between different elements in a composition. Negative space helps to define the boundaries of positive space, which contains the main subjects or elements in a design. The balance between negative and positive space is crucial for the overall composition and can greatly affect how the design is perceived.

In graphic design, web design, and other visual arts, effective use of negative space can enhance readability, create emphasis, and improve aesthetic appeal. It can help guide the viewer's eye and create a flow through the composition. Negative space can be used to create shapes and forms in a subtle way, and it can also be used to convey meaning or create visual interest.

Demo 1 Demo 2 Demo 3

Usage

Choose any image you want, the app will crop into smaller tiles keeping the original aspect ratio.

You can customize the app's behavior using the following URL parameters:

  • width: Sets the width of the image (minimum value is 100)
  • height: Sets the height of the image (minimum value is 100)
  • margin: Sets the margin size (minimum value is 0)
  • src: Sets the image source URL
  • bgcolor: Sets the background color

Example:

https://main--sensational-gecko-5e200b.netlify.app/?width=640&height=480&margin=20&src=https://picsum.photos/640/480&bgcolor=%23fefe00

Images Source

  • picsum.photos

Made with:

  • TypeScript
  • Vite ⚡⚡⚡