HTML, CSS and JavaScript playground - Liveweave

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
</style>

<div class="wrap2">

<div class="wrap">

<div class="shape shape3">

<p data-b></p>
  <p class="edge"></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge"></p>
  <p class="edge"></p>
  <p data-b></p>
  <p class="edge">n</p>
  <p>n</p>
  <p>G</p>
  <p class="edge">H</p>
  <p data-b></p>
  <p class="edge">V</p>
  <p>h</p>
  <p>n</p>
  <p class="edge">l</p>
  <p class="edge"></p>
  <p></p>
  <p></p>
  <p></p>
  <p class="edge"></p>
  <p></p>
  <p></p>
  <p></p>
  <p class="edge"></p>
  <p class="edge">h</p>
  <p>u</p>
  <p>j</p>
  <p>j</p>
  <p></p>
  <p>j</p>
  <p>h</p>
  <p>g</p>
  <p class="edge">E</p>
  <p data-b></p>
  <p class="edge"></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge">f</p>
  <p>I</p>
  <p>f</p>
  <p>j</p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge"></p>
  <p></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
</div>
</div>

<p class="hr1">Testing</p>
 
<p class="hr2">Testing</p>

</div>

:root {
  --bg-color: transparent;
}

.wrap2 {
  width: 400px;
  height: 400px;
  background: #000;
 
  margin: auto;

}

.wrap {
  width: 400px;
  height: 400px;
  background: #000;
  display: grid;
  margin: auto;
  align-content: center;
 
}

h1 {
  text-align: center;
}

.hr1  {
  color: purple;
  font-style: normal;
  font-family: roboto;
  font-size: 30px;
  margin-left: 80px;
  margin-top: -80px;

}

.hr2  {
  color: red;
  font-style: normal;
  font-family: roboto;
  font-size: 30px;
  margin-top: 40px;
  margin-left: 100px;
}

p {
  margin: 0;
  line-height: 1px;
  font-size: 28px;
  color: #ed1c24;
  font-family: "Roboto", sans-serif;
}

.shape {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--bg-color);
  color: white;
  margin: 1rem auto;
  gap: 4px;
  width: 302px;
  
}

/* set all blocks to red */
.shape > * {
  background-color: var(--base-color);
  aspect-ratio: 1 / 1;
  flex: 0 0 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-b] {
  background: var(--bg-color);
}

.shape2 > * {
  --base-color: rgb(34, 177, 76);
}

/*.shape2>*:not(:empty) {
  background: var(--highlight-color)
}*/

/* shape3 example*/
.shape3 > * {
  --base-color: blue;
}

.edge {
  background: green;
}