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

      51% claimed already: This Xbox Edition mechanical keyboard is at its lowest price yet while this sale lasts — Nostalgic green transparency for the win

      July 11, 2025

      This RDR2 deal feels like highway robbery — grab the “Wild West masterpiece” today before it rides off into the sunset

      July 11, 2025

      Grab these 7 Xbox games all under $40 — you don’t have long before Amazon Prime Day ends, so act fast

      July 11, 2025

      After 24 hours with Samsung’s Galaxy Z Flip 7, one big thing stands out

      July 11, 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 11, 2025
      Recent

      The details of TC39’s last meeting

      July 11, 2025

      Francisco Bergeret Paves the Way Through Strong Leadership at Perficient

      July 11, 2025

      Intelligent Automation in the Healthcare Sector with n8n, OpenAI, and Pinecone

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

      51% claimed already: This Xbox Edition mechanical keyboard is at its lowest price yet while this sale lasts — Nostalgic green transparency for the win

      July 11, 2025
      Recent

      51% claimed already: This Xbox Edition mechanical keyboard is at its lowest price yet while this sale lasts — Nostalgic green transparency for the win

      July 11, 2025

      This RDR2 deal feels like highway robbery — grab the “Wild West masterpiece” today before it rides off into the sunset

      July 11, 2025

      Grab these 7 Xbox games all under $40 — you don’t have long before Amazon Prime Day ends, so act fast

      July 11, 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

    51% claimed already: This Xbox Edition mechanical keyboard is at its lowest price yet while this sale lasts — Nostalgic green transparency for the win

    July 11, 2025
    News & Updates

    This RDR2 deal feels like highway robbery — grab the “Wild West masterpiece” today before it rides off into the sunset

    July 11, 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

    5 Kindle accessories every user should have (and why they make such a big difference)

    News & Updates

    Distillation Scaling Laws

    Machine Learning

    CVE-2025-48788 – Apache HTTP Server Credentials Disclosure

    Common Vulnerabilities and Exposures (CVEs)

    CVE-2025-5487 – AutomatorWP SQL Injection Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    Highlights

    News & Updates

    Amazon Gaming Week is LIVE — 7 hand-picked deals with price-busting competitors that you can’t miss!

    April 28, 2025

    Amazon Gaming Week offers hot deals on Xbox and PC gaming at Amazon and its…

    CVE-2025-7206 – D-Link DIR-825 HTTPd Stack-Based Buffer Overflow

    July 9, 2025

    Synology Network File System Vulnerability Let Read Any File

    April 23, 2025

    Google NotebookLM Launches Audio Overviews in 50+ Languages, Expanding Global Accessibility for AI Summarization

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

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