JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="background"></div>

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 283.5 283.5" class="memphis">
  <defs>
    <style>
      .b {
        fill: #ff4989;
      }

      .c {
        fill: #fef3ee;
      }

      .d {
        fill: #ff1761;
      }

      .e {
        fill: #ffbc25;
      }

      .f {
        fill: #ff5c24;
      }

      .g {
        fill: #66dafc;
      }

      .h {
        fill: #975333;
      }

      .i {
        fill: #1dd89f;
      }

    </style>
  </defs>
  <rect class="c" x="0" y="0" width="283.5" height="283.5" />
  <g>
    <path class="d" d="M107.4,36.7h0c0-1.6-1.3-2.8-2.8-2.8h-22.7c-1.6,0-2.8,1.3-2.8,2.8h0c0,1.6,1.3,2.8,2.8,2.8h22.7c1.6,0,2.8-1.3,2.8-2.8Z" />
    <path class="d" d="M148.4,123.7h0c1.1-1.1,1.1-2.9,0-4l-18.3-18.3c-1.1-1.1-2.9-1.1-4,0h0c-1.1,1.1-1.1,2.9,0,4l18.3,18.3c1.1,1.1,2.9,1.1,4,0Z" />
    <path class="d" d="M262.7,136.1l-20.7-9.3c-1.4-.6-3.1,0-3.8,1.4-.6,1.4,0,3.1,1.4,3.8l20.7,9.3c1.4,.6,3.1,0,3.7-1.4h0c.6-1.4,0-3.1-1.4-3.8Z" />
    <path class="d" d="M44.4,6c1.1,1.1,2.9,1.1,4,0L54.4,0h-8l-2,2c-1.1,1.1-1.1,2.9,0,4Z" />
    <path class="d" d="M17.3,91.3l32.1-10.9c1.5-.5,2.3-2.1,1.8-3.6h0c-.5-1.5-2.1-2.3-3.6-1.8l-32.1,10.9c-1.5,.5-2.3,2.1-1.8,3.6,.5,1.5,2.1,2.3,3.6,1.8Z" />
    <path class="d" d="M62.6,156.7h0c.4,1.5,2,2.4,3.5,2l26.2-7.3c1.5-.4,2.4-2,2-3.5h0c-.4-1.5-2-2.4-3.5-2l-26.2,7.3c-1.5,.4-2.4,2-2,3.5Z" />
    <path class="d" d="M35.6,190.4l-5.7,6.3c-1.1,1.2-1,3,.2,4,1.2,1.1,2.9,1,4-.2l5.7-6.3c1.1-1.2,1-2.9-.2-4-1.2-1.1-3-1-4,.2Z" />
    <path class="d" d="M224.8,65.6c1.6,0,2.8-1.3,2.8-2.8h0c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.3-2.8,2.8h0c0,1.6,1.3,2.8,2.8,2.8Z" />
    <path class="d" d="M272.5,176.6l-15.3,16.8c-1.1,1.2-1,3,.2,4,1.2,1.1,3,1,4-.2l15.3-16.8c1.1-1.2,1-3-.2-4-1.2-1.1-2.9-1-4,.2Z" />
    <path class="d" d="M64.4,269.4c-1.1-1.1-2.9-1.1-4,0l-14,14h8l10-10c1.1-1.1,1.1-2.9,0-4Z" />
    <path class="d"...

SCSS

$neulis_alt: (

  ("NeulisAlt-Thin", 'normal', 100),
  // ("NeulisAlt-Thin-Italic", 'italic', 100),

  ("NeulisAlt-Light", 'normal', 200),
  // ("NeulisAlt-Light-Italic", 'italic', 200),

  ("NeulisAlt-Regular", 'normal', 300),
  // ("NeulisAlt-Regular-Italic", 'italic', 300),

  ("NeulisAlt-Medium", 'normal', 400),
  // ("NeulisAlt-Medium-Italic", 'italic', 400),

  ("NeulisAlt-SemiBold", 'normal', 500),
  // ("NeulisAlt-SemiBold-Italic", 'italic', 500),

  ("NeulisAlt-Bold", 'normal', 600),
  // ("NeulisAlt-Bold-Italic", 'italic', 600),

  ("NeulisAlt-ExtraBold", 'normal', 700),
  // ("NeulisAlt-ExtraBold-Italic", 'italic', 700),

  ("NeulisAlt-Black", 'normal', 800)
  // ("NeulisAlt-Black-Italic", 'italic', 800)

);

@each $n in $neulis_alt {
  @font-face {
    font-family: 'NeulisAlt';
    src: url("https://thesweetpeople.com/wp-content/themes/thesweetpeople/dist/fonts/neulis-alt-fvm/#{nth($n,1)}.woff2") format('woff2'),
    url("https://thesweetpeople.com/wp-content/themes/thesweetpeople/dist/fonts/neulis-alt-fvm/#{nth($n,1)}.woff") format('woff');
    font-style: #{nth($n,2)};
    font-weight: #{nth($n,3)};
  }
}

BODY {
  font-family: 'NeulisAlt', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  font-style: normal;
  letter-spacing: -.015rem;
}

#background {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .memphis {
    display: block;
    float: left;

    PATH {
      transition: fill .5s ease;
    }
  }
}

.memphis {
  display: none;
}

NUM {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 75px;
  line-height: 100px;
  background: #fef3ee;
  aspect-ratio: 1 / 1;
  width: 100px;
  border-radius: 20px;
  text-align: center;
  font-weight: 800;
  
  &::before {
    content: attr(data-count);
  }
}

JavaScript

// memphis size
const background = $('#background');

// memphis size
const size = 500;

// source memphis svg
const source = $('.memphis');

// scale source memphis svg
$(source).attr({
  width: size,
  height: size
});

// background repeatfunction
const background_repeat = function() {

  // win object
  let data = {};

  // win dimensions
  data.width = $(window).width();
  data.height = $(window).height();

  // count on axis
  data.x = Math.ceil(data.width / size);
  data.y = Math.ceil(data.height / size);

  // count on axis
  data.count = data.x * data.y;
  
  // set background width for x pattern count
  $(background).empty().width(data.x * size);
  
  // for loop count time
  for (let i = 0; i < data.count; i++) {
  
    // clone source 
    $(source).clone().appendTo(background);
    
  }

}

// background repeat
background_repeat();

// on window resize
$(window).on('resize', function() {

  // re init background repeat
  background_repeat();

});

// our colours
let colours = [{
    'cls': 'b',
    'colour': '#ff4989'
  },
  {
    'cls': 'd',
    'colour': '#ff1761'
  },
  {
    'cls': 'e',
    'colour': '#ffbc25'
  },
  {
    'cls': 'f',
    'colour': '#ff5c24'
  },
  {
    'cls': 'g',
    'colour': '#66dafc'
  },
  {
    'cls': 'h',
    'colour': '#975333'
  },
  {
    'cls': 'i',
    'colour': '#1dd89f'
  }
];

// colour count
let colour_count = colours.length;

// count
let count = 0;

// recolour function
const recolour = function() {

  // all memphis svg
  let memphis = $('.memphis', document);

  // increment count
  count++;

  $('NUM').attr('data-count',count);

  // each colours in array
  $.each(colours, function(key, obj) {

    // new key (start from 1)
    let new_key = key + 1;

    // work out our next new key 
    let next_key = new_key + count;

    // if next key is greater than colour count  
    if (next_key > colour_count) {

      // update next key
      next_key = next_key - colour_count;

    }

    // if new key is the...