Loading video...

Video Failed to Load

Go Home

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

pie6k's profile picture

Adam Pietrasiak

35,501 subscribers

48,723 views • 7 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

I've created a Chrome extension that squircles every rounded element on every website Enjoy!
0:14

I've created a Chrome extension that squircles every rounded element on every website Enjoy!

Adam Pietrasiak

98,824 views • 7 months ago

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.
0:12

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.

benjamin

38,669 views • 7 months ago

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 views • 3 months ago

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 views • 6 months ago

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;
0:11

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

Haz

228,978 views • 5 months ago

I've built an app to play around with the new CSS squircle feature. →
0:19

I've built an app to play around with the new CSS squircle feature. →

Jim Raptis

27,748 views • 5 months ago

Gemini 3 is absolutely crazy you can generate a website that can use hands to interact with 3D models.. how's this even possible created with simple text prompt, no need coding at all
0:15

Gemini 3 is absolutely crazy you can generate a website that can use hands to interact with 3D models.. how's this even possible created with simple text prompt, no need coding at all

el.cine

895,285 views • 7 months ago

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A
0:15

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

CodePen.IO

11,839 views • 10 months ago

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 views • 9 months ago

created this animated vestaboard, made using Next.js and Tailwind CSS
0:11

created this animated vestaboard, made using Next.js and Tailwind CSS

OPM

12,995 views • 7 months ago

Added a simple tool to the Framer website that allows you to check your website’s meta tags and see how they display across multiple platforms, including X, Google, Slack, LinkedIn, and Threads.
0:16

Added a simple tool to the Framer website that allows you to check your website’s meta tags and see how they display across multiple platforms, including X, Google, Slack, LinkedIn, and Threads.

Jurre Houtkamp

22,717 views • 5 months ago

Saved you a click When you want to adjust a corner radius, the controls will now appear inline when that shape is selected
0:12

Saved you a click When you want to adjust a corner radius, the controls will now appear inline when that shape is selected

Figma

36,720 views • 1 year ago

Trump: "Corner stores. What is a corner store? I've never heard that term. I know what a corner store is, but I've never heard it described. A corner store? Who the hell wrote that?"
0:16

Trump: "Corner stores. What is a corner store? I've never heard that term. I know what a corner store is, but I've never heard it described. A corner store? Who the hell wrote that?"

The Bulwark

42,811 views • 2 months ago

Langevin Monte Carlo allows you to draw samples from a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.
0:19

Langevin Monte Carlo allows you to draw samples from a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.

Alec Helbling

96,895 views • 1 year ago

In The Expanse: Osiris Reborn, there are no strictly defined classes. Instead, you will have play styles—a system that allows you to customize the way you play and experiment with weapons, gadgets, and abilities. Play as you see fit!
0:15

In The Expanse: Osiris Reborn, there are no strictly defined classes. Instead, you will have play styles—a system that allows you to customize the way you play and experiment with weapons, gadgets, and abilities. Play as you see fit!

The Expanse: Osiris Reborn

35,874 views • 5 months ago

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO
0:17

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,042 views • 1 year ago

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move
0:18

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

jhey ʕ•ᴥ•ʔ

200,156 views • 7 months ago

Trump: "Millions of American small businesses, including corner stores. What is a corner store? I've never heard that term. I know what a corner store is but I've never heard it described-- a corner store. Who the hell wrote that?"
0:16

Trump: "Millions of American small businesses, including corner stores. What is a corner store? I've never heard that term. I know what a corner store is but I've never heard it described-- a corner store. Who the hell wrote that?"

Aaron Rupar

2,143,329 views • 2 months ago

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.
0:10

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.

Dillion

89,955 views • 2 years ago

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().
0:10

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 views • 2 months ago