RubyGems - cyberweb - Versions diffs - 0.4.174 → 0.5.225 - Mend

cyberweb 0.4.174 → 0.5.225

Potentially problematic release.

This version of cyberweb might be problematic. Click here for more details.

Files changed (625) hide show

data/examples/css/animated_3D_cube_example/animated_3D_cube_example.html ADDED Viewed

@@ -0,0 +1,265 @@
+<html>
+<head>
+<style>
+/* basic style */
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background: radial-gradient(circle at center, black, steelblue);
+  transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+}
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: 80px;
+  margin: 0 -80px 0 0;
+}
+/* cube: this is the center */
+.cube {
+  position: relative;
+  width: 1px;
+  height: 1px;
+  margin: 0 80px 0 0;
+  transform-style: preserve-3d;
+}
+.wall {
+  width: 80px;
+  height: 80px;
+  position: absolute;
+  left: calc(-80px / 2);
+  top:  calc(-80px / 2);
+  text-align: center;
+  line-height: 100px;
+  border: 1px solid springgreen;
+}
+.front {
+  transform: translateZ(calc(80px / 2));
+}
+.back {
+  transform: translateZ(calc(-80px / 2)) rotateY(180deg);
+}
+.right {
+  transform: translateX(calc(80px / 2)) rotateY(90deg);
+}
+.left {
+  transform: translateX(calc(-80px / 2)) rotateY(-90deg);
+}
+.top {
+  transform: translateY(calc(-80px / 2)) rotateX(90deg);
+}
+.bottom {
+  transform: translateY(calc(80px / 2)) rotateX(-90deg);
+}
+/* animation */
+.flex:nth-of-type(4) .cube:nth-of-type(1) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards;
+}
+.flex:nth-of-type(3) .cube:nth-of-type(1) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
+}
+.flex:nth-of-type(4) .cube:nth-of-type(2) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
+}
+.flex:nth-of-type(2) .cube:nth-of-type(1) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
+}
+.flex:nth-of-type(3) .cube:nth-of-type(2) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
+}
+.flex:nth-of-type(4) .cube:nth-of-type(3) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
+}
+.flex:nth-of-type(1) .cube:nth-of-type(1) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
+}
+.flex:nth-of-type(2) .cube:nth-of-type(2) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
+}
+.flex:nth-of-type(3) .cube:nth-of-type(3) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
+}
+.flex:nth-of-type(4) .cube:nth-of-type(4) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
+}
+.flex:nth-of-type(1) .cube:nth-of-type(2) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
+}
+.flex:nth-of-type(2) .cube:nth-of-type(3) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
+}
+ .flex:nth-of-type(3) .cube:nth-of-type(4) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
+}
+ .flex:nth-of-type(1) .cube:nth-of-type(3) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
+}
+ .flex:nth-of-type(2) .cube:nth-of-type(4) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
+}
+ .flex:nth-of-type(1) .cube:nth-of-type(4) {
+  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s forwards;
+}
+ @keyframes rotation {
+  100% {
+	  transform: rotateX(270deg) rotateY(270deg);
+	}
+}
+ .wall {
+  animation: color 2s linear 1.5s forwards;
+}
+ @keyframes color {
+  100% {
+	  background-color: springgreen;
+	}
+}
+</style>
+</head>
+<body>
+<div class="container">
+<div class="flex">
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+</div>
+<div class="flex">
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+</div>
+<div class="flex">
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+</div>
+<div class="flex">
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+<div class="cube">
+<div class="wall front"></div>
+<div class="wall back"></div>
+<div class="wall left"></div>
+<div class="wall right"></div>
+<div class="wall top"></div>
+<div class="wall bottom"></div>
+</div>
+</div>
+</div>
+</body>
+</html>

data/examples/css/animated_bird_example/animated_bird_example.html ADDED Viewed

