I made a thing (codepen.io)

submitted 5 months ago* (last edited 5 months ago) by spartanatreyu@programming.dev to c/webdev@programming.dev

3 comments fedilink hide all child comments

Single HTML element + CSS only

Inhale for 4 seconds
Hold for 4 seconds
Exhale for 4 seconds
Hold for 4 seconds

And repeat

Inspired by: https://quietkit.com/box-breathing/

Note: The current Safari version has a bugged linear() implementation that has been fixed in the upcoming version.

top 3 comments

sorted by: hot top controversial new old

[-] DuffmanOfTheCosmos@beehaw.org 5 points 5 months ago

This is cool, but it bothers me that the inhale cycle doesn't end with completely filling the circle with blue. I feel unfulfilled, like when the DVD player screensaver doesn't hit neatly into the corner of the screen when it totally looks like it's going to

[-] spartanatreyu@programming.dev 3 points 5 months ago* (last edited 5 months ago)

Lol, well I could change it, but it was based on the gif at https://quietkit.com/box-breathing/

I think it's because you're not supposed to expand your lungs so much that they feel like they're going to burst.

But if you scroll to the bottom of the css and look at line 69, you can change transform: scale(90%); to transform: scale(100%); to see if you like it better.

[-] DuffmanOfTheCosmos@beehaw.org 2 points 5 months ago

Haha nice, thanks!

this post was submitted on 14 May 2024

16 points (100.0% liked)

Web Development

3430 readers

1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Follow the programming.dev site rules
Keep content related to web development
If what you're posting relates to one of the related communities, crosspost it into there to help them grow
If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

!cool_github_projects@programming.dev

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

https://frontendfoc.us/ - [RSS]
https://wesbos.com/blog
https://davidwalsh.name/ - [RSS]
https://www.nngroup.com/articles/
https://sia.codes/posts/ - [RSS]
https://www.smashingmagazine.com/ - [RSS]
https://www.bennadel.com/ - [RSS]
https://web.dev/ - [RSS]

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

snowe@programming.dev

erlingur@programming.dev

Ategon@programming.dev