The Story Behind TryShape, a Showcase for the CSS clip-path property

I love all kinds of shapes, especially brightly colored shapes! The shapes on the website are as important as background colors, pictures, banners, separators, artworks, and more: they help us understand the context and guide us through benefits.

A few months ago, I developed a math learning application for my 7-year-old daughter. In addition to basic addition and subtraction, I also want to present the problem with shapes. At that time I became familiar with the CSS clip-path property, a reliable way to create shapes on web pages. Then I ended up building another application called TryShape using the power of clip-path .

I'll take you through the story behind TryShape and how it helps create, manage, share and export shapes. In the process, we'll dive into CSS clip-path and how it helped me build my application quickly.

Here are some important links:

• TryShape Website
• GitHub code library
• Video Demo
• clip-path encapsulation npm package for React

CSS clip-path attributes and shapes

Imagine you have a regular piece of paper and a pencil, and you want to draw a shape (like a square) on it. what will you do? You will most likely start at one point , then draw a line to another point, and repeat three times before you can get back to the initial point. You also have to make sure you have parallel and same length opposite sides.

Therefore, the basic elements of shape include points, lines, directions, curves, angles and lengths, etc. CSS clip-path helps specify many of these properties to crop the area of ​​HTML elements to display a specific area. The portions within the cropped area will be displayed and the rest will be hidden. It provides developers with a lot of opportunities to create various shapes using clip-path property.

Learn more about cropping and how it differs from masking.

clip-path value for shape creation

clip-path property accepts the following values ​​to create a shape:

• circle()
• ellipse()
• inset()
• polygon()
• Clip source using url() function
• path()

We need to understand the basic coordinate system a little bit to use these values. When applying the clip-path attribute on an element to create a shape, we must consider the x-axis, y-axis, and the initial coordinates (0,0) of the upper left corner of the element.

This is a div element with the x-axis, the y-axis, and the initial coordinates (0,0).

Now let's use circle() value to create a circle shape. We can use this value to specify the position and radius of the circle. For example, to create a circular shape with a radius of 70px at coordinate positions (70, 70), we can specify clip-path attribute value as:

 clip-path: circle(70px at 70px 70px)

Therefore, the center of the circle is located at coordinates (70, 70) and the radius is 70px. Now only this circular area is cropped and displayed on the element. The rest of the element is hidden to create the impression of a circular shape.

Next, what happens if we want to specify the position as (0,0)? In this case, the center of the circle is located at (0,0) position with a radius of 70px. This makes only part of the circle visible within the element.

Let's go ahead and use the other two basic values inset() and polygon() . We use inset to define rectangle shapes. We can specify the gaps that four edges may have to crop an area from the element. For example:

 clip-path: inset(30px)

clip-path value above clips the area by excluding the 30px value from the edge of the element. We can see this in the picture below. We can also specify a different inset value for each edge.

Next is polygon() value. We can use a set of vertices to create a polygon shape. Please see this example:

 clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)

Here we specify a set of vertices to create an area for cropping. The following figure shows the location of each vertex to create a polygon shape. We can specify as many vertices as needed.

Next, let's take a look at ellipse() and url() values. ellipse() value helps create a shape by specifying two radius values ​​and one position. In the figure below, we see an ellipse at a position with a radius (50%, 50%), with a shape width of 70px and a height of 100px.

url() is a CSS function that specifies the ID value of clip-path element to render an SVG shape. Please see the picture below. We define an SVG shape using clipPath and path elements. You can render this shape using the ID value of the clipPath element as an argument to url() function.

In addition, we can use path value directly in path() function to draw the shape.

alright. I hope you have already understood the different clip-path attribute values. With this understanding, let's look at some implementations and try it out. Here is an example, use it to try adding, modifying values ​​to create new shapes.

Introduction to TryShape