@@ -0,0 +1,207 @@
+<html>
+<head>
+<title>
+Animated Bird Example
+</title>
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+:root {
+  --body: #ff533e;
+  --mouth: #000000;
+  --feather: #939393;
+  --beak-top: #e9581a;
+  --beak-down: #aa4c21;
+  --leg: #00adef;
+  --body-color: #e3edf7;
+}
+body {
+  background: var(--body-color);
+  font-family: sans-serif;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bird_container {
+  width: 400px;
+  height: 400px;
+  position: relative;
+}
+ .body,  .mouth,  .feather,  .tail, .beak, .mouth::before, .mouth::after, .leg, .leg::after, .leg::before {
+  position: absolute;
+}
+ .body,  .mouth, .feather, .beak, .mouth::before, .mouth::after  {
+  border-radius: 50%;
+}
+.body {
+  top: 26px;
+  left: 50px;
+  height: 180px;
+  width: 200px;
+  transform: rotate(-17deg);
+  background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--body) 20%);
+  z-index: 2;
+}
+.mouth {
+  background:  var(--mouth);
+  top: 20px;
+  left: -175px;
+  width: 100px;
+  height: 100px;
+  transform: rotate(-17deg);
+  z-index: 5;
+  animation: animate-mouth 1.5s forwards;
+  animation-delay: 1.5s;
+}
+@keyframes animate-mouth {
+  100% {
+    left: 175px;
+  }
+}
+.mouth::before {
+  content: "";
+  width: 30px;
+  height: 30px;
+  background: white;
+  position: absolute;
+  top: 20px;
+  left: 40px;
+}
+.mouth::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  background: black;
+  position: absolute;
+  top: 30px;
+  left: 55px;
+  animation: animate-eye 1s infinite;
+  animation-delay: 4s;
+}
+/*
+ * This will animate the eye of the bird.
+ */
+@keyframes animate-eye {
+  50% {
+    height: 5px;
+  }
+}
+.feather {
+  z-index: 4;
+  left: 44px;
+  top: -206px;
+  width: 150px;
+  height: 150px;
+  background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--feather) 50%);
+  transform: rotate(-17deg);
+  animation: animate-feather 1.5s forwards;
+  animation-delay: 1.5s;
+}
+@keyframes animate-feather {
+  100% {
+    top: -6px;
+  }
+}
+.tail {
+  width: 150px;
+  height: 60px;
+  background-color: var(--mouth);
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
+  top: 92px;
+  left: 324px;
+  transform: rotate(-17deg);
+  z-index: 3;
+  animation: animate-tail 1.5s forwards;
+  animation-delay: 1.5s;
+}
+@keyframes animate-tail {
+  100% {
+    left: -24px;
+  }
+}
+.beak {
+  height: 100px;
+  width: 100px;
+  background: linear-gradient(to bottom, var(--beak-top) 0%, var(--beak-top) 15%, transparent 15% );
+  left: 224px;
+  top: 240px;
+  z-index: -1;
+  transform: rotate(-17deg);
+  animation: animate-beak 1.5s forwards;
+  animation-delay: 1.5s;
+}
+@keyframes animate-beak {
+  100% {
+    top: 40px;
+  }
+}
+.leg {
+  background: var(--leg);
+  height: 50px;
+  width: 10px;
+  border-radius: 10px;
+  top: 515px;
+  left: 125px;
+  transform: rotate(-15deg);
+  z-index: 1;
+  animation: animate-leg 1.5s forwards;
+  animation-delay: 1.5s;
+}
+@keyframes animate-leg {
+  100% {
+    top: 215px;
+  }
+}
+.leg::before {
+  bottom: -8px;
+  content: "";
+  width: 40px;
+  height: 9px;
+  background: var(--leg);
+  border-radius: 10px;
+  transform: rotate(15deg);
+  z-index: -1;
+}
+.leg::after {
+  top: -8px;
+  content: "";
+  width: 30px;
+  height: 9px;
+  background: var(--leg);
+  border-radius: 10px;
+  transform: rotate(-15deg);
+  z-index: -1;
+}
+</style>
+</head>
+<body>
+<div class="bird_container">
+ <div class="body"></div>
+ <div class="mouth"></div>
+ <div class="beak"></div>
+ <div class="feather"></div>
+ <div class="tail"></div>
+ <div class="leg"></div>
+</div>
+</body>
+</html>

data/examples/css/animated_desk_example/animated_desk_example.html ADDED Viewed

