A
A
Alexander Varlakov2021-11-22 21:43:11
css
Alexander Varlakov, 2021-11-22 21:43:11

Is it possible to export with Figma css clip-path?

There is such a picture:
619be1caac92e982093340.jpeg

Are there any tools, plugins in Figma for generating css clip-path?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Varlakov, 2021-11-23
@AlexandrVV86

I answer myself. And maybe it will come in handy for someone...
I circled the outline with a pen, exported the outline to svg.

<svg height="0" width="0" >
        <defs>
            <clipPath id="franchiseTop" clipPathUnits="objectBoundingBox" transform="scale(0.001964, 0.002564)">
                <path d="M69.5 6.5L67.5 10.5L65 19.5L63.5 26L62 33L60 41.5L57.5 53.5L55.5 63.5L53.5 71.5L52.5 76L51.5 81.5L49 92L46.5 104L45 111.5L42.5 121.5L41 129L39 137.5L37.5 144.5L36 152L33.5 163.5L30 178.5L28.5 186.5L25 202L23.5 208.5L20 226L16.5 241.5L13.5 255.5L9.5 273.5L5.5 290.5L3 302L2 307L1 311.5V315.5V319.5L3 328L6 333L7.5 335L11 338.5L13.5 340.5L15.5 342L17.5 343L19.5 344L25 345.5L79.5 351L159 358.5L215.5 364L244 367L286.5 371L296.5 372L346 376.5L404.5 382.5L427 384.5L447.5 386.5L460.5 388L471 389L477.5 389.5H482L486 388.5L491 386.5L496.5 383.5L502.5 377.5L505.5 372L507.5 367L508 362.5V357L507 324.5L506 292L505 260L504 228L503 200L502.5 179.5V162L502 145.5L501 122L500.5 104.5L500 90L499.5 77.5L499 66.5V63V52L498.5 40.5L498 28L497.5 16.5L497 10.5L496.5 7L495.5 3.5L494.5 1.5L494 1L493.5 0.5H285H183.5H80.5H76L74 1L72.5 2.5L69.5 6.5Z"/>
            </clipPath>
        </defs>
    </svg>

In svg I applied a transformation for scaling: transform: scale(1 / width , 1 / height)
transform="scale(0.001964, 0.002564)"
Well, css:
object-fit: cover;
clip-path: url(#franchiseTop);

And we got an adaptive clip-path as a result

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question