Flexbox playground
How do I make an flexbox playground?
What is a flexbox playground? How do you make a flexbox playground? This script and codes were developed by Gabi on 22 August 2022, Monday.
Flexbox playground - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox playground</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="principal">
<h2>Properties for the flex container</h2>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-direction.php">flex-direction</a> <small>( property of the flex container )</small></h4><!--flex-direction: row | row-reverse | column | column-reverse;-->
<div class="radio">
<input name="flex-direction" type="radio" class="flex-direction" id="R11" value="row" checked><label for="R11">row:</label>
<input name="flex-direction" type="radio" class="flex-direction" id="R12" value="row-reverse"><label for="R12">row-reverse:</label>
<input name="flex-direction" type="radio" class="flex-direction" id="R13" value="column"><label for="R13">column:</label>
<input name="flex-direction" type="radio" class="flex-direction" id="R14" value="column-reverse"><label for="R14">column-reverse:</label>
</div></div>
<div class="flex-container" id="direction">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p>3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-wrap.php">flex-wrap</a> <small>( property of the flex container )</small></h4><!--nowrap | wrap | wrap-reverse;-->
<div class="radio">
<input name="flex-wrap" type="radio" class="flex-wrap" id="R21" value="nowrap" checked><label for="R21">nowrap:</label>
<input name="flex-wrap" type="radio" class="flex-wrap" id="R22" value="wrap"><label for="R22">wrap:</label>
<input name="flex-wrap" type="radio" class="flex-wrap" id="R23" value="wrap-reverse"><label for="R23">wrap-reverse:</label>
</div></div>
<div class="flex-container" id="wrap">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p>3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-items.php">align-items</a> <small>( property of the flex container )</small></h4><!-- flex-start | flex-end | center | baseline | stretch;-->
<div class="radio">
<input name="flex-align-items" type="radio" class="flex-align-items" id="R31" value="align-items-start" ><label for="R31">flex-start:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R32" value="align-items-end"><label for="R32">flex-end:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R33" value="align-items-center"><label for="R33">center:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R34" value="align-items-baseline"><label for="R34">baseline:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R35" value="align-items-stretch" checked><label for="R35">stretch:</label>
</div></div>
<div class="flex-container" id="align">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p style="font-size:50px;">3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-justify-content.php">justify-content</a> <small>( property of the flex container )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
<div class="radio">
<input name="justify-content" type="radio" class="justify-content" id="R41" value="justify-start" checked ><label for="R41">flex-start:</label>
<input name="justify-content" type="radio" class="justify-content" id="R42" value="justify-end" ><label for="R42">flex-end:</label>
<input name="justify-content" type="radio" class="justify-content" id="R43" value="justify-space-between" ><label for="R43">space-between:</label>
<input name="justify-content" type="radio" class="justify-content" id="R44" value="justify-center" ><label for="R44">center:</label>
<input name="justify-content" type="radio" class="justify-content" id="R45" value="justify-space-around" ><label for="R45">space-around:</label>
</div></div>
<div class="flex-container" id="justify">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p>3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<!--<p>En <strong>Google Chrome</strong> y <strong>Opera</strong>: problemas al cambiar dinamicamente entre <code>justify-content:space-between</code> y <code>justify-content:space-around</code> </p>-->
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-content.php">align-content</a> <small>( property of the flex container )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
<div class="radio">
<input name="align-content" type="radio" class="align-content" id="R51" value="align-content-start" ><label for="R51">flex-start:</label>
<input name="align-content" type="radio" class="align-content" id="R52" value="align-content-end" ><label for="R52">flex-end:</label>
<input name="align-content" type="radio" class="align-content" id="R53" value="align-content-center" ><label for="R53">center:</label>
<input name="align-content" type="radio" class="align-content" id="R54" value="align-content-space-between" ><label for="R54">space-between:</label>
<input name="align-content" type="radio" class="align-content" id="R55" value="align-content-space-around" ><label for="R55">space-around:</label>
<input name="align-content" type="radio" class="align-content" id="R56" value="align-content-stretch" checked><label for="R56">stretch:</label>
</div></div>
<div class="flex-container" id="alignContent">
<div class="item" data-color="1bbc9d"><p>1</p></div>
<div class="item" data-color="2fcc71"><p>2</p></div>
<div class="item" data-color="3598dc"><p>3</p></div>
<div class="item" data-color="9c59b8"><p>4</p></div>
<div class="item" data-color="34495e"><p>5</p></div>
<div class="item" data-color="16a086"><p>6</p></div>
<div class="item" data-color="27ae61"><p>7</p></div>
<div class="item" data-color="2a80b9"><p>8</p></div>
<div class="item" data-color="8f44ad"><p>9</p></div>
<div class="item" data-color="2d3e50"><p>10</p></div>
<div class="item" data-color="f1c40f"><p>11</p></div>
<div class="item" data-color="e77e23"><p>12</p></div>
<div class="item" data-color="e84c3d"><p>13</p></div>
<div class="item" data-color="ecf0f1"><p>14</p></div>
<div class="item" data-color="96a6a6"><p>15</p></div>
<div class="item" data-color="f49c14"><p>16</p></div>
<div class="item" data-color="d55401"><p>17</p></div>
<div class="item" data-color="c1392b"><p>18</p></div>
<div class="item" data-color="bec3c7"><p>19</p></div>
<div class="item" data-color="808b8d"><p>20</p></div>
</div>
</div>
<!-- propiedades de los items -->
<div class="principal">
<h2>Properties for the flex items </h2>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-self.php">align-self</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<input name="align-self" type="radio" class="align-self" id="R61" value="align-self-auto" checked ><label for="R61">auto:</label>
<input name="align-self" type="radio" class="align-self" id="R62" value="align-self-start" ><label for="R62">flex-start:</label>
<input name="align-self" type="radio" class="align-self" id="R63" value="align-self-end" ><label for="R63">flex-end:</label>
<input name="align-self" type="radio" class="align-self" id="R64" value="align-self-center" ><label for="R64">center:</label>
<input name="align-self" type="radio" class="align-self" id="R65" value="align-self-baseline" ><label for="R65">baseline:</label>
<input name="align-self" type="radio" class="align-self" id="R66" value="align-self-stretch"><label for="R66">stretch:</label>
</div>
</div>
<div class="flex-container align-items-center" id="FCI1">
<div class="item" data-color="f49c14"><p>1</p></div>
<div class="item" data-color="d55401"><p>2</p></div>
<div class="item" data-color="c1392b" id="alignSelf"><p style="font-size:50px;">3</p></div>
<div class="item" data-color="bec3c7"><p>4</p></div>
<div class="item" data-color="808b8d"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexGrow">flex-grow</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<span class="nbsp"><label for="R71">elemento 1: </label><input type="number" class="flex-grow" id="R71" min="0" ></span>
<span class="nbsp"><label for="R72">elemento 2: </label><input type="number" class="flex-grow" id="R72" min="0" ></span>
<span class="nbsp"><label for="R73">elemento 3: </label><input type="number" class="flex-grow" id="R73" min="0" ></span>
<span class="nbsp"><label for="R74">elemento 4: </label><input type="number" class="flex-grow" id="R74" min="0" ></span>
<span class="nbsp"><label for="R75">elemento 5: </label><input type="number" class="flex-grow" id="R75" min="0" ></span>
</div>
</div>
<div class="flex-container align-items-center" id="FCI2">
<div class="item" id="itemR71" data-color="f49c14"><p>1</p></div>
<div class="item" id="itemR72" data-color="d55401"><p>2</p></div>
<div class="item" id="itemR73" data-color="c1392b"><p>3</p></div>
<div class="item" id="itemR74" data-color="bec3c7"><p>4</p></div>
<div class="item" id="itemR75" data-color="808b8d"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexShrink">flex-shrink</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<span class="nbsp"><label for="R81">elemento 1: </label><input type="number" class="flex-shrink" id="R81" min="0" ></span>
<span class="nbsp"><label for="R82">elemento 2: </label><input type="number" class="flex-shrink" id="R82" min="0" ></span>
<span class="nbsp"><label for="R83">elemento 3: </label><input type="number" class="flex-shrink" id="R83" min="0" ></span>
<span class="nbsp"><label for="R84">elemento 4: </label><input type="number" class="flex-shrink" id="R84" min="0" ></span>
<span class="nbsp"><label for="R85">elemento 5: </label><input type="number" class="flex-shrink" id="R85" min="0" ></span>
</div>
</div>
<div class="flex-container align-items-center" id="FCI3">
<div class="item" id="itemR81" data-color="f49c14"><p>1</p></div>
<div class="item" id="itemR82" data-color="d55401"><p>2</p></div>
<div class="item" id="itemR83" data-color="c1392b"><p>3</p></div>
<div class="item" id="itemR84" data-color="bec3c7"><p>4</p></div>
<div class="item" id="itemR85" data-color="808b8d"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php">flex</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<p>.item { flex: flex-grow [flex-shrink] [flex-basis]; } </p>
<table id="flexBasis">
<tr><td>elemento 1</td><td>elemento 2</td></tr>
<tr><td><input type="number" class="flex-basis" id="B1" min="0" value="50" ><label for="B1">flex-basis %</label></td><td><input type="number" class="flex-basis" id="B2" min="0" value="50" ><label for="B2">flex-basis %</label></td></tr>
<tr><td><input type="number" class="flex-basis-grow" id="G1" min="0" value="0" ><label for="G1">flex-grow</label></td><td><input type="number" class="flex-basis-grow" id="G2" min="0" value="0" ><label for="G2">flex-grow</label></td></tr>
<tr><td><input type="number" class="flex-basis-shrink" id="S1" min="0" value="0" ><label for="S1">flex-shrink</label></td><td><input type="number" class="flex-basis-shrink" id="S2" min="0" value="0" ><label for="S2">flex-shrink</label></td></tr>
</table>
</div>
<div class="flex-container align-items-center" id="FCI4">
<div class="item" id="item1" data-color="f49c14"><p>1</p></div>
<div class="item" id="item2" data-color="d55401"><p>2</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-order.php">order</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<span class="nbsp"><label for="R91">elemento 1: </label><input type="number" class="flex-order" id="R91" min="0" ></span>
<span class="nbsp"><label for="R92">elemento 2: </label><input type="number" class="flex-order" id="R92" min="0" ></span>
<span class="nbsp"><label for="R93">elemento 3: </label><input type="number" class="flex-order" id="R93" min="0" ></span>
<span class="nbsp"><label for="R94">elemento 4: </label><input type="number" class="flex-order" id="R94" min="0" ></span>
<span class="nbsp"><label for="R95">elemento 5: </label><input type="number" class="flex-order" id="R95" min="0" ></span>
</div>
</div>
<div class="flex-container align-items-center" id="FCI5">
<div class="item" id="orderR91" data-color="f49c14"><p>1</p></div>
<div class="item" id="orderR92" data-color="d55401"><p>2</p></div>
<div class="item" id="orderR93" data-color="c1392b"><p>3</p></div>
<div class="item" id="orderR94" data-color="bec3c7"><p>4</p></div>
<div class="item" id="orderR95" data-color="808b8d"><p>5</p></div>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>
Flexbox playground - Script Codes CSS Codes
/*flex-direction: row | row-reverse | column | column-reverse;*/
.flex-container.row { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
}
.flex-container.row-reverse { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;
}
.flex-container.column { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
.flex-container.column-reverse { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column-reverse;
}
/*flex-wrap: nowrap | wrap | wrap-reverse;*/
.flex-container.nowrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}
.flex-container.wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.flex-container.wrap-reverse { -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
}
/*align-items: flex-start | flex-end | center | baseline | stretch;*/
.flex-container.align-items-start { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
}
.flex-container.align-items-end { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
}
.flex-container.align-items-center { -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.flex-container.align-items-baseline { webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline;
}
.flex-container.align-items-stretch { webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;
}
/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
.flex-container.justify-start { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
}
.flex-container.justify-end { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;
}
.flex-container.justify-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
}
.flex-container.justify-space-between { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
}
.flex-container.justify-space-around { -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around;
}
/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
.flex-container.align-content-start { -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
}
.flex-container.align-content-end { -webkit-align-content: flex-end; -ms-flex-line-pack: end; align-content: flex-end;
}
.flex-container.align-content-center { -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
}
.flex-container.align-content-space-between { -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between;
}
.flex-container.align-content-space-around { -webkit-align-content: space-around; -ms-flex-line-pack: justify; /*distribute;*/ align-content: space-around;
}
.flex-container.align-content-stretch { -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
}
/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/
.item.align-self-auto { -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
.item.align-self-start { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
}
.item.align-self-end { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end;
}
.item.align-self-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center;
}
.item.align-self-baseline { -webkit-align-self: baseline; -ms-flex-item-align: baseline; align-self: baseline;
}
.item.align-self-stretch { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch;
}
.item.flex-grow1 { flex-grow: 1;
}
.item.flex-grow2 { flex-grow: 2;
}
.item.flex-grow3 { flex-grow: 3;
}
.item.flex-grow4 { flex-grow: 4;
}
html,body{ width:100%; min-height:100%; margin:0; padding:0; color:#ddd; font-size:14px; font-family:Verdana, Geneva, sans-serif;background-color:#333;}
*{ box-sizing : border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.principal{ width:calc(50% - 40px); min-width:525px; margin:0 20px 20px 20px; float:left;}
.radio{ margin-bottom:20px;}
label{ line-height:200%;}
input[type=radio] { color:white; }
input[type=radio]:checked + label { color:orange; }
input[type=number]{ width:40px; margin-right:.5em;}
h1{ font-size:200%;margin:20px;}
h2{ font-size:180%;margin:0px;}
h4 a{ font-variant:small-caps; font-size:120%; color:#ddd; text-decoration:none;}
h4 small{font-variant: normal; font-size:80%; font-weight:normal; color:#57bcdb;}
table{ width:100%; margin-bottom:1em;}
table td{ width:50%; padding:3px;}
.principal:last-of-type h4 small{ color:#ff8080;}
.flex-container { border: 1px solid #555; display : -webkit-flex; display : -ms-flexbox; display : flex; padding:20px; width:100%; }
.item{ margin:0; display : inherit; padding:10px; width:100px; height:100px; -webkit-align-items: center; -ms-flex-align:center; align-items: center; }
.item p{width:100%; text-align:center; color:#fff;}
#direction .item{flex-wrap:wrap;}
/*#wrap .item{ height:auto;}*/
#wrap{ width:400px;}
#align .item{height:auto; height:auto;flex-wrap:wrap;}
#align{ height:300px;}
#justify{ margin:20px 0; padding:20px 0;}
#alignContent{flex-wrap:wrap; height:600px;}
#alignContent .item{ height:auto;}
#FCI1{ height:300px;}
#FCI1 .item{ height:auto;}
#FCI3 .item{ width:25%;}
#FCI4 .item{ width:50%;}
#FCI5 .item{ width:20%;}
.nbsp{white-space: nowrap;}
@media only screen and (max-width:1100px){.principal{ width:calc(100% - 40px);}}
@media only screen and (max-width:580px) {
.item{ width:50px;height:50px;}
.principal{ width:calc(100% - 40px); min-width:initial;}
.flex-container{width:100%; min-width:initial;}
#wrap{ width:200px;}
}
Flexbox playground - Script Codes JS Codes
function changeFlex(e, t) { for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() { var e = this.value; l.setAttribute("class", "flex-container " + e) }, !1)
}
function changeItemFlex(e, t) { for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() { var e = this.value; l.setAttribute("class", "item " + e) }, !1)
}
function changeFlexBasis(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("B: " + n), document.querySelector("#" + t).style.WebkitFlexBasis = n + "%", document.querySelector("#" + t).style.flexBasis = n + "%"
}
function changeFlexGrow(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("G: " + n), document.querySelector("#" + t).style.WebkitFlexGrow = n, document.querySelector("#" + t).style.flexGrow = n
}
function changeFlexShrink(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("S: " + n), document.querySelector("#" + t).style.WebkitFlexShrink = n, document.querySelector("#" + t).style.flexShrink = n
}
function changeFlexOrder(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("O: " + n), document.querySelector("#" + t).style.WebkitOrder = n, document.querySelector("#" + t).style.order = n
}
function changeAll(e, t, n, l) { changeFlexBasis(e, l), changeFlexGrow(t, l), changeFlexShrink(n, l)
}
for (var items = document.querySelectorAll(".item"), i = 0; i < items.length; i++) if (items[i].hasAttribute("data-color")) { var color = items[i].getAttribute("data-color"); items[i].style.backgroundColor = "#" + color }
for (var flexO = document.querySelectorAll(".flex-order"), o = 0; o < flexO.length; o++) flexO[o].addEventListener("change", function() { changeFlexOrder(this, "order" + this.id)
}, !1);
changeFlex("flex-direction", "direction"), changeFlex("flex-wrap", "wrap"), changeFlex("flex-align-items", "align"), changeFlex("justify-content", "justify"), changeFlex("align-content", "alignContent"), changeItemFlex("align-self", "alignSelf");
for (var flexGrow = document.querySelectorAll(".flex-grow"), i = 0; i < flexGrow.length; i++) flexGrow[i].addEventListener("change", function() { var e = "item" + this.id; changeFlexGrow(this, e)
});
for (var flexShrink = document.querySelectorAll(".flex-shrink"), j = 0; j < flexShrink.length; j++) flexShrink[j].addEventListener("change", function() { var e = "item" + this.id; changeFlexShrink(this, e)
});
var B1 = document.querySelector("#B1"), G1 = document.querySelector("#G1"), S1 = document.querySelector("#S1"), B2 = document.querySelector("#B2"), G2 = document.querySelector("#G2"), S2 = document.querySelector("#S2");
B1.addEventListener("change", function() { changeAll(B1, G1, S1, "item1")
}), G1.addEventListener("change", function() { changeAll(B1, G1, S1, "item1")
}), S1.addEventListener("change", function() { changeAll(B1, G1, S1, "item1")
}), B2.addEventListener("change", function() { changeAll(B2, G2, S2, "item2")
}), G2.addEventListener("change", function() { changeAll(B2, G2, S2, "item2")
}), S2.addEventListener("change", function() { changeAll(B2, G2, S2, "item2")
});
Developer | Gabi |
Username | enxaneta |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 5,418 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Broken English | 4,877 Kb |
Fat worm | 2,695 Kb |
Animated chart | 3,982 Kb |
Wave | 2,437 Kb |
Holy Cow Mandala | 2,764 Kb |
Cube | 3,814 Kb |
Rift | 2,213 Kb |
Squiggly lines | 4,753 Kb |
Circle decay | 2,638 Kb |
Sine wave ice cream | 2,127 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
SVG Playground | Roygwells | 1,834 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Cake | Kennyname | 7,220 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
See Through | Larrygeams | 77,410 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!