SVG 拼图解算器

下载代码

html

css

分享到微信朋友圈

html

<input id="upload" type="file" accept="image/png, image/jpeg, image/gif" />
<div id="upload-mask"><span>Drop an image to update the jigsaw</span></div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <defs>
    <pattern id="puzzle" height="100%" width="100%" patternUnits="userSpaceOnUse">
      <image id="image" width="1000" height="1000" preserveAspectRatio="xMidYMax slice" xlink:href="https://picsum.photos/800/800" />
    </pattern>
  </defs>
  <path d="M0 0h255.2c-62.1 167.8 46.4 45.1 28.7 120.7s-60.4-82.5-79.3 95.4c-160 49.8-39.9-45.6-111.5-32.8s74.2 60.6-93.1 69.5V0z" />
  <path d="M0 252.7c167.3-8.9 21.5-56.7 93.1-69.5S44.6 265.9 204.6 216c-12.7 208.1 67 34.6 72.7 125s-95.3-71.7-56.4 133.2c-181.1 12.3-22.4 61.7-99.7 76.7C43.9 566 172.5 460.7 0 517.2V252.7z" />
  <path d="M0 517.2c172.5-56.5 43.9 48.8 121.2 33.7s-81.3-64.4 99.7-76.7c23 211.1-66.4 38.5-67.9 130.6s93.4-77.5 63.7 132.7c-170.3 47.1-40.5-49.4-116.3-38.3-75.8 11.1 76.2 66.3-100.4 70.1V517.2z" />
  <path d="M0 769.3c176.6-3.8 24.6-59 100.4-70.1 75.9-11.1-53.9 85.4 116.3 38.3 7.5 214.2 72 28.8 86.7 120.7 14.7 91.9-104.5-64-44.6 141.8H0V769.3z" />
  <path d="M255.2 0h247.4c-40.2 187 56 40.6 48.7 123.3-7.3 82.7-76.5-78.2-69.5 113-219.8-44-46.7 66.3-143.7 59.2-97-7.1 90.3-91-133.6-79.5 18.9-177.9 61.6-19.7 79.3-95.4S193.1 167.8 255.2 0z" />
  <path d="M204.6 216c223.8-11.5 36.5 72.4 133.6 79.5s-76.1-103.1 143.7-59.2C460 437.7 545.3 273 546.7 360.9c1.4 87.9-89.1-73.9-60.7 126.6-213.3 15.9-36.4-68.2-129.2-72.9-92.8-4.7 74.8 96.7-135.8 59.6-39-204.9 62-42.8 56.3-133.2s-85.4 83.2-72.7-125z" />
  <path d="M220.9 474.2c210.7 37.1 43.1-64.3 135.8-59.6 92.8 4.7-84.2 88.8 129.2 72.9-39.3 191.7 57.7 41 51.1 125.7s-79-79.2-70 116.3c-201-18.6-35.5 63.8-123.1 66.6-87.6 2.8 72.3-90-127.1-58.6 29.7-210.2-65.2-40.5-63.7-132.7 1.4-92.2 90.8 80.4 67.8-130.6z" />
  <path d="M216.8 737.5c199.4-31.4 39.5 61.4 127.1 58.6S266 710.9 467 729.5c36.3 215.2-65.9 43.5-61.9 138.1 4 94.7 91.2-85.2 73.4 132.4H258.9c-60-205.8 59.3-49.9 44.6-141.8-14.8-91.9-79.3 93.5-86.7-120.7z" />
  <path d="M502.6 0h252.5c-1.2 202-67 29.1-78.4 116.1-11.4 87 96.7-63.2 45.9 132.4-193.8 14.3-33.1-62-117.3-66.3-84.3-4.3 68 87.9-123.4 54.1-7-191.1 62.2-30.3 69.5-113 7.2-82.7-89 63.7-48.8-123.3z" />
  <path d="M481.8 236.3c191.4 33.8 39.2-58.4 123.4-54.1 84.3 4.3-76.5 80.6 117.3 66.3-26 185 57.4 35.6 56.1 116.7-1.3 81.1-80-70.8-59.7 114.9-185.7 29.2-36.8-57.2-118.4-54.6-81.6 2.6 72.5 79.4-114.7 61.9-28.4-200.5 62.2-38.7 60.7-126.6s-86.5 76.9-64.7-124.5z" />
  <path d="M486 487.5c187.2 17.5 33.1-59.4 114.7-61.9 81.6-2.6-67.4 83.8 118.4 54.6 8.7 197.5-64.1 31.7-71 117.3-6.9 85.5 91.5-66.4 51.2 127.1C514 751.7 663.2 667.3 582 669s71.4 79.8-114.9 60.5c-9.1-195.5 63.3-31.6 70-116.3 6.5-84.7-90.5 66-51.1-125.7z" />
  <path d="M467.1 729.5c186.3 19.3 33.6-58.8 114.9-60.5 81.3-1.7-68 82.8 117.4 55.6-9.9 222.5 72.2 35.8 79.9 132.2s-103-74.9-57.8 143.2H478.6c17.8-217.6-69.4-37.7-73.4-132.4-4-94.6 98.1 77.1 61.9-138.1z" />
  <path d="M755.1 0H1000v225.3c-219.6 46.3-47.4-65.9-144.5-57.8-97.1 8.1 91.3 90.1-132.9 80.9C773.5 52.9 665.4 203 676.7 116c11.4-86.9 77.3 86 78.4-116z" />
  <path d="M722.6 248.5c224.2 9.2 35.8-72.8 132.9-80.9 97.1-8.1-75.1 104 144.5 57.8V499c-222.9-43.2-46.9 67.4-145.2 60.8-98.3-6.6 90.9-92.7-135.8-79.7-20.3-185.7 58.5-33.9 59.7-114.9 1.3-81.1-82.1 68.3-56.1-116.7z" />
  <path d="M719 480.2c226.7-13 37.4 73.1 135.8 79.7 98.3 6.6-77.7-104 145.2-60.8v246.5c-238.5-46.8-50.3 72-155.6 64.7-105.2-7.3 97.5-99-145.1-85.6 40.2-193.6-58.1-41.6-51.2-127.1 6.9-85.7 79.6 80.1 70.9-117.4z" />
  <path d="M699.3 724.6c242.6-13.3 39.9 78.3 145.1 85.6 105.2 7.3-82.9-111.5 155.6-64.7V1000H721.4c-45.2-218.1 65.5-46.8 57.8-143.2-7.7-96.4-89.8 90.3-79.9-132.2z" />