@@ -0,0 +1,120 @@
+<html>
+<head>
+<title>
+Animated Desk Example
+</title>
+<style>
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #EBE7E7;
+}
+svg {
+  width:  256px;
+  height: 256px;
+}
+/* SMOKE */
+#smoke_1 {
+  stroke-dasharray: 0, 10;
+  animation: smoke 4s ease infinite;
+}
+#smoke_2 {
+  stroke-dasharray: 0, 15;
+  animation: smoke 4s 0.5s ease infinite;
+}
+@keyframes smoke {
+    0% { stroke-dasharray:  0, 10; }
+   50% { stroke-dasharray: 10,  0; }
+  100% { stroke-dasharray: 10,  0; opacity: 0; }
+}
+/* WRITING */
+#line_1 {
+  opacity: 0;
+  animation: writing_animation 0.5s linear forwards;
+}
+#line_2 {
+  opacity: 0;
+  animation: writing_animation 0.5s 1s linear forwards;
+}
+#line_3 {
+  opacity: 0;
+  animation: writing_animation 0.5s 1.5s linear forwards;
+}
+#line_4 {
+  opacity: 0;
+  animation: writing_animation 0.5s 2s linear forwards;
+}
+@keyframes writing_animation {
+    0% { width:  0px; opacity: 1;}
+  100% { width: 14px; opacity: 1;}
+}
+</style>
+</head>
+<body>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g id="study">
+ <rect width="64" height="64"/>
+ <g id="smoke">
+ <path id="smoke_2" d="M9 21L9.55279 19.8944C9.83431 19.3314 9.83431 18.6686 9.55279 18.1056L9 17L8.44721 15.8944C8.16569 15.3314 8.16569 14.6686 8.44721 14.1056L9 13" stroke="#797270"/>
+ <path id="smoke_1" d="M6.5 22L7.05279 20.8944C7.33431 20.3314 7.33431 19.6686 7.05279 19.1056L6.5 18L5.94721 16.8944C5.66569 16.3314 5.66569 15.6686 5.94721 15.1056L6.5 14" stroke="#797270"/>
+ </g>
+ <g id="laptop">
+  <rect id="laptop-base" x="17" y="28" width="20" height="3" fill="#F3F3F3" stroke="#453F3C" stroke-width="2"/>
+  <rect id="laptop-screen" x="18" y="17" width="18" height="11" fill="#5A524E" stroke="#453F3C" stroke-width="2"/>
+  <rect id="line_1" x="20" y="19" width="14" height="1" fill="#F78764"/>
+  <rect id="line_2" x="20" y="21" width="14" height="1" fill="#F9AB82"/>
+  <rect id="line_3" x="20" y="23" width="14" height="1" fill="#F78764"/>
+  <rect id="line_4" x="20" y="25" width="14" height="1" fill="#F9AB82"/>
+ </g>
+ /*
+  * The cup. The fill colour is designated via fill=.
+  *
+  * The current colour is #A60A3D, aka cranberry.
+  */
+ <g id="cup">
+ <rect id="rectangle_978" x="5" y="24" width="5" height="7" fill="#A60A3D" stroke="#453F3C" stroke-width="2"/>
+ <path id="ellipse_416" d="M11 28C12.1046 28 13 27.1046 13 26C13 24.8954 12.1046 24 11 24" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_996" x="6" y="25" width="3" height="1" fill="#D6D2D1"/>
+ </g>
+ <g id="books">
+ <rect id="rectangle_984" x="58" y="27" width="4" height="14" transform="rotate(90 58 27)" fill="#B16B4F" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_985" x="56" y="23" width="4" height="14" transform="rotate(90 56 23)" fill="#797270" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_986" x="60" y="19" width="4" height="14" transform="rotate(90 60 19)" fill="#F78764" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_993" x="47" y="20" width="12" height="1" fill="darkbrown"/>
+ <rect id="rectangle_994" x="43" y="24" width="12" height="1" fill="darkbrown"/>
+ <rect id="rectangle_995" x="45" y="28" width="12" height="1" fill="#804D39"/>
+ </g>
+ <g id="desk">
+ <rect id="rectangle_973" x="4" y="31" width="56" height="5" fill="#797270" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_987" x="10" y="36" width="30" height="6" fill="#797270" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_975" x="6" y="36" width="4" height="24" fill="#797270" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_974" x="40" y="36" width="18" height="24" fill="#797270" stroke="#453F3C" stroke-width="2"/>
+ <line id="line_129" x1="40" y1="48" x2="58" y2="48" stroke="#453F3C" stroke-width="2"/>
+ <line id="line_130" x1="22" y1="39" x2="28" y2="39" stroke="#453F3C" stroke-width="2"/>
+ <line id="line_142" x1="46" y1="42" x2="52" y2="42" stroke="#453F3C" stroke-width="2"/>
+ <line id="line_131" x1="46" y1="54" x2="52" y2="54" stroke="#453F3C" stroke-width="2"/>
+ <rect id="rectangle_988" x="11" y="37" width="28" height="1" fill="#54504E"/>
+ <rect id="rectangle_992" x="5" y="32" width="54" height="1" fill="#9E9492"/>
+ <rect id="rectangle_989" x="7" y="37" width="2" height="1" fill="#54504E"/>
+ <rect id="rectangle_990" x="41" y="37" width="16" height="1" fill="#54504E"/>
+ <rect id="rectangle_991" x="41" y="49" width="16" height="1" fill="#54504E"/>
+ <line id="line_143" y1="60" x2="64" y2="60" stroke="#453F3C" stroke-width="2"/>
+ </g>
+ </g>
+</svg>
+</body>
+</html>