A Pen By
Artem

` ````
-3.times do
.col
.wrap
-4.times do
.circle
.triangle
```

` ````
$n: 4
$s: 150
$a: 360deg
@function sqrt($r)
$x0: 1
$solution: false
@for $i from 1 through 10
@if abs(2 * $x0) < 0,00000000000001
$solution: false
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0) !global
@if ( abs($x1 - $x0) / abs($x1)) < 0,0000001
$solution: true
$x0: $x1
@if $solution == true
@if $r < 0
@return $x1 #{i}
@else
@return $x1
@else
@return "No solution"
body
overflow: hidden
height: 100vh
perspective: 600px
div
transform-style: preserve-3d
box-sizing: border-box
.col
width: calc(100%/3)
height: 100%
float: left
.wrap
width: $s + px
height: $s + px
position: absolute
top: calc(50% - #{$s + px} / 2)
left: calc(50% - #{$s + px} / 2)
animation: animation_rotate_wrap 15s linear infinite
.circle
width: $s + px
height: $s + px
position: absolute
top: calc(50% - #{$s + px} / 2)
left: calc(50% - #{$s + px} / 2)
border-radius: 50%
border: 2px solid black
transform-origin: 50% 0%
@supports(clip: rect(70px, 9999px, 45px, 0))
&:after,
&:before
content: ''
position: absolute
top: 0
width: 100%
height: 100%
border-radius: 50%
&:after
left: 2px
border: 2px solid black
animation: glitch-anim-1 5s infinite ease-out alternate-reverse
&:before
left: -2px
border: 3px solid rgba(red, .4)
animation: glitch-anim-2 5s infinite ease-in alternate
@for $i from 1 to $n
&:nth-child(#{$i})
transform: rotatey($a/($n - 1)*$i) translatez(1px) rotatex(-20deg)
&:nth-child(4)
transform-origin: center center
transform: rotatey($a) translatey($s/5 + px) rotatex(-90deg)
.triangle
position: absolute
width: $s/2 + px
height: $s/2 + px
border-radius: 50%
top: calc(50% - #{$s/2 + px} / 2)
left: calc(50% - #{$s/2 + px} / 2)
border: 2px solid black
&:before
$l: ceil(sqrt(3) / 2 * $s)
content: ''
width: $l + px
height: ceil(sqrt($l*$l - $l*$l/4)) + px
position: absolute
bottom: 0
left: 50%
transform: translatex(-50%)
background: rgba(red, .3)
clip-path: polygon(50% 0, 0 100%, 100% 100%)
-webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%)
@keyframes animation_rotate_wrap
to
transform: rotatey(1turn) rotatex(1turn)
@for $l from 1 through 2
@keyframes glitch-anim-#{$l}
$steps: 10*($l*2)
@for $i from 0 through $steps
#{percentage($i*(1/$steps))}
clip: rect(random(100)+px, 9999px, random(100)+px, 0)
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers