p5结合svg实现昏昏欲睡的懒汉交互效果-html代码-BFW代码库

代码语言：html

代码描述：p5结合svg实现昏昏欲睡的懒汉交互效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

svg {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  outline: 1px solid black;
}

canvas {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: auto;
  touch-action: none;
  background: radial-gradient(#f4fdff 40%, #c3ecff);
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: flex-start;
  margin: 0;
}
</style>

</head>
<body>
<svg id="OBJECTS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M201.85,271.29c-1.32.17-2.63.28-3.94.36C178.4,272.77,161,263.59,154,249.26c-30.61-1.47-55.11-4.38-65.6-8.1-24-8.53-39.86-18.86-39.86-18.86l-3.66,6.93S85,243.88,84.3,252.34,25.2,278,25.2,278v6.11s63-17.36,66.87-11.74-62.75,37.89-62.75,37.89l3.44,6.22s77.1-29.69,111.39-32.37c7.4-.58,26.87-1.13,52.89-1.65,8.92-.18,18.6-.36,28.84-.54.44-7.36.72-14.42.89-20.41A53.22,53.22,0,0,1,201.85,271.29Z" fill="#732507" /><path d="M411.15,146.31c-22.9-21.07-67.47-23.24-93-6.87-40.75,26.15-50.85,46.73-67.8,58.18-9.83,6.64-17.34,7.07-21.92,6.25C219,197,206,193.53,192.13,195.3c-25.42,3.25-43.84,22.9-41.15,43.88a32.3,32.3,0,0,0,3,10.08c7,14.33,24.38,23.51,43.89,22.39,1.31-.08,2.62-.19,3.94-.36a53.22,53.22,0,0,0,24.92-9.8c-.17,6-.45,13.05-.89,20.41-.31,5.14-.7,10.42-1.18,15.59-.8,8.68-1.7,20.75-2.45,31.54s-1.36,20.36-1.58,23.85h0c3.22,3.06,16.54.49,18.65.06,6-7.29,27.55-38.11,33.94-51.32,2.53-5.21,4.06-12.9,5-20.53a221.2,221.2,0,0,0,1.43-26.2c17.2,4.69,47.75,3.75,70.89,2.06,17.53-1.27,30.81-3,30.81-3,1.05,3.86,8,13.9,10.59,22.71a27.25,27.25,0,0,1,.67,2.74,15.31,15.31,0,0,1,.19,4.78c-1.38,9.62-11.91,26.57-11.91,30.24s27-4.13,27-4.13c2.49-1.77,12.32-8.63,20.72-31.48a170.51,170.51,0,0,0,6.77-24.41c.93-4.52,1.67-8.94,2.25-13.26C443.43,198.05,432,165.47,411.15,146.31Z" fill="#c17959" /><path d="M353.46,309.74a27.22,27.22,0,0,0-3,.89,2.65,2.65,0,0,0-.85-.89s-7.79,1.72-10.88,6c0,0,2.82-1.05,5.61-1.84a9.78,9.78,0,0,0-1.8,1.84,75.08,75.08,0,0,1,7.33-2.29C353.13,312.64,356,311.57,353.46,309.74Z" fill="#f2dabe" /><path d="M23.21,264.55h.27a6.34,6.34,0,0,1,.74,0,12.39,12.39,0,0,1,2.27.4,11.43,11.43,0,0,1,7.89,8.15,12.53,12.53,0,0,1,.31,2.3,5.57,5.57,0,0,1,0,.73v.27H34.4a6.34,6.34,0,0,1-.74,0,11.8,11.8,0,0,1-2.28-.4,11.36,11.36,0,0,1-7.86-8.16,11.74,11.74,0,0,1-.32-2.29,6,6,0,0,1,0-.74C23.21,264.64,23.21,264.55,23.21,264.55Z" fill="#b2ed85" /><path d="M18.56,294.26s0-.09,0-.26a5.61,5.61,0,0,1-.14-.73,12.6,12.6,0,0,1-.08-2.31,11.54,11.54,0,0,1,1.92-5.54,11.31,11.31,0,0,1,4.43-3.85,11.63,11.63,0,0,1,2.17-.78,6.81,6.81,0,0,1,.73-.15l.26,0,.06.26c0,.17.11.44.14.73a12.6,12.6,0,0,1,.08,2.31,11.31,11.31,0,0,1-1.93,5.54,11.5,11.5,0,0,1-4.43,3.84,11.76,11.76,0,0,1-2.17.79,4.9,4.9,0,0,1-.72.14Z" fill="#b2ed85" /><path d="M37.59,290.93l-.08-.25a6.59,6.59,0,0,1-.21-.71,12.56,12.56,0,0,1-.31-2.29A11.5,11.5,0,0,1,38.35,282a11.29,11.29,0,0,1,4-4.27,11.94,11.94,0,0,1,2.08-1,6.84,6.84,0,0,1,.71-.21l.26-.07.08.25a4.88,4.88,0,0,1,.21.71,11.66,11.66,0,0,1,.32,2.29,11.42,11.42,0,0,1-5.39,10,12.39,12.39,0,0,1-2.09,1,6.12,6.12,0,0,1-.7.21Z" fill="#b2ed85" /><path d="M53.66,272.83l-.27,0a6.23,6.23,0,0,1-.73-.07,12.47,12.47,0,0,1-2.24-.57,11.57,11.57,0,0,1-4.8-3.38,11.34,11.34,0,0,1-2.47-5.32,12.54,12.54,0,0,1-.15-2.31c0-.28,0-.56.06-.73s0-.27,0-.27l.26,0a6.36,6.36,0,0,1,.74.07,11.55,11.55,0,0,1,2.24.56,11.35,11.35,0,0,1,4.79,3.39,11.48,11.48,0,0,1,2.47,5.32,11.71,11.71,0,0,1,.15,2.31,5.75,5.75,0,0,1-.06.73Z" fill="#b2ed85" /><path d="M71.63,263.71l-.25.09a4.64,4.64,0,0,1-.7.24,11.2,11.2,0,0,1-2.27.43,11.55,11.55,0,0,1-5.77-1.07,11.33,11.33,0,0,1-4.47-3.8,12,12,0,0,1-1.1-2,5.63,5.63,0,0,1-.25-.7l-.08-.25.25-.1a5.86,5.86,0,0,1,.69-.24,11.15,11.15,0,0,1,8,.64,11.6,11.6,0,0,1,4.47,3.81,12,12,0,0,1,1.1,2,6.23,6.23,0,0,1,.25.69Z" fill="#b2ed85" /><path d="M57.11,283.45s0-.09,0-.27a5.85,5.85,0,0,1,0-.73,12,12,0,0,1,.35-2.29,11.26,11.26,0,0,1,10.25-8.43c.29,0,.57,0,.74,0h.27s0,.09,0,.27a5.84,5.84,0,0,1,0,.73,12,12,0,0,1-.35,2.29,11.31,11.31,0,0,1-2.91,5.09,11.51,11.51,0,0,1-5.07,3,12.23,12.23,0,0,1-2.28.38,5.84,5.84,0,0,1-.73,0Z" fill="#b2ed85" /><path d="M27.17,328s0-.09-.07-.25a6.23,6.23,0,0,1-.18-.72,11.86,11.86,0,0,1-.22-2.3A11.41,11.41,0,0,1,32.46,315a11.75,11.75,0,0,1,2.13-.91c.27-.1.55-.14.71-.19l.26-.06s0,.09.07.26.14.43.19.72a11.86,11.86,0,0,1,.22,2.3,11.36,11.36,0,0,1-1.58,5.65,11.66,11.66,0,0,1-4.19,4.11,13,13,0,0,1-2.12.92,5.74,5.74,0,0,1-.72.18Z" fill="#b2ed85" /><path d="M28.76,303.19,29,303c.13-.1.32-.31.56-.48a11.65,11.65,0,0,1,1.95-1.24,11.51,11.51,0,0,1,5.75-1.16A11.23,11.23,0,0,1,42.77,302a10.77,10.77,0,0,1,1.78,1.48A4.23,4.23,0,0,1,45,304l.18.2-.2.18a6.67,6.67,0,0,1-.56.49,11.62,11.62,0,0,1-2,1.25,11.37,11.37,0,0,1-11.31-.72,11.78,11.78,0,0,1-1.78-1.47,5,5,0,0,1-.49-.55Z" fill="#b2ed85" /><path d="M46,292.24l.2-.18a6.67,6.67,0,0,1,.56-.49,12.18,12.18,0,0,1,1.94-1.24,11.54,11.54,0,0,1,5.76-1.16A11.36,11.36,0,0,1,60.05,291a11.77,11.77,0,0,1,1.78,1.48,5.14,5.14,0,0,1,.49.55l.17.2-.19.19a5.32,5.32,0,0,1-.56.48,11.62,11.62,0,0,1-2,1.25,11.37,11.37,0,0,1-11.31-.72A10.77,10.77,0,0,1,46.7,293a5,5,0,0,1-.49-.55Z" fill="#b2ed85" /><path d="M48.85,316.46s0-.09-.07-.26a6,6,0,0,1-.18-.71,12,12,0,0,1-.22-2.3,11.36,11.36,0,0,1,5.76-9.77,11.69,11.69,0,0,1,2.12-.91,4.53,4.53,0,0,1,.71-.19l.27-.06s0,.09.07.26a6,6,0,0,1,.18.71,12.06,12.06,0,0,1,.22,2.31,11.36,11.36,0,0,1-5.77,9.75,12.13,12.13,0,0,1-2.12.92c-.27.1-.55.14-.71.19Z" fill="#b2ed85" /><path d="M41.72,212.64l.26,0a5.72,5.72,0,0,1,.73.12,12,12,0,0,1,2.2.7,11.54,11.54,0,0,1,4.57,3.68,11.34,11.34,0,0,1,2.13,5.47,11.06,11.06,0,0,1,0,2.31,4.76,4.76,0,0,1-.11.73c0,.17,0,.26,0,.26l-.27,0a5.72,5.72,0,0,1-.73-.12,11.59,11.59,0,0,1-2.2-.7,11.39,11.39,0,0,1-4.57-3.68,11.54,11.54,0,0,1-2.12-5.48,11.88,11.88,0,0,1,0-2.31,6.23,6.23,0,0,1,.11-.72C41.7,212.73,41.72,212.64,41.72,212.64Z" fill="#b2ed85" /><path d="M32.76,231.33l.14-.23c.1-.14.23-.39.41-.61a12,12,0,0,1,1.56-1.7A11.38,11.38,0,0,1,46,226.54a10.71,10.71,0,0,1,2.1,1,6.88,6.88,0,0,1,.62.4l.22.16-.15.22a5.37,5.37,0,0,1-.41.62,11.45,11.45,0,0,1-1.56,1.7,11.3,11.3,0,0,1-5.26,2.6,11.58,11.58,0,0,1-5.86-.36,12.75,12.75,0,0,1-2.1-1,6.52,6.52,0,0,1-.61-.4Z" fill="#b2ed85" /><path d="M62.87,220.09l.25.12a7.19,7.19,0,0,1,.65.34,12.22,12.22,0,0,1,1.86,1.37,11.53,11.53,0,0,1,3.16,5,11.33,11.33,0,0,1,.28,5.86,12.61,12.61,0,0,1-.74,2.19,4.88,4.88,0,0,1-.34.66l-.13.23-.24-.12a4.65,4.65,0,0,1-.65-.34A11.6,11.6,0,0,1,65.1,234,11.39,11.39,0,0,1,62,229a11.58,11.58,0,0,1-.27-5.87,13,13,0,0,1,.73-2.19,4.67,4.67,0,0,1,.34-.65Z" fill="#b2ed85" /><path d="M56.1,244.84l.14-.23c.1-.13.23-.38.41-.6a12.12,12.12,0,0,1,1.57-1.71,11.57,11.57,0,0,1,5.25-2.61,11.36,11.36,0,0,1,5.86.36,12,12,0,0,1,2.1,1,5.11,5.11,0,0,1,.62.41l.22.15-.15.23a4.63,4.63,0,0,1-.41.61,12,12,0,0,1-1.56,1.71,11.4,11.4,0,0,1-5.26,2.6,11.58,11.58,0,0,1-5.86-.37,12.8,12.8,0,0,1-2.1-1,6.31,6.31,0,0,1-.61-.41Z" fill="#b2ed85" /><path d="M359.21,283.43c-4.9,8.11-13.39,27.66-11.28,28.94s24.87-1.72,29.56-7.67c2.2-2.79,7.67-13.43,13.2-25.25l-30.55.46A6.9,6.9,0,0,1,359.21,283.43Z" fill="#b2694d" /><polygon points="211.52 344.67 211.52 344.67 211.51 344.69 211.52 344.67" fill="#f2dabe" /><path d="M193.44,343.73c-.08,0-.14-.31-.18-.76-.88,1.9-4.58,11,2,18.35,0,0-2.5-10.81,1.64-14.78,0,0-2.28,10.35,5,15.32,0,0-4.18-10.07.86-14.75,0,0-1.69,12.23,6.53,15,0,0-3.63-12.12,2-17.27C207,349,195,344.55,193.44,343.73Z" fill="#f2dabe" /><path d="M211.51,344.68l-.17.17Z" fill="#b2694d" /><path d="M197,282.44c-1.95,24.57-4.22,55.37-3.78,60.53,0,.45.1.72.18.76,1.54.82,13.52,5.22,17.9,1.12l.17-.17h0a4.19,4.19,0,0,0,.7-.94c1.38-2.46,5.35-8,10-14.7.75-10.79,1.65-22.86,2.45-31.54.48-5.17.87-10.45,1.18-15.59C215.64,282.08,206,282.26,197,282.44Z" fill="#b2694d" /><path d="M477.35,241.56s-15.85-.34-39.67-.4c-.58,4.32-1.32,8.74-2.25,13.26a170.51,170.51,0,0,1-6.77,24.41c28.2-.52,47.16-1,48.69-1.54a2.76,2.76,0,0,0,.52-.25l.16-.12a2.69,2.69,0,0,0,.32-.27,1.62,1.62,0,0,0,.19-.18l.27-.32.18-.24.24-.39.17-.28c.08-.15.15-.32.23-.48l.14-.3c.11-.25.21-.52.32-.8s.11-.34.16-.51.09-.28.13-.43.11-.39.17-.59.07-.27.1-.4.11-.45.16-.68.05-.24.07-.36l.15-.79,0-.2a48.37,48.37,0,0,0,.6-5.71h0C482.09,254.83,480.53,243.94,477.35,241.56Z" fill="#732507" /><path d="M392,276.........完整代码请登录后点击上方下载按钮下载查看