CodePen Embed - Color this sofa! – SVG + Blend Mode trick

Live

Live

Live

This Pen is owned by caer on CodePen. It is a fork of this Pen.

See more by @misdoubt on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"ZEKeEQP\",\"auto_save\":true},\"hashid\":\"ZEKeEQP\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"css\",\"svg\",\"color\",\"ui\",\"app\"],\"id\":53763034,\"user_id\":6508449,\"html\":\"<span class=\\\"minorbrag\\\">Top 100 Pens of 2019 (6<sup>th</sup> Place)</span>\\n<div class=\\\"couch\\\">\\n  <svg id=\\\"js-couch\\\" class=\\\"couch__overlay\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" preserveAspectRatio=\\\"none\\\" width=\\\"1000\\\" height=\\\"394\\\">\\n  <defs>\\n    <path d=\\\"M996.35 77.55q-1.85-1.95-8.65-3.75l-62.4-17.1q-9.3-2.75-12.15-2.5-1.8.15-2.85.45l-.75.3q2.25-16.3 3.75-22.05 1.15-4.4 1.4-10.8.2-6.6-.7-10.85-1.25-5.65-3.1-7.8-2.95-3.35-9.65-2.7-5.95.6-39.3 1.7-38.3 1.25-39.45 1.3-10.25.5-126.75.5-5.05 0-54.2 1.3-45.8 1.25-54.05.95-19.45-.45-30.4-.7-20.2-.55-23.1-1.3-22.3-5.85-26.5 1.25-2.65 4.55-3.85 7.9-.6 1.7-.7 2.5-.65-2.2-2.05-4.55-2.75-4.65-6.45-5.2-3.85-.55-13.65-.4-7.4.1-12 .4-.4.05-18.7.9-16.55.8-19.15 1.1-3.4.4-14.6 1.1-11.3.75-13.05.65h-9.8q-8.65-.05-11.45-.4-2.85-.35-9.25-.6-6.7-.15-8.5-.25-2.7-.1-27.75-.1-25.1 0-29.6.1-92.35 1.15-99 1.65-5.15.4-20 0-15.3-.4-24.4-1.25-6.75-.6-21-1.55-12.95-.9-14.85-1.1-6.45-1.05-11.05-1.5-8.7-.85-12.85.5-5.45 1.75-8.1 4.65-3.2 3.4-2.9 8.6.25 4.65 2.1 11.8 1 3.8 2.55 9.1 1 3.85 2.35 10.1-.1 1-1.5 1-1.75 0-7.7.85-7.1 1-9.8 2.05-2.4.9-23 4.75-21.2 3.9-22.05 4.15-8.2 1.85-15.05 3.35Q7.4 69.1 5.65 70.3 2.5 72.45 2 73.1.6 75 .75 79.2q.15 4.15 1.3 12.75.9 6.85 1.45 10 .5 2.75 8.55 54 6.65 42.15 7.35 46.85 1.15 7.65 4.9 28.55 4.55 25.2 6.35 31.2 2.45 8.15 3.8 11.75 1.85 4.9 3.2 5.75 1.25.8 6.85.65 2.75-.05 5.3-.25l23.85.35q.1 0 1 .95t2 .95q1.9 0 3.4-1.4l23.1-.25 43.65.4q135.05 2.15 137.9 1.9 1.25-.1 72.9.5 72.45.65 76.85.45 8.1-.35 64 .4 143.35.95 146 1.1.55.05 75.3.3 74.7.3 79.8.6 8.65.5 68.25-.35l51.75.5 1.6.4q1.95.35 3.8.05 1.45-.25 3.5-.2 1.9 0 3.35-.3 2.1-.45 8.25-.8 6.25-.3 8.75-.05 1.7.2 8 1 5.75.3 7.4-1.75 1.75-2.2 4.95-10.85 2.8-7.55 4.05-12.4.65-2.5 3.6-17.2 2.75-13.75 3.15-14.8.45-1.25 4.45-22.85 4.05-22.4 4.4-24.4.3-1.45 3.75-25.2 3.35-23.2 4-26.3 1.15-5.5 2.35-18.8 1.4-15.7.8-23.7-.6-8.35-3.35-11.15z\\\" id=\\\"a\\\" />\\n  </defs>\\n  <use xlink:href=\\\"#a\\\"/>\\n</svg>\\n\\n  <img class=\\\"couch__img\\\" src=\\\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/couch-8_xrckc2.png\\\" alt=\\\"\\\">\\n</div>\\n\\n<div class=\\\"colours\\\">\\n  <div class=\\\"colours__labels\\\">\\n    <span>Sofa</span>\\n    <span>Gradient</span>\\n    <span></span>\\n\\n  </div>\\n  <div class=\\\"colours__inputs\\\">\\n    <input id=\\\"js-color-1\\\" class=\\\"jscolor {onFineChange:'updateCouch(this)'}\\\" value=\\\"FCFF4D\\\">\\n    <input id=\\\"js-color-2\\\" class=\\\"jscolor {onFineChange:'updateBackgroundD(this)'}\\\" value=\\\"24243e\\\">\\n    <input id=\\\"js-color-3\\\" class=\\\"jscolor {onFineChange:'updateBackgroundL(this)'}\\\" value=\\\"302b63\\\">\\n    <button class=\\\"gen-random\\\" onclick=\\\"generateRandom()\\\">Generate random</button>\\n  </div>\\n</div>\",\"css\":\"body,\\nhtml {\\n  height: 100%;\\n  display: flex;\\n  margin: 0;\\n  padding: 0;\\n  box-sizing: border-box;\\n  justify-content: center;\\n  align-items: center;\\n  font-family: arial;\\n  font-size: 12px;\\n}\\n\\nbody {\\n  background: linear-gradient(to right, #24243e, #302b63, #24243e);\\n  &.fade {\\n   \\n    transition: 0.6s ease-in-out;\\n  \\n  }\\n}\\n.colours {\\n  position: absolute;\\n  bottom: 1em;\\n  display: flex;\\n  flex-direction: column;\\n  &__labels {\\n    display: flex;\\n    margin-bottom: 0.5em;\\n    span {\\n      display: block;\\n      flex: 2;\\n      text-align: center;\\n      text-transform: uppercase;\\n      letter-spacing: 2px;\\n      font-size: 0.9em;\\n      color: white;\\n      text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);\\n    }\\n    span:first-child {\\n      flex: 1;\\n    }\\n  }\\n  &__inputs {\\n    display: flex;\\n  }\\n  .jscolor {\\n    display: block;\\n    border: 0;\\n    height: 40px;\\n    width: 60px;\\n    margin: 0;\\n    text-align: center;\\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);\\n    cursor: pointer;\\n\\n    &:first-child {\\n      border-radius: 6px 0 0 6px;\\n    }\\n    &:last-child {\\n      \\n    }\\n  }\\n}\\n\\n.couch {\\n  width: 1000px;\\n  height: 394px;\\n  transform: scale(0.66);\\n  position: relative;\\n  transition: 0.25s ease-in-out;\\n  &__overlay,\\n  &__img {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n  }\\n  \\n\\n  &__overlay {\\n    z-index: 2;\\n    fill: #fcff4d;\\n    mix-blend-mode: multiply;\\n  }\\n  &__overlay.fade {\\n   \\n    transition: 0.6s ease-in-out;\\n  \\n  }\\n}\\n\\n.gen-random {\\n  background: #222;\\n  border: 0;\\n  color: white;\\n  border-radius: 0 6px 6px 0;\\n  border-left: 1px solid white;\\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);\\n}\\n\\n@media (max-width: 940px) {\\n  .couch {\\n    transform: scale(0.5);\\n  }\\n}\\n\\n@media (max-width: 580px) {\\n  .couch {\\n    transform: scale(0.38);\\n  }\\n}\\n\\n@media (max-width: 460px) {\\n  .couch {\\n    transform: scale(0.4);\\n  }\\n}\\n\\n.minorbrag {\\n  color: white;\\n  position: absolute;\\n  top: 2rem;\\n  right: 2rem;\\n  font-size: 1.25rem;\\n  display: inline-block;\\n}\",\"js\":\"var background = [\\\"#24243e\\\", \\\"#302b63\\\"];\\nconst body = document.getElementsByTagName(\\\"body\\\")[0];\\nconst couch = document.getElementById(\\\"js-couch\\\");\\nconst col1 = document.getElementById(\\\"js-color-1\\\");\\nconst col2 = document.getElementById(\\\"js-color-2\\\");\\nconst col3 = document.getElementById(\\\"js-color-3\\\");\\n\\nfunction updateCouch(picker, string) {\\n  if (!string) {\\n  couch.style.fill = picker.toHEXString();\\n    } else {\\n      // Used when generating random\\n      couch.style.fill = string;\\n     setTimeout(function(){couch.classList.remove(\\\"fade\\\");}, 700); \\n    }\\n}\\n\\nfunction updateBackgroundD(picker, randArray) {\\n if (!randArray) {\\n  background[0] = picker.toHEXString();\\n  } else {\\n    background[0] = randArray[0];\\n  }\\n  body.style.background =\\n    \\\"linear-gradient(to right, \\\" +\\n    background[0] +\\n    \\\" , \\\" +\\n    background[1] +\\n    \\\" , \\\" +\\n    background[0] +\\n    \\\")\\\";\\n}\\n\\nfunction updateBackgroundL(picker, randArray) {\\n if (!randArray) {\\n  background[1] = picker.toHEXString();\\n  } else {\\n    background[1] = randArray[1];\\n  }\\n  \\n  body.style.background =\\n    \\\"linear-gradient(to right, \\\" +\\n    background[0] +\\n    \\\" , \\\" +\\n    background[1] +\\n    \\\" , \\\" +\\n    background[0] +\\n    \\\")\\\";\\n}\\n\\n\\n// Generate random\\n\\n\\n\\nfunction generateRandom() {\\n// Couch  \\nvar red = Math.floor(Math.random() * 256) ;\\nvar green = Math.floor(Math.random() * 256) ;\\nvar blue = Math.floor(Math.random() * 256) ;\\n// Grad 1\\nvar grad_1_r = Math.floor(Math.random() * 256) ;\\nvar grad_1_g = Math.floor(Math.random() * 256) ;\\nvar grad_1_b = Math.floor(Math.random() * 256) ;\\n// Grad 2  \\nvar grad_2_r = grad_1_r >= 206 ? grad_1_r : grad_1_r + 50;\\nvar grad_2_g = grad_1_g >= 206 ? grad_1_g : grad_1_g + 50;\\nvar grad_2_b = grad_1_b >= 206 ? grad_1_b : grad_1_b + 50;\\n  \\nlet hex = rgbToHex(red, green, blue);\\nlet grad_1_hex = rgbToHex(grad_1_r, grad_1_g, grad_1_b);\\nlet grad_2_hex = rgbToHex(grad_2_r, grad_2_g, grad_2_b);\\n  \\nlet gradient = [grad_1_hex, grad_2_hex];\\n  \\n  updateCouch(null, hex);\\n  updateBackgroundD(null, gradient);\\n  updateBackgroundL(null, gradient);\\n  \\n    couch.classList.add(\\\"fade\\\");\\n  \\n document.getElementById('js-color-1')\\n    .jscolor.fromString(hex);\\n  \\n document.getElementById('js-color-2')\\n    .jscolor.fromString(grad_1_hex);\\n  \\n   document.getElementById('js-color-3')\\n    .jscolor.fromString(grad_2_hex);\\n}\\n\\nfunction componentToHex(c) {\\n    var hex = c.toString(16);\\n    return hex.length == 1 ? \\\"0\\\" + hex : hex;\\n}\\n\\nfunction rgbToHex(r, g, b) {\\n    return \\\"#\\\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\\n}\\n\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2021-07-14T20:23:58.000Z\",\"updated_at\":\"2021-07-14T20:23:58.000Z\",\"title\":\"Color this sofa! – SVG + Blend Mode trick\",\"description\":\"A simple spell, but quite effective.\\n\\nWhat you want is a PNG of an object,\\n\\nYou want to save it as a specific size (1000px for instance)\\n\\nYou then want to draw an SVG vector around the section you want to color change. This section on the PNG should be photoshopped white.\\n\\n#YOU WANT TO KEEP THE BLANK SPACE#\\n\\nNotice my SVG has blank space where the feet are.\\n\\nYou want to stack these in CSS, and set the blend mode of the SVG to multiply, then simply change out the fill colour.\",\"slug_hash\":\"ZEKeEQP\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"15846ac56103871a9b6d19cdcb46335b\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":39568488,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3NTU1NjQwMX0.0VAk9dL--VN9GqlB_u1ontWmZ53eLnLjGB2dLwZvfRA","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}