</svg>

css

:root {
  --animate: 0;
  --windowWidthScalar: 1;
  --windowHeightScalar: 1;
  --bg: #f3f0ed;
  --color: #9da2b9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #242733;
    --color: #b6a491;
  }
}

body {
  margin: 0;
  height: 200vh;
  color: var(--color);
  background: var(--bg);
}

svg {
  position: fixed;
  width: 50vmin;
  height: 50vmin;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: visible !important;
}

path {
  fill: url(#puzzle);
  --startX: calc(var(--pieceX) * (100 * var(--windowWidthScalar) - 50) / 100 * 100%);
  --endX: 0px;
  --startY: calc(var(--pieceY) * (100 * var(--windowHeightScalar) - 50) / 100 * 100%);
  --endY: 0px;
  --startRotate: 0deg // set randomly below;
  --endRotate: 0deg;
  --x: calc(var(--startX) * (-1 * var(--animate) + 1) + var(--endX) * var(--animate));
  --y: calc(var(--startY) * (-1 * var(--animate) + 1) + var(--endY) * var(--animate));
  --rotate: calc(var(--startRotate) * (-1 * var(--animate) + 1) + var(--endRotate) * var(--animate));
  -webkit-transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
          transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
  -webkit-transform: translate(var(--x), var(--y)) rotate(var(--rotate));
          transform: translate(var(--x), var(--y)) rotate(var(--rotate));
  stroke-width: 0.5vmin;
  stroke: var(--bg);
}
path:nth-of-type(n + 1) {
  --pieceX: -0.75;
}
path:nth-of-type(n + 5) {
  --pieceX: -0.25;
}
path:nth-of-type(n + 9) {
  --pieceX: 0.25;
}
path:nth-of-type(n + 13) {
  --pieceX: 0.75;
}
path:nth-of-type(4n + 1) {
  --pieceY: -0.75;
}
path:nth-of-type(4n + 2) {
  --pieceY: -0.25;
}
path:nth-of-type(4n + 3) {
  --pieceY: 0.25;
}
path:nth-of-type(4n + 4) {
  --pieceY: 0.75;
}
path:nth-of-type(1) {
  --startRotate: -51deg;
}
path:nth-of-type(2) {
  --startRotate: 52deg;
}
path:nth-of-type(3) {
  --startRotate: 83deg;
}
path:nth-of-type(4) {
  --startRotate: 75deg;
}
path:nth-of-type(5) {
  --startRotate: 75deg;
}
path:nth-of-type(6) {
  --startRotate: 85deg;
}
path:nth-of-type(7) {
  --startRotate: -65deg;
}
path:nth-of-type(8) {
  --startRotate: 63deg;
}
path:nth-of-type(9) {
  --startRotate: 88deg;
}
path:nth-of-type(10) {
  --startRotate: -56deg;
}
path:nth-of-type(11) {
  --startRotate: 90deg;
}
path:nth-of-type(12) {
  --startRotate: -61deg;
}
path:nth-of-type(13) {
  --startRotate: 54deg;
}
path:nth-of-type(14) {
  --startRotate: 88deg;
}
path:nth-of-type(15) {
  --startRotate: 91deg;
}
path:nth-of-type(16) {
  --startRotate: 95deg;
}

#upload {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

#upload-mask {
  position: fixed;
  top: 1em;
  left: 1em;
  bottom: 1em;
  right: 1em;
  pointer-events: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  padding: 1em;
  border-radius: 0.5em;
  border: 0.1em dashed var(--color);
  text-align: center;
  font-size: 32px;
  color: var(--color);
  opacity: 0;
  z-index: 2;
}

JavaScript

const root = document.documentElement;

/* animation */
const setScroll = () => {
  root.style.setProperty("--animate", window.scrollY / window.innerHeight);
};
setScroll();
window.addEventListener("scroll", setScroll); // debounce this in production

/* page aspect ratio */
const setWindowSize = () => {
  const aspectRatio = window.innerWidth / window.innerHeight;
  root.style.setProperty(
    "--windowHeightScalar",
    aspectRatio > 1 ? 1 : 1 / aspectRatio
  );
  root.style.setProperty(
    "--windowWidthScalar",
    aspectRatio < 1 ? 1 : aspectRatio
  );
};
setWindowSize();
window.addEventListener("resize", setWindowSize); // debounce this in production

/* drag n drop */
const upload = document.getElementById("upload");
const uploadMask = document.getElementById("upload-mask");
upload.addEventListener("input", (e) => {
  uploadMask.style.opacity = 0;
  const input = e.target;
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    reader.onload = (readerE) => {
      document
        .getElementById("image")
        .setAttribute("xlink:href", readerE.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
});
upload.addEventListener("dragenter", () => {
  uploadMask.style.opacity = 1;
});
upload.addEventListener("dragleave", () => {
  uploadMask.style.opacity = 0;
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg