Close Menu
    DevStackTipsDevStackTips
    • Home
    • News & Updates
      1. Tech & Work
      2. View All

      This week in AI dev tools: Gemini API Batch Mode, Amazon SageMaker AI updates, and more (July 11, 2025)

      July 11, 2025

      JFrog finds MCP-related vulnerability, highlighting need for stronger focus on security in MCP ecosystem

      July 11, 2025

      8 Key Questions Every CEO Should Ask Before Hiring a Node.js Development Company in 2025

      July 11, 2025

      Vibe Loop: AI-native reliability engineering for the real world

      July 10, 2025

      Distribution Release: CachyOS 250713

      July 13, 2025

      Most AI projects are abandoned – 5 ways to ensure your data efforts succeed

      July 13, 2025

      How agentic AI is transforming the very foundations of business strategy

      July 13, 2025

      The best Xbox and PC headset I’ve used for the last couple years is on sale

      July 12, 2025
    • Development
      1. Algorithms & Data Structures
      2. Artificial Intelligence
      3. Back-End Development
      4. Databases
      5. Front-End Development
      6. Libraries & Frameworks
      7. Machine Learning
      8. Security
      9. Software Engineering
      10. Tools & IDEs
      11. Web Design
      12. Web Development
      13. Web Security
      14. Programming Languages
        • PHP
        • JavaScript
      Featured

      The details of TC39’s last meeting

      July 13, 2025
      Recent

      The details of TC39’s last meeting

      July 13, 2025

      new Date(“wtf”) – How well do you know JavaScript’s Date class?

      July 12, 2025

      Francisco Bergeret Paves the Way Through Strong Leadership at Perficient

      July 11, 2025
    • Operating Systems
      1. Windows
      2. Linux
      3. macOS
      Featured

      Distribution Release: CachyOS 250713

      July 13, 2025
      Recent

      Distribution Release: CachyOS 250713

      July 13, 2025

      Word for the Web Finally Gets Proper Header and Footer Editing

      July 13, 2025

      Windows 11 Build 27898 Adds Small Taskbar Icons, Quick Recovery, Smarter Sharing

      July 13, 2025
    • Learning Resources
      • Books
      • Cheatsheets
      • Tutorials & Guides
    Home»News & Updates»SVG to CSS Shape Converter

    SVG to CSS Shape Converter

    May 21, 2025

    Shape master Temani Afif has what might be the largest collection of CSS shapes on the planet with all the tools to generate them on the fly. There’s a mix of clever techniques he’s typically used to make those shapes, many of which he’s covered here at CSS-Tricks over the years.

    Some of the more complex shapes were commonly clipped with the path() function. That makes a lot of sense because it literally accepts SVG path coordinates that you can draw in an app like Figma and export.

    But Temani has gone all-in on the newly-released shape() function which recently rolled out in both Chromium browsers and Safari. That includes a brand-new generator that converts path() shapes in shape() commands instead.

    So, if we had a shape that was originally created with an SVG path, like this:

    .shape {
      clip-path: path(
        M199.6,18.9
        c-4.3-8.9-12.5-16.4-22.3-17.8
        c-11.9-1.7-23.1,5.4-32.2,13.2
        c-9.1,7.8-17.8,16.8-29.3,20.3
        c-20.5,6.2-41.7-7.4-63.1-7.5
        c38.7,27,24.8,33,15.2,43.3
        c-35.5,38.2-0.1,99.4,40.6,116.2
        c32.8,13.6,72.1,5.9,100.9-15
        c27.4-19.9,44.3-54.9,47.4-88.6
        c0.2-2.7,0.4-5.3,0.5-7.9
        c204.8,38,203.9,27.8,199.6,18.9
        z
      );
    }

    …the generator will spit this out:

    .shape {
      clip-path: shape(
        from 97.54% 10.91%,
        curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,
        curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,
        curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,
        curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,
        curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,
        curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,
        curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,
        curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,
        curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,
        curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,
        close
      );
    }

    Pretty cool!

    CodePen Embed Fallback

    Honestly, I’m not sure how often I’ll need to convert path() to shape(). Seems like a stopgap sorta thing where the need for it dwindles over time as shape() is used more often — and it’s not like the existing path() function is broken or deprecated… it’s just different. But still, I’m using the generator a LOT as I try to wrap my head around shape() commands. Seeing the commands in context is invaluable which makes it an excellent learning tool.


    SVG to CSS Shape Converter originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

    Source: Read More 

    Facebook Twitter Reddit Email Copy Link
    Previous ArticleVahatraker is a live MIDI sequencer
    Next Article Raspberry Pi 5 Desktop Mini PC: Power Consumption

    Related Posts

    News & Updates

    Distribution Release: CachyOS 250713

    July 13, 2025
    News & Updates

    Most AI projects are abandoned – 5 ways to ensure your data efforts succeed

    July 13, 2025
    Leave A Reply Cancel Reply

    For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

    Continue Reading

    Hackers Exploit Critical Craft CMS Flaws; Hundreds of Servers Likely Compromised

    Development

    15 Best Free and Open Source Linux GUI Password Managers

    Linux

    Vulnerabilità di sicurezza in Linux: come i rootkit basati su io_uring aggirano i sistemi di rilevamento

    Linux

    CVE-2024-5878 – WordPress SimpleLightbox Stored Cross-Site Scripting Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    Highlights

    Machine Learning

    MIT Researchers Introduce DISCIPL: A Self-Steering Framework Using Planner and Follower Language Models for Efficient Constrained Generation and Reasoning

    April 16, 2025

    Language models predict sequences of words based on vast datasets and are increasingly expected to…

    Orbit by Mozilla (AI Add-on for Firefox) Shuts Down This Month

    June 9, 2025

    Reimagining Investment Portfolio Management with Agentic AI

    May 8, 2025

    Rilasciato KDE Frameworks 6.13: Compatibilità migliorata con Qt 6.9 e nuove funzionalità

    April 13, 2025
    © DevStackTips 2025. All rights reserved.
    • Contact
    • Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.