Now it's time to talk about TryShape and its backstory. TryShape is an open source application that helps create, export, share and use any shape of your choice. You can create banners, circles, artworks, polygons and export them as SVG, PNG, and JPEG files. You can also create a CSS code snippet to copy and use in your application.

TryShape is built using the following frameworks and libraries (and of course clip-path ):

• CSS clip-path : We have discussed the functionality of this powerful CSS property.
• Next.js: The coolest React-based framework. It helps me create pages, components, interactions, and APIs to connect to the backend database.
• HarperDB: A flexible database for storing data and querying them using SQL and NoSQL interactions. TryShape creates its schemas and tables in the HarperDB cloud. The Next.js API interacts with schemas and tables to perform CRUD operations required by the user interface.
• Firebase: Authentication service from Google. TryShape uses it to enable social login using Google, GitHub, Twitter, and other accounts.
• react-icons: A store for all icons for React applications
• date-fns: A modern lightweight library for date formatting
• axios: Simplify API calls in React components
• styled-components: A structured way to create CSS rules from React components
• react-clip-path: A homemade module for handling clip-path properties in React applications
• react-draggable: Makes HTML elements draggable in a React application. TryShape uses it to adjust the position of shape vertices.
• downloadjs: Trigger JavaScript download
• html-to-image: Convert HTML elements to images (including SVG, JPEG, and PNG)
• Vercel: Best for hosting Next.js applications

Create shapes in TryShape using CSS clip-path

Let me highlight the source code that helps create shapes using the CSS clip-path property. The following code snippet defines the user interface structure of a container element (Box) that is a 300px square. The Box element has two child elements, Shadow and Component.

<box height="300px" onclick="{(e)"> props.handleChange(e)} width="300px">
  {
    props.shapeInformation.showShadow &&
    <shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
  }
  <component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>

The Shadow component defines the area hidden by clip-path clips. We create it to show a light background so that the end user can partially see this area. Component is used to assign clip-path values ​​to display clip area.

See the styled-component definitions of Box, Shadow, and Component below:

 // Create styled-components code for UI components using CSS properties // Container div
const Box = styled.div`
  width: ${props => props.width || '100px'};
  height: ${props => props.height || '100px'};
  margin: 0 auto;
  position: relative;
`;

// Shadow defines the hidden area by `clip-path` cropping // We display a light background to make this area partially visible.
const Shadow = styled.div`
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

// Get the `clip-path` value (formula) and set it to the actual component of the `clip-path` property.
const Component = styled.div`
  clip-path: ${props => props.formula}; // formula is the clip-path value background-color: ${props => props.backgroundColor || '#00c4ff'};
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

Feel free to view the complete code base in the GitHub code base.

TryShape's future development direction

TryShape handles creating and managing basic shapes using background CSS clip-path . It helps export shapes and CSS code snippets for use in your web application. It has the potential to develop more valuable features. The main function is the ability to create shapes with curved edges.

To support curve shapes, we need to support the following values ​​in TryShape:

• Clip source using url()
• path() .

With these values ​​we can create shapes using SVG and then use one of the above values. This is an example of a url() CSS function that uses SVG support to create shapes.

<div> Heart</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>

Then there is CSS:

 .heart {
  clip-path: url(#heart-path);
}

Now, let's create a shape using path() value. HTML should have an element like a div:

<div> Curve</div>

In CSS:

 .curve {
  clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

Conclusion

I hope you enjoy my TryShape application and understand the philosophy behind it, the strategies I consider, the underlying technology and its potential for the future. Please consider giving it a try and check the source code. Of course, you can contribute to it at any time through questions, feature requests, and code.

Before the end, I want to show you a short video for the Hashnode hackathon, TryShape is the entry and was finally selected for the winners. I hope you enjoyed it.

Let's contact us. You can comment on @me (@tapasadhikary) on Twitter or follow it anytime.

The above is the detailed content of The Story Behind TryShape, a Showcase for the CSS clip-path property. For more information, please follow other related articles on the PHP Chinese website!