Rompe Cabeza Arequipa

Open In Editor Video Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Rompecabeza Arequipa</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
<svg class="puzzle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 200">
  <rect class="box" width="125" height="100" opacity="0.5" style="mix-blend-mode:overlay" />
  <use class="endImg" href="#imgSrc" opacity="0" />
  <g class="pieces"></g>
  <path d="M24.72 24.61h-9.15c-.61-.04-1.55-.81-1.12-1.46 3.17-2.97 2.37-6.77-2.14-7.11-4.12.09-5.42 4.23-2.27 6.86.65.79-.31 1.8-1.19 1.72-2.95-.03-5.9-.01-8.85-.01V.01h24.75c.04 2.93-.02 5.86-.03 8.79-.01 1.09 1.33 2.39 2.29 1.55 1.62-1.99 4.85-2.65 6 .18 1.79 4.38-2.7 7.76-6.03 3.82-1.23-.86-2.41.89-2.27 2.05.05 2.75 0 5.46.01 8.22Z" />
  <path d="M25.07 24.7c-.05-2.99 0-5.99-.03-8.98.11-.61.71-1.35 1.36-1.24 1.48.66 2.57 2.44 4.41 1.95 1.84-.43 3.12-2.47 2.96-4.31-.37-3.95-4.33-5.14-6.9-2.03-.89.66-1.89-.5-1.84-1.43.04-2.87.01-5.75.02-8.62C33.13.03 41.16.06 49.22.02c.46 0 .49.04.49.49 0 2.78-.02 5.56.01 8.34-1.03 4.44-3.83-3.48-7.49.56-2.47 2.4-.63 7.73 3.06 7 1.35-.13 2.55-2.66 3.87-1.67 1.23 1.33.25 7.46.56 9.69 0 .26-.1.32-.33.32-2.82-.02-5.63-.04-8.45-.04-1.02.02-2.45 1.36-1.47 2.32 1.12 1.15 2.33 2.92 1.38 4.53-3.3 4.53-10.43-.26-5.47-4.54 1.01-1.2-.63-2.38-1.8-2.33-2.84.04-5.66.01-8.51.02Z" />
  <path d="M62.45.01h11.51c.88 0 .87 0 .87.88-.41 1.77 1.28 10.4-1.76 9.24-3.26-3.66-7.59-1.38-6.86 3.24.66 3.32 4.26 4.04 6.39 1.51.83-.89 2.2-.2 2.23 1 .02 2.85-.04 5.71.02 8.55.02.27-.1.3-.3.29-2.85-.11-5.7-.02-8.55-.06-1.08-.04-2.34 1.21-1.6 2.22 2.85 2.34 2.09 6.27-1.83 6.44-3.56.18-5.31-3.59-2.43-6.03 1.12-1.08.27-2.39-1.12-2.61-2.87-.01-5.75 0-8.63.02-.23 0-.33-.07-.32-.3.09-2.85.03-5.7.04-8.55-.02-.97-1.24-2.31-2.21-1.54-2.93 3.39-7.16 1.5-6.35-2.93.71-3.46 4.23-3.48 6.3-1.04 3.6 1.96 1.87-8.23 2.24-10.1 0-.2.07-.25.27-.25l12.08.02Z" />
  <path d="M75.19.01h24.79v8.75c0 .97 1.2 2.39 2.19 1.65 3.48-4.15 8.2-.34 5.97 4.08-1.43 2.6-4.07 1.7-5.94-.18-3.54-1.78-1.85 8.38-2.22 10.29h-9.15c-.59 0-.87-.47-1.12-.89-.09-1.45 2.38-2.41 2.03-4.23-1.6-7.03-12.56-2.14-6.26 3.73.37.75-.7 1.45-1.44 1.42-2.95-.04-5.89-.01-8.85-.02v-8.63c0-.75-.73-1.71-1.47-1.86-1.25.09-2.08 1.48-3.27 1.87-7.15.89-3.68-12.07 2.37-5.68 1.17.94 2.43-.65 2.38-1.84-.04-2.82-.01-5.64-.02-8.47Z" />
  <path d="M100.31 24.61v-8.06c-.26-1.07.53-2.41 1.7-1.98.75.43 1.38 1.14 2.15 1.57 2.78 1.43 5.38-1.96 4.83-4.6-.55-3.37-4.45-4.41-6.56-1.65-.85.85-2.11-.02-2.15-1.13.01-2.93.04-5.8.04-8.73h24.72v24.59h-9.08c-.93-.04-1.61-1.22-.82-1.88 3.08-2.46 1.51-6.52-2.15-6.69-4.43-.02-5.73 4.1-2.45 7.06.5.74-.53 1.55-1.28 1.52-2.98-.03-5.96-.01-8.94-.01Z" />
  <path d="M24.77 49.67c-3.04.05-6.07 0-9.12.02-.43 0-1.3-.66-1.28-1.07.62-1.8 3.06-3.21 1.71-5.38-3.12-5.28-11.47-.06-6.07 4.68.6.72-.11 1.76-.98 1.77H0V25.02c3.01.02 5.99-.03 8.99 0 1.16-.09 2.07-1.47 1.2-2.38-3.42-3.07-.85-7.13 3.4-6.05 2.6.44 3.28 3.97 1.29 5.56-3.9 4.25 7.29 2.51 9.24 2.84.32 0 .71-.04.66.4l-.03 8.31c0 .79-.65 1.64-1.32 1.63-1.46-.6-2.45-2.45-4.31-2-6.38 1.87-1.96 12.35 3.95 6.24 2.87-1.02 1.29 8.29 1.7 10.11Z" />
  <path d="M25.05 49.67v-8.81c-.03-.74-1.1-2.11-1.92-1.68-.98.6-1.76 1.46-2.86 1.87-2.32.63-4.25-1.9-3.94-4.07.36-3.67 4.08-4.42 6.32-1.69 1.14.95 2.46-.52 2.42-1.73-.04-2.82-.01-5.63-.02-8.45 3.02.07 6.04-.01 9.06 0 .88 0 1.64 1.13.95 1.8-5.09 4.42 2.38 9.62 5.93 4.94 3.06-5.27-9.56-7.11 7.9-6.71.81 0 .81-.02.81.81.53 18.85-2.31 2.45-7.82 8.88-2.28 2.74.69 8.27 4.22 6.23 1.07-.85 3.19-2.85 3.6-.3v8.89c-2.75.04-5.5.04-8.25 0-1.27-.06-3.08 1.36-1.89 2.55 2.98 2.44 1.46 6.53-2.43 6.21-3.79-.26-4.48-3.93-1.8-6.25 1.05-1.03-.46-2.47-1.59-2.5-2.9 0-5.79.04-8.69 0Z" />
  <path d="M74.83 49.68h-8.92c-.76 0-1.74 1-1.7 1.76.49 1.5 2.39 2.4 1.97 4.23-.25 1.66-1.93 2.74-3.55 2.76-3.63.22-5.3-3.57-2.51-5.98 1.25-1.16-.05-2.81-1.53-2.78-2.75.04-5.49.02-8.24.02-.16 0-.27 0-.26-.22.09-2.86.01-5.73.04-8.59-1.67-5.08-3.98 3.01-7.71-.75-2.54-2.6.21-8.29 3.84-6.04.94.58 1.99 2.26 3.14 1.16 1.54-1.55.38-7.44.71-9.9 0-.21.08-.25.27-.25 2.65.03 5.3.04 7.96.06.18 0 .36.03.53-.02 1.03-.26 1.96.98 1.18 1.84-1.84 1.77-2.52 4.23-.34 5.78 4.39 3.05 9.56-2.15 4.97-6.01-.59-.92.46-1.82 1.4-1.64l7.22.04c.48.12 1.55-.44 1.56.32.34 2.38-.97 8.83 1.02 9.94 1.73 1.23 3.96-4.8 7.24-.04 1.91 3.25-1.76 7.78-4.95 4.79-.61-.36-1.44-1.5-2.18-.89-.46.5-1.19.94-1.14 1.71-.03 2.9.07 5.81 0 8.7Z" />
  <path d="M99.96 49.68h-8.71c-.71 0-1.74.8-1.91 1.5-.08 1.01 1.07 1.58 1.52 2.39 3.27 7.42-12.22 5.82-5.19-1.63.8-1.09-.93-2.35-2-2.27-2.83.04-5.65.01-8.49.02v-8.92c.07-.89 1.23-1.75 1.99-1.04 2.37 2.66 5.71 2.19 6.67-1.37.73-4.53-3.75-6.88-6.86-3.22-2.98 1.67-1.45-8.5-1.8-10.15h9.19c.78-.12 1.96-1.19 1.36-2.01-2.04-1.89-2.88-5.31.41-6.33 4.04-1.37 7.23 2.91 3.67 5.91-1.19 1.01.09 2.46 1.33 2.46 2.95-.03 5.88-.03 8.83-.04v8.96c-.06.81-1.02 1.88-1.87 1.12-1.51-1.67-4.07-2.7-5.75-.59-3.4 4.26 1.83 9.85 5.75 5.23.73-.63 1.83.16 1.86 1 0 3 .04 5.99-.01 8.99Z" />
  <path d="M125.03 49.68h-8.96c-.85.01-1.64-.98-1.07-1.73 3.67-3.07 1.2-7.65-3.32-6.76-3.84 1.07-3.71 4.4-1.17 6.87.62.83-.66 1.69-1.48 1.64-2.92-.04-5.83-.01-8.75-.01-.04-2.94 0-5.88.04-8.82.01-.69-.93-1.67-1.42-1.76-.84 0-1.5.81-2.13 1.29-2.68 2.29-5.85-1.09-5.02-3.94.41-3.09 4.08-3.72 5.91-1.4 1.06 1.26 2.71.04 2.65-1.39-.04-2.89-.03-5.77-.04-8.66 3.05-.08 6.08 0 9.13-.03.84-.09 2.03-1.2 1.4-2.05-1.99-1.81-2.8-5.13.33-6.25 3.9-1.55 7.47 2.86 3.84 5.79-1.19 1.01-.1 2.47 1.2 2.53 2.96-.05 5.9.05 8.86-.06v24.73Z" />
  <path d="M0 74.79V50.11h8.92c2.58-.85 1.62-2.21.26-3.72-1.47-1.69-.15-4.45 1.93-4.82 2.1-.43 4.86.36 4.95 2.88.5 2.18-3.78 3.73-1.02 5.42 2.95.62 6.19.06 9.23.24.53 0 .55.01.49.56-.08 2.79 0 5.59-.02 8.38.04 1.03 1.28 2.23 2.23 1.46 1.56-1.72 4.14-2.69 5.68-.51 2.21 2.84-.77 8.22-4.27 5.6-1.64-1.74-3.37-1.94-3.67.83.09 2.71-.06 5.42.07 8.13.02.22-.07.29-.28.29-1.53-.36-12.27 1.24-9.75-2.01 4.82-4.01-1.99-9.2-5.64-5.29a2.98 2.98 0 0 0-.17 4.11c1.11 1.19 2.29 2.84-.2 3.18-2.91-.03-5.82.02-8.73-.03Z" />
  <path d="M49.84 74.8h-8.96c-.87.13-2.3 1.34-1.5 2.25 3.4 2.88 1.49 7.13-2.88 6.4-3.47-.62-3.5-4.2-1.13-6.25 1.01-1.04-.56-2.45-1.66-2.43-2.88.03-5.75.02-8.63.03-.05-3 0-6-.02-9 .05-.84 1.1-1.63 1.85-1.01 2.81 3.23 6.87 1.64 6.87-2.54-.35-4.04-4.37-5.15-6.95-2.02-.67.56-1.57-.37-1.76-1 .01-3.05-.03-6.1.01-9.14 2.86 0 5.72.04 8.58-.03.88-.02 2.18.89 1.53 1.77-1.65 1.77-2.88 4.12-.64 5.89 4.56 3.38 9.78-2.03 5.01-6.06-.44-.86.87-1.64 1.69-1.59 2.87.04 5.73 0 8.6 0v9.13c.05 1.11 1.48 2.03 2.32 1.14 3.12-3.97 7.68.02 5.84 3.96-.68 1.67-2.88 2.59-4.4 1.41-.72-.51-1.33-1.22-2.17-1.52-.88-.11-1.6.89-1.59 1.73.02 2.95 0 5.9.01 8.85Z" />
  <path d="M50.12 74.79v-9.05c0-.79 1.01-1.47 1.62-1.07 1.2.74 2.15 2.17 3.72 1.9 2.34-.34 3.71-2.82 3.15-5.09-.88-3.51-4.37-4.05-6.61-1.37-.83.81-1.93-.21-1.89-1.18.03-2.94.01-5.89.01-8.83h8.93c.96.05 1.72 1.24.98 2-2.49 2.39-2.31 5.48 1.21 6.54 4.37 1.09 7.27-3.67 3.46-6.72-1.79-3.08 8.13-1.43 9.76-1.84.27 0 .39.03.39.36-.02 2.77-.02 5.54 0 8.31.04.88-.85 2.08-1.75 1.53-3.01-3.39-7.18-1.86-6.93 2.71.09 2.38 2.82 4.64 5.01 3.14 1.29-1.01 3.1-2.8 3.66-.09.01 2.83 0 5.66.02 8.49 0 .26-.09.31-.33.31l-8.59-.02c-.81 0-1.78 1-1.72 1.76.12.71.78 1.18 1.19 1.74 2.62 3.05-1.59 6.34-4.67 4.92-5.72-3.45 2.01-5.84-.71-7.89-2.11-1.27-7.19-.16-9.9-.54Z" />
  <path d="M99.98 50.1v8.88c0 .68.72 1.6 1.4 1.7 1.64-.02 2.44-2.36 4.25-1.96 6.35 1.57 1.94 11.58-3.59 5.65-1.12-.61-2.12.95-2.07 2 .04 2.82.01 5.62.01 8.44-2.93 0-5.85-.01-8.78.02-.83.02-1.77-.76-1.42-1.56.66-1.02 1.68-1.81 1.94-3.05.36-2.46-2.2-4.33-4.49-4.03-2.31.03-4.66 2.61-3.38 4.86.51.82 1.21 1.52 1.68 2.37.26.66-.82 1.38-1.4 1.39h-8.94v-8.67c0-.81-.73-1.77-1.52-1.94-1.26.18-2.01 1.61-3.25 1.94-7.25.63-3.41-12.01 2.36-5.75 3.77 2.27 2.05-8.41 2.41-10.3 2.89 0 5.76.03 8.65-.01.81-.04 2.01.7 1.65 1.54-.59.9-1.39 1.75-1.83 2.72-.93 2.54 2.11 4.83 4.55 4.38 3.77-.55 4.6-4.32 1.75-6.73-.89-.93.49-1.98 1.46-1.91 2.86.04 5.7.01 8.56.01Z" />
  <path d="M100.26 74.79c.11-2.75.06-5.48.03-8.22-.18-1.06.85-2.52 1.95-1.76 2.27 2.64 5.93 2.23 6.7-1.37.91-4.2-3.84-6.99-6.72-3.28-3.11 2-1.62-8.35-1.94-10.03 2.96-.08 5.93 0 8.9-.02.9 0 2.22-1.15 1.65-2.08-.6-.84-1.26-1.66-1.76-2.57a3.2 3.2 0 0 1 2.81-3.96c4.06-.7 6.28 3.4 2.97 6.15-1.14 1.1.4 2.48 1.62 2.46 2.86-.07 5.71.05 8.57-.06v24.7c-2.91.11-5.84 0-8.76.06-.89.03-1.97-.95-1.29-1.78 3.67-3.05 1.23-7.52-3.21-6.77-3.87.99-3.85 4.5-1.24 6.94.53.84-.71 1.65-1.52 1.62-2.92-.07-5.84.05-8.75-.04Z" />
  <path d="M.01 75.23c2.9 0 5.8-.02 8.7.02.71 0 1.78-.85 1.85-1.48-.01-.9-.86-1.59-1.37-2.28-1.93-2.37.75-5.36 3.41-4.9 3.93.05 4.39 4.15 1.7 6.39-.8.98.67 2.29 1.65 2.26 2.95.03 5.88-.08 8.83.02-.12 2.92 0 5.83-.02 8.74 0 .77-.78 1.59-1.48 1.45-.81-.26-1.38-1.05-2.08-1.5-2.34-1.58-5.15.83-5.16 3.36-.28 3.69 3.77 6 6.43 2.84 1.72-1.34 2.23.26 2.34 2.55.13 2.68-.1 7.3-.1 7.3H.01V75.23Z" />
  <path d="M25.05 75.23c2.93 0 5.81.03 8.7-.02.95 0 2.11.93 1.36 1.86-3.79 3.26-.78 7.72 3.54 6.66 2.34-.49 3.86-3.45 2.14-5.41-.34-.69-1.6-1.36-1.26-2.17.42-.59.88-.95 1.7-.94 2.67.05 5.35 0 8.03 0 .24 0 .46-.01.46.36-.34 2.04.79 9.11-.79 9.83-1.94.4-3.44-4.28-6.91-.54-3.03 4.43 1.97 9.52 5.97 4.99.84-.63 1.81.78 1.72 1.66-.02 2.8.02 8.5.02 8.5H25.05v-8.8c.01-1.04-1.18-2.39-2.22-1.65-2.87 3.15-6.66 1.82-6.5-2.37.46-3.75 3.97-4.44 6.44-1.6 1.12.84 2.36-.67 2.29-1.81-.04-2.84-.01-5.69-.01-8.53Z" />
  <path d="M50.12 75.23h8.01c1.06-.24 2.75.5 2.04 1.76-1.86 1.93-2.79 4.25-.46 5.99 3.96 3.04 9.55-2.07 5.22-5.65-1.03-.83-.02-2.14 1.07-2.12 2.95.04 5.9-.09 8.84.04 0 2.84.02 5.67 0 8.51-.02 1.12 1.17 2.66 2.28 1.85 5.41-6.1 9.83 4.93 3.14 5.76-1.27-.02-2.11-1.11-3.07-1.79-1.71-.86-2.45 1.08-2.39 3.31.14 5.14.07 7.11.07 7.11H50.12s.04-2.63-.03-6.81c0-3.62-1-4.94-3.48-2.62-2.82 2.43-5.97-1.14-5.03-4.02.78-3.46 4.24-3.4 6.3-.98 1.1.83 2.33-.64 2.26-1.79-.05-2.85-.01-5.71-.02-8.56Z" />
  <path d="M75.19 100s.03-5.63-.02-8.42c-.08-.93.67-2.22 1.68-1.84.61.38 1.16.83 1.71 1.29 2.82 2.14 5.91-1.37 5.36-4.21-.7-3.62-4.46-4.44-6.76-1.6-.96.82-2.08-.57-1.98-1.57.04-2.81.01-5.62.02-8.44 2.41-.4 14.44 1.7 9.45-3.5-2.71-3.28 2.05-6.59 5.09-4.68 4.69 3.41-1.89 5.67-.04 7.38 1.63 1.68 6.85.46 9.31.81.54.05 1.09-.25.97.53v8.24c0 .99 1.22 2.36 2.21 1.61 1.58-1.77 4.51-2.82 5.9-.26 2.09 2.93-1.24 8.1-4.67 5.14-2.42-2.3-3.49-.87-3.46 1.56.03 2.03.02 7.94.02 7.94H75.19Z" />
  <path d="M125.03 75.18V100h-24.77s.06-5.74.03-8.38c-.15-1 .79-2.5 1.88-1.76 1.87 1.85 4.34 2.71 6.08.28 1.61-2.22.66-5.88-2.06-6.61-1.56-.41-2.79.63-3.85 1.64-.98.92-2.16-.43-2.06-1.48.03-2.82 0-5.64-.01-8.46 2.96-.07 5.93.01 8.89 0 .89-.02 2.25-1.18 1.67-2.12-1.77-1.97-3.05-4.67-.04-6.2 4.06-1.77 7.94 2.48 4.13 5.74-1.3 1.16.33 2.63 1.65 2.59 2.82-.06 8.46-.06 8.46-.06Z" />

