JSFiddle - React, Tailwind, and code Playground

by DOK_UA

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Change color</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  </head>

  <body>


    <div id="background">


      <svg id="mix-color" width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb">

        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:gray;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:gray;stop-opacity:1" />
          </linearGradient>


        </defs>


        <path class="mix-colors" id="mix-1" d="m49.8 1.9482-2.4398 9.1049a29.719 29.719 0 0 0-1.5866-0.38428 29.719 29.719 0 0 1 16.244 9.6434l4.9207-4.2697 0.37697-3.9821c-5.0834-5.0834-10.571-8.2516-17.515-10.112z" style="fill:#fb9902" />
        <path class="mix-colors" id="mix-2" d="m67.315 12.06-6.7021 6.7021a29.719 29.719 0 0 1 7.6206 13.276l9.1938-2.4636c-1.8606-6.944-5.0289-12.431-10.112-17.515z" style="fill:#fd5308" />
        <path class="mix-colors" id="mix-3" d="m77.427 29.575-9.1938 2.4636a29.719 29.719 0 0 0-0.46335-1.4615 29.719 29.719 0 0 1 1.4786 9.1101 29.719 29.719 0 0 1-1.1562 8.0177 29.719 29.719 0 0 0 0.11996-0.37452l9.2148 2.4691c1.8606-6.944 1.8606-13.28 0-20.224z" style="fill:#fe2712" />
        <path class="mix-colors" id="mix-4" d="m68.212 47.331a29.719 29.719 0 0 1-7.605 13.276l6.7076 6.7076c5.0834-5.0834 8.2516-10.571 10.112-17.515z" style="fill:#a7194b" />
        <path id="mix-5" d="m61.411 59.728a29.719 29.719 0 0...

CSS

body{
  background-color:#505050;
}

#joystick,#mix-color,#color-while{
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

$( function() {
    $( "#joystick" ).draggable({
    revert: "invalid",
    revertDuration: 100
    });    
  } );