Some time ago, I received a demand to make a region full of random word clouds, and the word clouds should not overlap each other, the effect is shown as follows:

At the beginning, I planned to make the word cloud first, and then calculate the position of each one with JS, but it was too difficult and troublesome. On the one hand, I had to use JS to randomly generate the position of each cloud, and on the other hand, I had to consider that the generated position would not overlap. Then I changed my mind to think, can I use CSS instead of JS? Finally, I thought of using Flex to do the layout, and then using JS to randomly generate position offsets. In order to avoid overlap, I would give each word cloud the corresponding spacing.

Now let’s get started.

Implementation of a single word cloud

Before implementing a bunch of random word clouds, let’s look at how to implement a single word cloud.

First, write the elements:

<div class="word-cloud">
  Hello World
</div>
Copy the code

And then the CSS:

.word-cloud {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 96px;
  width: 200px;
  height: 100px;
  color: #01FFFC;
  box-shadow: 0 0 20px 7px #01FFFC inset;
}
Copy the code

The effect is as follows:

Codepen online demo

Word cloud implementation is not difficult, the focus is box-shadow, use inset, make the shadow inward, set the first two parameters to 0, can make the shadow spread around. For more information about box-shadow implementations, see:

CSS shadow techniques and details you don’t know

Word cloud layout

(For convenience, HERE I use VUE to implement, in fact, with native JS can also implement)

Go ahead and make a bunch of word clouds. Get the layout right first:

body {
    padding: 0 0;
    margin: 0 0;
    background-color: rgba(0.0.0.1);
}

#app {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30px;
  width: 100%;
  height: 800px;
}
Copy the code

Set the background color to black, and then create a Flex layout.

Define some random word cloud data:

  data() {
    return {
      cloudTexts: [
        'hello'.'world'.'monday'.'tuesday'.'sanday'.'foo'.'bar'.'cheers'.'cloud'.'text'.'taste'.'dog'.'rose'.'boy'.'girl'.'egg']}}Copy the code

Implement a method to generate a style for the word cloud:

    genStyles() {
     // Set the color
     const colors = [['#01FFFC'.'#01FFFC'], ['#01FF84'.'#01FF84'], ['#5843D7'.'#E2DDFF'], ['#FD374E'.'#FD374E']]
    const colorIndex = Math.floor(Math.random() * 4)
    // Set a random position
    const top = Math.floor((Math.random() * 140) - 70)
    const left = Math.floor((Math.random() * 160) - 80)
    
    // Give spacing to prevent folding
    const margin = `The ${Math.abs(top) + 4}px The ${Math.abs(left) + 4}px`
      
      return {
        position: 'relative',
        top,
        left,
        display: 'flex'.'justify-content': 'center'.'align-items': 'center'.'border-radius': '96px'.width: '150px'.height: '70px',
        margin,
        color: colors[colorIndex][1].'box-shadow': `0 0 20px 7px ${colors[colorIndex][0]} inset`}}Copy the code

After generating random numbers, subtract them so that the offset value can be positive or negative. Then, in order to prevent word clouds from overlapping each other, give each word cloud the same distance with the offset value to ensure that they do not overlap each other.

The final effect can be seen in the demo:

Codepen online demo