CSS

JS

paths.forEach((p, i) => {
  const piece = document.createElementNS("http://www.w3.org/2000/svg", "g");
  const shadow = p.cloneNode("true");
  pieces.append(piece);
  piece.append(shadow);
  piece.append(p);

gsap.set(piece, {
    transformOrigin: "50%",
    x: startPos[i].x,
    y: startPos[i].y,
    rotate: "random(-25,25)",
    attr: { class: "piece" }
  });
  gsap.set(shadow, { opacity: 0.35 });
  gsap.set(p, { attr: { fill: "url(#img)", filter: "url(#bevel)" } });
  let draggable = Draggable.create(piece, {
    onPress: () => {
      gsap
        .timeline({ defaults: { duration: 0.3 } })
        .to(
          piece,
          {
            scale: 1.1,
            rotate: "random(-5,5)",
            ease: "back.out(3)"
          },
          0
        )
        .to(
          shadow,
          { x: 1, y: 5, opacity: 0.15, scale: 0.9, ease: "back.out(1)" },
          0
        );
      pieces.append(piece);
    },
    onRelease: () => {
      gsap
        .timeline({ defaults: { duration: 0.2 } })
        .to(piece, { scale: 1, ease: "back.out(3)" }, 0)
        .to(shadow, { opacity: 0.35, x: 0, y: 0, scale: 1, ease: "power2" }, 0)
        .add(check);
      if (
        Math.abs(gsap.getProperty(piece, "x")) < 9 &&
        Math.abs(gsap.getProperty(piece, "y")) < 9
      ) {
        gsap.to(piece, { duration: 0.2, x: 0, y: 0, rotate: 0 });
      }
    }
  });
});

gsap.set(".endImg, .box, .pieces", { x: 82.5, y: 50 });
gsap.set("body", { background: "hsl(" + "random(0,360)" + ", 70%, 80%)" });
gsap.set("#imgSrc", {
  attr: {
    href: kittens[gsap.utils.random(0, kittens.length - 1, 1)] + "?q=50&w=2000"
  }
});

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS