Jelle

How I improved using complex shapes within web projects

I was so tired of battling with complex shapes while building web projects. The fear of dynamic content within the design gave me a lot of headeaches in the past. Come along with me while I reflect on my journey. It might give you some insight if you are having the same struggle as I had.

The Shape-scaling Struggle

Scaling shapes on the web can feel extremely frustrating, and time-consuming. It often leads to compromises in design or functionality. I still remember multiple occasions where I had to build complext section dividers for a website. Which looked amazing within the design. But no matter how much I tried. The shapes just wouldn't play nice with varying screen sizes and content.

The power of relative clip paths

The biggest breakthrough for me personally was learning about relative clip paths. Unlike normal, or static clip paths, relative clip paths adapt dynamically to changes of the elements sized. This is because they aren't based on "hard" pixel values, but more like percentages. By using the relative clip paths, I was able to actually use them in a dynamic enviroment

How collaborating with designers makes a big impact

During my web development carreer I noticed a big change in the time I had to spent building things. More specifically, by just discussing certain parts of a design with the designer. By communicating with them early in the process and discussing the feasibility of certain shapes, I was able to find make decisions that benefited the development aspects of the project, without hindering the design. More often than not it are small, but over time, it led to a lot of time saved.

My first time using relative clip paths

For me, the first time finding out about and actually using relative clip paths feels a bit like a success story. What still stands out to me is the transformation of a project where I was struggling with responsive design and static clip paths. After learning about and implementing relative clip paths, not only did the website look better on every screen size, but the code became more readable and maintainable.

As an example of how my code looked before and after (dummy code used):
Before

.section {
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

    @media screen and (min-width: 500px) {
        clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    }

    @media screen and (min-width: 600px) {
        clip-path: polygon(40% 0%, 80% 0%, 100% 100%, 0% 100%);
    }

    @media screen and (min-width: 635px) {
        clip-path: polygon(40% 0%, 80% 0%, 100% 100%, 0% 100%);
    }

    @media screen and (min-width: 805px) {
        clip-path: polygon(40% 0%, 80% 0%, 100% 100%, 0% 100%);
    }

    ...
}

After

<svg class="svg">
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
        <path d="M0.5,0.846 l-0.309,0.154,0.044,-0.357 L0,0.382 l0.336,-0.067 L0.5,0 l0.164,0.315,0.336,0.067,-0.235,0.261,0.044,0.357"></path>
    </clipPath>
</svg>

.section {
    -webkit-clip-path: url(#my-clip-path);
    clip-path: url(#my-clip-path);
}

My advice for Fellow Developers

Looking back on my journey with custom shapes, one piece of advice I would give to fellow developers struggling with shape-scaling issues is to practice relentlessly. Experiment with different shapes, explore the capabilities of relative clip paths, and don't be afraid to seek inspiration from others in the community. And remember, whenever possible, use clip paths in overlapping elements, such as section dividers, to gain greater control over dynamic content.

Jelle