SVG Polygon Portrait

Developer
Mike Mangialardi
Size
9,347 Kb
Views
20,240
  1. SVG Polygon Portrait Previews
  2. SVG Polygon Portrait HTML Codes
  3. SVG Polygon Portrait CSS Codes
  4. SVG Polygon Portrait JS Codes

How do I make an svg polygon portrait?

Original image: https://www.pexels.com/photo/close-up-portrait-of-man-249618/About 2 hours ago, making something like this was a "that looks amazing, sure wish I could do that". However, I was able to figure out that the process is not that hard.. What is a svg polygon portrait? How do you make a svg polygon portrait? This script and codes were developed by Mike Mangialardi on 13 December 2022, Tuesday.

SVG Polygon Portrait Previews
IQ Test

SVG Polygon Portrait - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Polygon Portrait</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="poly-face" viewBox="0 0 463 703" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4"> <defs> <filter id="polycleaner" color-interpolation-filters="sRGB"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5 1 1" /> </feComponentTransfer> </filter> </defs> <g filter="url(#polycleaner)"> <g id="Face-Left"><path id="0" d="M231.3 544.3v-48.7l-34-8-56.7 40 90.7 21.8v-5z" fill="#543b3f"/><path id="1" d="M181.3 572.2l-15 17.4 15 22.7c28.2-32.7 43-52 50-62.8l-37.5 6-12.5 16.7z" fill="#583f42"/><path id="2" d="M231.3 580.6v-31l-51 62.7 51-31.7z" fill="#583f42"/><path id="3" d="M133.2 533l-4 4.8 39.7 49 2.7-3-38.5-51z" fill="#583f42"/><path id="4" d="M118 521.6l11.2 16.2 25-19.7-10.3-33.7-26 37.3z" fill="#605153"/><path id="5" d="M140.6 529l56.6 26.6 34-6.2-89.4-21.6-1.2 1" fill="#583f42"/><path id="6" d="M174.6 589.6l22.6-34-56.6-27.3-9 4.6 43 56.6z" fill="#644b4e"/><path id="7" d="M190 187L152 261l45.2 22.7-7-96.4z" fill="#c2b29a"/><path id="8" d="M171.4 678.8l26.7 10.8-.8 2-25.8-12.8z" fill="none"/><path id="9" d="M153 666.7l8 7-9-4.7 1-2.3z" fill="none"/><path id="10" d="M61.8 551l1.5 3.3-2 1.3.5-4.7z" fill="none"/><path id="11" d="M51.3 92.7l-1.5 1.6v-3.6l1.5 2z" fill="none"/><path id="12" d="M84.5 57.8l-.6.7v-1.8l.5 1z" fill="none"/><path id="13" d="M207.6 593.5l23.7-15.2V703L198 689.6l33.3-77.3-22.7-17.5-1-1.3z" fill="#323130"/><path id="14" d="M161 673.6l10.4 5.2-8.2-3.4-2-1.8z" fill="none"/><path id="15" d="M63.3 554.3L117 522l.7 1-11.2 100.6 45.4-34 34 18-33 59-62.8-54.3-27-58z" fill="#473f41"/><path id="16" d="M231.3 578.3l-11.2-8.8 11.3-19.6-.7-1.4h.7l-.8-.3L220 527v-28.4l11.3-4-30.4-6.3-17.2-34.8h47.5v124.8z" fill="none"/><path id="17" d="M174.6 453.5l22.6 34 34 8v-42" fill="#a38273"/><path id="18" d="M49.8 94.3v87H4.5l34 90.8V363l-11.2 6-11.5-51.3 11.4 56.7-22.7 52 38.7 4.7-16 49L50 439.3 72.2 467l-10.5 84-.6-1.3-22.7-73.5-11.3 6.3-22.7-29L0 396.8l10.3-68 5.5-11.3-5.5-34L0 238l4.5-79.3L27.2 118l22.6-23.7z" fill="#30302f"/><path id="19" d="M197.2 487.6L152 521l-17.6-18.6-.2-.4 40.4-48.5 22.6 34z" fill="#5f4f56"/><path id="20" d="M164.4 422.4l-58 45.2 12.3 50.4c28.2-34 63-54 70-68.5l-21.3-24" fill="#7e6061"/><path id="21" d="M209.3 505.2l-1-2.2 4.5-1.8-3.5 4z" fill="none"/><path id="22" d="M112 474.4l-48.2-60L97 354.5l15 119.8z" fill="none"/><path id="23" d="M197.2 283.5l34-22.7v34L220 306 186 397l-11.4 27v11l-8.2-16.7 19.5-31-46.8-24.2-12.5-25.3 25.2-2.2h34v-17.8L152 306l-31.3 6 12-21.6 19.2 4.4h34l11.2-11.3L186 272 152 261H149l.8-1.5 2 1.5 2.2-9 36-64.5 7 96.2z" fill="none"/><path id="24" d="M84 136L51.2 92.8 84 58.5V136z" fill="#2f312d"/><path id="25" d="M84.5 57.8l33.4-35L222.7 0h8.5v113.4L186 124.7l-49.2-8.2 25.7-46.7-22-51.7-22.6 95.4-33.5-55.6z" fill="#323232"/><path id="26" d="M162.5 69.8l23.4 55L197 6.7l-34.7 63z" fill="none"/><path id="27" d="M190 402.4l-21.2 51-29.6-90.6 51 39.6z" fill="#7a6a6a"/><path id="28" d="M230.6 548.6l.7 1.3-11.2 19.5-19-14.8h.3l29.3-6z" fill="none"/><path id="29" d="M230.5 548.3L220 546v-19l10.5 21.3z" fill="none"/><path id="30" d="M97 354.5L112.6 475l-.6-.6-15-119.8z" fill="none"/><path id="31" d="M139.2 362.8L102.8 344l2.7-4.7 21.2-1.8 12.5 25.3z" fill="none"/><path id="32" d="M231.3 260.8l-34 22.7-7.2-96.2 41.3-74V261z" fill="#c0af94"/><path id="33" d="M103.7 344l82.2 55.7 22.6-59.5-22.7-5c-32-2.8-60-.6-82.3 9z" fill="#674e52"/><path id="34" d="M118 311.8L94 337.3l2.8 3 4 6.7 6.5 1.7 20-11.4-6.8-25.5H118z" fill="#543b3f"/><path id="35" d="M152 260.8l-2-1.5 4.3-7.6-2.4 9z" fill="none"/><path id="36" d="M139.2 362.8l27.2 55.3-43.7 69.7-10-12.6L97 354.6l5.8-10.4 36.4 18.8z" fill="#907770"/><path id="37" d="M106.5 364.3c0-9-10.8-33-11.3-24l-37 70.7 65.3 76.7" fill="#8c7c76"/><path id="38" d="M186 607.5l21.6-14 1 1.3 22.7 17.5-33.2 77.3-26.6-10.8-10.3-5.2-8-7 33-59-34-18-45.5 34L117.7 523l68.2 84.5z" fill="#323130"/><path id="39" d="M117 522l-53.7 32.3-1.5-3.4 10.5-84 44.6 55z" fill="#323130"/><path id="40" d="M129.6 537.8l7.5 9.3-7.8-9 .4-.2z" fill="none"/><path id="41" d="M134.4 502.4l-.3-.3h.2l.2.4z" fill="none"/><path id="42" d="M128.2 497.5l-7.8-6 7.8 6z" fill="none"/><path id="43" d="M112 474.4l1.4 11.5.6.4L43.2 431l8 6 12.6-22.7 48.2 60z" fill="#716260"/><path id="44" d="M27.3 369v-.3.2z" fill="none"/><path id="45" d="M120.4 491.4l-6.4-5 6.4 5z" fill="none"/><path id="46" d="M122.7 487.7l-10-12.6 10 12.7z" fill="none"/><path id="47" d="M129.6 537.8l7.5 9.3-7.8-9 .4-.2z" fill="none"/><path id="48" d="M122.7 487.7l11.5 14.3-13.8-10.6 2.3-3.7z" fill="none"/><path id="49" d="M112.6 475l1.4 11.4-.6-.5-1.4-11.6.6.7z" fill="none"/><path id="50" d="M122.7 487.7l-2.3 3.6-6.4-5-4.6-17 13.3 18.4z" fill="none"/><path id="51" d="M27.2 369l16 62L50 439l-22.8 41 16-49.3-38.7-4.7 22.7-52-11.4-56.8L27.2 369z" fill="#735c5f"/><path id="52" d="M114 521.6v-35.2L43.2 431l88.5 72-13.8 18.6 11.2 16.2" fill="#7b706c"/><path id="53" d="M67 221C61 238 52.3 275 38.4 295v68l-11.3 6 28.3 39.4 5.7-113.4c11-11.8 30.3-27.6 34-28.3l-22.7-39.7" fill="#7a6b68"/><path id="54" d="M97 354.6l-33.2 59.7-3.5-4.3 35-69.8 1.7 14.4z" fill="none"/><path id="55" d="M74 230.4L91 265l-29.8 29.8v16l-8.5 89.7L27.3 369l11.2-6.2v-68L74 230.4z" fill="none"/><path id="56" d="M104.6 292.6l19-4.3 9 2-12 21.7-2.7.5-2.3 2.7-11-22.6z" fill="#674b50"/><path id="57" d="M85.6 209.3l51.2-92.8 49 8.2-71.5 107 35.7 27.6-.8 1.5h-54l-1.4 1.4 20.5-30.6-28.7-22.3z" fill="#9b8978"/><path id="58" d="M190 187.3c-9.2 42.5-21 75-41 73.5l37-130.4 4 57z" fill="#c0af94"/><path id="59" d="M97 354.6l-1.8-14.4-35 69.8-7.5-9.5 2.8-117 39.7 11.3 9.4-2.2 11 22.6-20.4 25 10.3-1-2.7 5-7.6-4 1.8 14.3z" fill="#84736f"/><path id="60" d="M114.3 231.6l-20.5 30.6L91 265l-17-34.6 11.6-21 28.7 22.2z" fill="#907770"/><path id="61" d="M190 187.3l-4-57L154 251.8l-4.2 7.6-35.7-27.7 71.6-107 45.3-11.2-41.2 74z" fill="#bea98f"/><path id="62" d="M52.7 400.5l-3 30.4 10.6-21" fill="none"/><path id="63" d="M27.2 369L64 414.2 51 437l-7.8-6-16-62z" fill="#c2b29a"/><path id="64" d="M52.7 400.5l7.6 9.5-10.5 21 3-30.5z" fill="none"/><path id="65" d="M231.3 340.2L192 385.5l39.3 68h-47.5l-9.2-18.7v-11l11.3-27 34-90.7 11.3-11.2v45.4z" fill="#a28681"/><path id="66" d="M231.3 340.2L192 385.5l39.3 68V340.2z" fill="#c5b099"/><path id="67" d="M174.6 434.8l9.2 18.7h-9.2v-18.7z" fill="none"/><path id="68" d="M231.3 548.5h-.7v-.2l.7.2z" fill="none"/><path id="69" d="M230.5 548.3v.3l-29.2 6.2h-.2l19-4.7v-4l10.5 2.3z" fill="none"/><path id="70" d="M197.2 540.7v11L180 538l1-1 16.2 3.7z" fill="none"/><path id="71" d="M177.7 536.3z" fill="none"/><path id="72" d="M154.5 518l4 3.2-4-3.2 42.7-30.4-42.7 30.5z" fill="none"/><path id="73" d="M201 488.3l30.3 6.2-11.4 4v-5.2l-7.2 8-4.6 1.7-7.3-14.7z" fill="none"/><path id="74" d="M188 510.3l-29.5 11-4-3.2 42.7-30.4-9 22.7z" fill="#6a4149"/><path id="75" d="M149.2 260.8h2.7l34 11.3 11.2 11.5-11.3 11.3h-34l-19.3-4.4 16.5-29.6z" fill="#393535"/><path id="76" d="M61.2 294.8l34-34h54l-16.5 29.6-9.2-2-23.3 5.3 4.4-1-13.2-27 2.4-3.5L91 265l.4.8-30.2 45v-16z" fill="#393535"/><path id="77" d="M61.2 311l30.2-45.2-.4-.8 2.8-2.8-2.4 3.6 13.2 26.8-4.4 1-5 1.2-34 16z" fill="#393535"/><path id="78" d="M38.5 294.8V272l-34-90.6h45.3v-87l1.5-1.7L84 136V58.6l.5-.7 33.4 55.6L140.5 18l22 51.8-25.8 46.7-19-3L84 136l-34 45.4-11.3 113.4z" fill="#343536"/><path id="79" d="M162.5 69.8l34.7-63-11.3 118-23.5-55z" fill="none"/><path id="80" d="M85.6 209.3l-11.6 21 11.6-21z" fill="none"/><path id="81" d="M38.5 296.7c2.4-38.2 6.4-77 11.3-115.3l34-45.3 34-22.6 19 3-51.2 93-35.8-28 24.2 49-35.5 66.3z" fill="#70696b"/><path id="82" d="M85.6 209.3l-11.6 21-24.2-49 35.8 28z" fill="#70696b"/><path id="83" d="M120.7 312l31.2-6 34 11.5v17.8h-34l-25.3 2.2-9.5-19.2 3.5-6.3z" fill="#6c4949"/><path id="84" d="M126.4 296l-5.7 16 31-6 34.2 11.5v17.8l22.6 5L220 306l11.3-11.2v-34l-34 22.7-11.4 11.3h-34l-19.3-5.7" fill="#624547"/><path id="85" d="M117.2 318.3l-1.5-3-20.5 25 10.3-1" fill="none"/><path id="86" d="M120.7 312l-15.2 27.3-10.3 1 22.7-27.8 2.7-.5z" fill="none"/><path id="87" d="M134.4 502.4l-.3-.3-20.6-16-70.2-55 91.2 71.4z" fill="none"/><path id="88" d="M120.4 491.4l-6.4-5 6.4 5z" fill="none"/><path id="89" d="M201.3 554.8l-4-3.2-2.2-1.7 6.3 4.7z" fill="none"/><path id="90" d="M201 554.7l-3.8-3-2-1.8 6 4.7z" fill="none"/><path id="91" d="M195 550l6.3 4.7h-.2l-3.8-3-2-1.8-.4-.3.3.2z" fill="none"/><path id="92" d="M177.7 536.3z" fill="none"/><path id="93" d="M50 439.2v-.3l22.5 26-.2 2 44.6 55 1-.4-.3 1.5 68.2 84.5L43 431 50 439z" fill="none"/><path id="94" d="M208.6 589.6l11.5-20 11.3 8.7-23.7 15.2-19.5-24.2 9.2-13.7 11.4 34z" fill="none"/><path id="95" d="M154.4 518l-4.7 3.4-15.3-19 20 15.6z" fill="none"/><path id="96" d="M195 550l2.2 1.6-.6-.5 4.5 3.7-3.8-3L180 538l15 12z" fill="none"/><path id="97" d="M220 569.5l-11.4 20-11.4-34 4-.7 19 14.7z" fill="none"/><path id="98" d="M197.2 555.6l-9 13.7-24-30 33 16.3z" fill="none"/><path id="99" d="M129.6 537.8l7.5 9.3-7.4-9.2z" fill="none"/><path id="100" d="M177.7 536.3l-19.7-4.5-6.4-8 7-2.6 19 15z" fill="none"/><path id="101" d="M174.6 589.6l13.5-20.3 19.6 24.2-21.7 14-49-60.4 37.6 42.6z" fill="none"/><path id="102" d="M113.4 486l4.5 35.6 16-19.5.4.4 15.3 19-9 6.4.5-.2-.4.3-.2-.2h.2l-.2.3-11 9.8-12-14.7.3-1.4-1 .5-44.7-55 .2-2L50 439l1-2-7.8-6 70.2 55z" fill="none"/><path id="103" d="M164 539.4l24 30-13.4 20.2L137 547l-7.4-9.2 11-9.7h.2l23.3 11.4z" fill="none"/><path id="104" d="M141.2 527.6l10.4-3.8 6.4 8-17.2-4 .4-.2z" fill="none"/><path id="105" d="M120.4 491.4l-6.4-5 1.6 12.5 4.8-7.6" fill="none"/><path id="106" d="M134 502l-16 19.6-4.6-35.7 20.7 16z" fill="none"/><path id="107" d="M120.4 491.4l-4.8 7.5-1.6-12.6 6.4 5z" fill="none"/><path id="108" d="M50 439v.2L43 431l7 8z" fill="none"/><path id="109" d="M51 437l-1 2-6.8-8 8 6z" fill="none"/><path id="110" d="M140.8 528l23.3 11.4-6-7.6 19.7 4.5-3 8 5.3-6.2 17.2 13.6v4l4-1v.2l-4 .8-56.4-27.7z" fill="none"/><path id="111" d="M158 531.8l-17.2-4h-.2l17.4 4z" fill="none"/><path id="112" d="M158 531.8l6 7.6L141 528l17.2 3.8z" fill="none"/><path id="113" d="M158.5 521.2l-4-3-4.7 3.3 4.6-3.5 4 3.2z" fill="none"/><path id="114" d="M149.8 521.5l4.7-3.4 4 3.2-7 2.6-1.7-2.3z" fill="none"/><path id="115" d="M151.6 523.8l-11 4 9-6.4h.2l-8.6 6.2 10.4-3.8z" fill="none"/><path id="116" d="M177.7 536.3z" fill="none"/><path id="117" d="M197.2 540.7L220 546v4l-22.8 5.6 4-1-4-3v-11z" fill="none"/><path id="118" d="M180 538l-2.3-1.7 3.3.7-1 1z" fill="none"/><path id="119" d="M220 498.6l-7.2 2.6 7-8v5.4z" fill="none"/><path id="120" d="M197.2 507l-9 3.3 9-22.7V507z" fill="none"/><path id="121" d="M201 554.7l-3.8 1v-4l4 3z" fill="none"/><path id="122" d="M180 538l-5.4 6.3 3-8 2.4 1.8z" fill="none"/><path id="123" d="M43.2 431l71.8 89.4V499c-1-6-2-12.2-5.6-14.3L43.2 431z" fill="#605153"/><path id="124" d="M97 338.2l-2.8 2 6.7 6.5 5.5 2 3-1-3-9.5H97z" fill="#543b3f"/></g><g id="Face-Right"><path id="125" d="M231.3 544.3v-48.7l34-8 56.7 40-90.7 21.8v-5z" fill="#543b3f"/><path id="126" d="M281.2 572.2l15 17.4-15 22.7c-28.2-32.7-43-52-50-62.8l37.5 6 12.5 16.7z" fill="#583f42"/><path id="127" d="M231.3 580.6v-31l51 62.7-51-31.7z" fill="#583f42"/><path id="128" d="M329.3 533l4 4.8-39.7 49-2.8-3 38.5-51z" fill="#583f42"/><path id="129" d="M344.6 521.6l-11.3 16.2-25-19.7 10.3-33.7 26 37.3z" fill="#605153"/><path id="130" d="M322 529l-56.7 26.6-34-6.2 89.5-21.6 1.2 1" fill="#583f42"/><path id="131" d="M288 589.6l-22.7-34 56.7-27.3 8.8 4.6-42.8 56.6z" fill="#644b4e"/><path id="132" d="M272.4 187l38.2 73.8-45.3 22.7 7-96.4z" fill="#c2b29a"/><path id="133" d="M291 678.8l-26.6 10.8 1 2L291 679z" fill="none"/><path id="134" d="M309.4 666.7l-8 7 9.2-4.7-1.2-2.3z" fill="none"/><path id="135" d="M400.8 551l-1.6 3.3 2 1.3-.4-4.7z" fill="none"/><path id="136" d="M411.2 92.7l1.5 1.6v-3.6l-1.5 2z" fill="none"/><path id="137" d="M378 57.8l.7.7v-1.8l-.7 1z" fill="none"/><path id="138" d="M255 593.5l-23.7-15.2V703l33-13.4-33-77.3 22.6-17.5 1-1.3z" fill="#323130"/><path id="139" d="M301.4 673.6l-10.3 5.2 8.3-3.4 2-1.8z" fill="none"/><path id="140" d="M399.2 554.3L345.6 522l-.8 1L356 623.7l-45.4-34-34 18 32.8 59 63-54.3 26.8-58z" fill="#473f41"/><path id="141" d="M231.3 578.3l11.2-8.8-11.2-19.6.6-1.4h-.7l.8-.3 10.6-21.4v-28.4l-11.3-4 30.3-6.3 17-34.8h-47.3v124.8z" fill="none"/><path id="142" d="M288 453.5l-22.7 34-34 8v-42" fill="#a38273"/><path id="143" d="M412.7 94.3v87H458l-34 90.8V363l11.2 6h.2l11.3-51.3-11.3 56.7 22.6 52-38.7 4.7 16 49-22.7-40.8-22.4 27.7 10.6 84 .5-1.3 22.7-73.5 11.4 6.3 22.6-29 4.5-56.7-10.3-68-5.5-11.3 5.5-34 10.3-45.4-4.5-79.3-22.6-40.6-22.7-23.7z" fill="#30302f"/><path id="144" d="M265.3 487.6l45.3 33.3 17.5-18.6.4-.4-40.4-48.5-22.7 34z" fill="#5f4f56"/><path id="145" d="M298 422.4l58 45.2-12.2 50.4c-28.2-34-63-54-70-68.5l21.3-24" fill="#7e6061"/><path id="146" d="M253.3 505.2l1-2.2-4.6-1.8 3.6 4z" fill="none"/><path id="147" d="M350.5 474.4l48.3-60-33.3-59.8-15 119.8z" fill="none"/><path id="148" d="M265.3 283.5l-34-22.7v34l11.3 11.3 34 90.8 11.4 27v11l8.2-16.7-19.6-31 46.8-24.2 12.4-25.3-25.2-2.2h-34v-17.8l34-11.4 31.2 6-12-21.6-19.2 4.4h-34l-11.3-11.3 11.3-11.4 34-11.2h2.7l-.8-1.5-2 1.5-2.2-9-36-64.5-7 96.2z" fill="none"/><path id="149" d="M378.7 136l32.5-43.3-32.5-34.2V136z" fill="#2f312d"/><path id="150" d="M378 57.8l-33.4-35L239.8 0h-8.5v113.4l45.3 11.3 49.2-8.2L300 69.8 322 18l22.6 95.4L378 57.8z" fill="#323232"/><path id="151" d="M300 69.8l-23.4 55-11.3-118 34.7 63z" fill="none"/><path id="152" d="M272.4 402.4l21.3 51 29.7-90.6-51 39.6z" fill="#7a6a6a"/><path id="153" d="M232 548.6l-.7 1.3 11.2 19.5 19-14.8h-.2l-29.4-6z" fill="none"/><path id="154" d="M232 548.3l10.6-2.4v-19L232 548.2z" fill="none"/><path id="155" d="M365.5 354.5L350 475l.5-.6 15-119.8z" fill="none"/><path id="156" d="M323.4 362.8l36.3-18.7-2.7-4.7-21.2-1.8-12.4 25.3z" fill="none"/><path id="157" d="M231.3 260.8l34 22.7 7-96.2-41-74V261z" fill="#c0af94"/><path id="158" d="M358.8 344l-82.2 55.7-22.7-59.5 22.6-5c32-2.8 59.8-.6 82.2 9z" fill="#674e52"/><path id="159" d="M344.6 311.8l23.8 25.5-3 3-3.7 6.7-6.7 1.7-20-11.4 6.8-25.5h2.8z" fill="#543b3f"/><path id="160" d="M310.6 260.8l2-1.5-4.3-7.6 2.3 9z" fill="none"/><path id="161" d="M323.4 362.8L296.2 418l43.7 69.7 10-12.6 15.5-120.5-5.8-10.4-36.3 18.8z" fill="#907770"/><path id="162" d="M356 364.3c0-9 10.8-33 11.3-24l37 70.7-65.3 76.7" fill="#8c7c76"/><path id="163" d="M276.6 607.5l-21.7-14-1 1.3-22.7 17.5 33 77.3 26.8-10.8 10.4-5.2 8-7-32.8-59 34-18 45.4 34L344.8 523l-68.2 84.5z" fill="#323130"/><path id="164" d="M345.6 522l53.6 32.3 1.6-3.4-10.6-84-44.6 55z" fill="#323130"/><path id="165" d="M333 537.8l-7.6 9.3 8-9-.5-.2z" fill="none"/><path id="166" d="M328 502.4l.4-.3-.3.4z" fill="none"/><path id="167" d="M334.3 497.5l8-6-8 6z" fill="none"/><path id="168" d="M350.5 474.4L349 486l-.5.4 70.8-55.5-8 6-12.5-22.7-48.3 60z" fill="#716260"/><path id="169" d="M435.2 369l.2-.3-.2.2z" fill="none"/><path id="170" d="M342.2 491.4l6.3-5-6.3 5z" fill="none"/><path id="171" d="M340 487.7l10-12.6-10 12.7z" fill="none"/><path id="172" d="M333 537.8l-7.6 9.3 8-9-.5-.2z" fill="none"/><path id="173" d="M340 487.7L328.3 502l13.8-10.6-2.3-3.7z" fill="none"/><path id="174" d="M350 475l-1.5 11.4.6-.5 1.5-11.6-.5.7z" fill="none"/><path id="175" d="M340 487.7l2.2 3.6 6.3-5 4.7-17-13.3 18.4z" fill="none"/><path id="176" d="M435.3 369l-16 62-6.7 8.2 22.8 41-16-49.3 38.6-4.7-22.6-52 11.3-56.8-11.3 51.4z" fill="#735c5f"/><path id="177" d="M348.5 521.6v-35.2l70.8-55.5-88.5 72 13.8 18.6-11.3 16.2" fill="#7b706c"/><path id="178" d="M395.7 221c6 16.8 14.5 54 28.3 73.8v68l11.3 6-28.3 39.4-5.7-113.4c-10.8-11.8-30.3-27.6-34-28.3l22.7-39.7" fill="#7a6b68"/><path id="179" d="M365.5 354.6l33.3 59.7 3.4-4.3-35-69.8-1.7 14.4z" fill="none"/><path id="180" d="M388.5 230.4l-17 34.6 29.8 29.8v16l8.5 89.7 25.4-31.6-11.2-6.2v-68l-35.5-64.4z" fill="none"/><path id="181" d="M358 292.6l-19-4.3-9.2 2 12 21.7 2.8.5 2.2 2.7 11-22.6z" fill="#674b50"/><path id="182" d="M377 209.3l-51.2-92.8-49.2 8.2 71.6 107-35.7 27.6.8 1.5h54l1.4 1.4-20.5-30.6 28.7-22.3z" fill="#9b8978"/><path id="183" d="M272.4 187.3c9.4 42.5 21 75 41 73.5l-36.8-130.4-4.2 57z" fill="#c0af94"/><path id="184" d="M365.5 354.6l1.8-14.4 35 69.8 7.5-9.5-2.8-117-39.7 11.3-9.4-2.2-11.2 22.6 20.5 25-10.3-1 2.7 5 7.6-4-1.8 14.3z" fill="#84736f"/><path id="185" d="M348.2 231.6l20.5 30.6 2.8 2.8 17-34.6-11.6-21-28.8 22.2z" fill="#907770"/><path id="186" d="M272.4 187.3l4.2-57 31.7 121.4 4.2 7.6 35.7-27.7-71.6-107-45.3-11.2 41 74z" fill="#bea98f"/><path id="187" d="M409.8 400.5l3 30.4-10.6-21" fill="none"/><path id="188" d="M435.3 369l-36.5 45.3 12.6 22.8 8-6 16-62z" fill="#c2b29a"/><path id="189" d="M409.8 400.5l-7.6 9.5 10.5 21-3-30.5z" fill="none"/><path id="190" d="M231.3 340.2l39.2 45.3-39.2 68h47.4l9.3-18.7v-11l-11.4-27-34-90.7-11.3-11.2v45.4z" fill="#a28681"/><path id="191" d="M231.3 340.2l39.2 45.3-39.2 68V340.2z" fill="#c5b099"/><path id="192" d="M288 434.8l-9.3 18.7h9.3v-18.7z" fill="none"/><path id="193" d="M231.3 548.5h.6v-.2l-.7.2z" fill="none"/><path id="194" d="M232 548.3v.3l29.3 6.2-18.7-4.7v-4l-10.5 2.3z" fill="none"/><path id="195" d="M265.3 540.7v11l17.2-13.6-1-1-16.2 3.7z" fill="none"/><path id="196" d="M284.8 536.3z" fill="none"/><path id="197" d="M308 518l-4 3.2 4-3.2-42.7-30.4L308 518z" fill="none"/><path id="198" d="M261.6 488.3l-30.3 6.2 11.3 4v-5.2l7 8 4.8 1.7 7.2-14.7z" fill="none"/><path id="199" d="M274.4 510.3l29.6 11 4-3.2-42.7-30.4 9 22.7z" fill="#6a4149"/><path id="200" d="M313.3 260.8h-2.7l-34 11.3-11.3 11.5 11.3 11.3h34l19.2-4.4-16.5-29.6z" fill="#393535"/><path id="201" d="M401.3 294.8l-34-34h-54l16.5 29.6 9.2-2 23.4 5.3-4.5-1 13-27-2.3-3.5 2.8 2.8-.4.8 30.3 45v-16z" fill="#393535"/><path id="202" d="M401.3 311L371 265.7l.5-.8-2.8-2.8 2.4 3.6-13 26.8 4.4 1 5 1.2 34 16z" fill="#393535"/><path id="203" d="M424 294.8V272l34-90.6h-45.3v-87l-1.5-1.7-32.5 43.4V58.6l-.7-.7-33.4 55.6L322 18 300 70l25.8 46.7 18.8-3 34 22.6 34 45.4L424 294.8z" fill="#343536"/><path id="204" d="M300 69.8l-34.7-63 11.3 118 23.4-55z" fill="none"/><path id="205" d="M377 209.3l11.5 21-11.6-21z" fill="none"/><path id="206" d="M424 296.7c-2.4-38.2-6.4-77-11.3-115.3l-34-45.3-34-22.6-19 3 51.2 93 35.7-28-24.2 49 35.5 66.3z" fill="#70696b"/><path id="207" d="M377 209.3l11.5 21 24.2-49-35.8 28z" fill="#70696b"/><path id="208" d="M341.8 312l-31.2-6-34 11.5v17.8h34l25.2 2.2 9.5-19.2-3.5-6.3z" fill="#6c4949"/><path id="209" d="M336 296l5.8 16-30.8-6-34.4 11.5v17.8l-22.7 5-11.4-34.2-11.3-11.2v-34l34 22.7 11.3 11.3h34l19.2-5.7" fill="#624547"/><path id="210" d="M345.3 318.3l1.5-3 20.5 25-10.3-1" fill="none"/><path id="211" d="M341.8 312l15.2 27.3 10.3 1-22.7-27.8-2.8-.5z" fill="none"/><path id="212" d="M328 502.4l.4-.3 20.7-16 70.3-55-91.2 71.4z" fill="none"/><path id="213" d="M342.2 491.4l6.3-5-6.3 5z" fill="none"/><path id="214" d="M261.3 554.8l4-3.2 2-1.7-6 4.7z" fill="none"/><path id="215" d="M261.4 554.7l4-3 2-1.8-6 4.7z" fill="none"/><path id="216" d="M267.4 550l-6 4.7 4-3 2-1.8.4-.3-.4.2z" fill="none"/><path id="217" d="M284.8 536.3z" fill="none"/><path id="218" d="M412.6 439.2l-.2-.3-22.4 26 .2 2-44.6 55-1-.4.2 1.5-68.2 84.5L419.3 431l-6.7 8.2z" fill="none"/><path id="219" d="M254 589.6l-11.5-20-11.2 8.7 23.6 15.2 19.4-24.2-9-13.7-11.5 34z" fill="none"/><path id="220" d="M308 518l5 3.4 15-19-20 15.6z" fill="none"/><path id="221" d="M267.4 550l-2 1.6.5-.5-4.6 3.7 4-3 17-13.6-15 12z" fill="none"/><path id="222" d="M242.5 569.5l11.4 20 11.3-34-4-.7-18.8 14.7z" fill="none"/><path id="223" d="M265.3 555.6l9 13.7 24-30-33 16.3z" fill="none"/><path id="224" d="M333 537.8l-7.6 9.3 7.5-9.2z" fill="none"/><path id="225" d="M284.8 536.3l19.7-4.5 6.4-8-7-2.6-19.2 15z" fill="none"/><path id="226" d="M288 589.6l-13.6-20.3-19.5 24.2 21.6 14 48.8-60.4-37.4 42.6z" fill="none"/><path id="227" d="M349 486l-4.4 35.6-16.2-19.5-.3.4-15 19 9 6.4-.7-.2.4.3.3-.2h-.2l.2.3 11 9.8 11.8-14.7-.2-1.4 1 .5 44.6-55-.2-2 22.4-26-1-2 8-6-70.3 55z" fill="none"/><path id="228" d="M298.4 539.4l-24 30 13.6 20.2 37.4-42.5 7.5-9.2-11-9.7h-.2l-23.4 11.4z" fill="none"/><path id="229" d="M321.3 527.6l-10.4-3.8-6.5 8 17.2-4-.4-.2z" fill="none"/><path id="230" d="M342.2 491.4l6.3-5L347 499l-4.8-7.6" fill="none"/><path id="231" d="M328.4 502l16.2 19.6L349 486l-20.6 16z" fill="none"/><path id="232" d="M342.2 491.4l4.7 7.5 1.5-12.6-6.3 5z" fill="none"/><path id="233" d="M412.4 439l.2.2 6.7-8.3-7 8z" fill="none"/><path id="234" d="M411.4 437l1 2 7-8-8 6z" fill="none"/><path id="235" d="M321.8 528l-23.4 11.4 6-7.6-19.6 4.5 3.2 8-5.5-6.2-17.2 13.6v4l-4-1v.2l4 .8 56.5-27.7z" fill="none"/><path id="236" d="M304.5 531.8l17.2-4h.3l-17.5 4z" fill="none"/><path id="237" d="M304.5 531.8l-6 7.6 23.3-11.5-17.3 3.8z" fill="none"/><path id="238" d="M304 521.2l4-3 4.8 3.3-4.7-3.5-4 3.2z" fill="none"/><path id="239" d="M312.8 521.5L308 518l-4 3.2 7 2.6 1.8-2.3z" fill="none"/><path id="240" d="M311 523.8l11 4-9-6.4h-.2l8.5 6.2-10.4-3.8z" fill="none"/><path id="241" d="M284.8 536.3z" fill="none"/><path id="242" d="M265.3 540.7l-22.7 5.2v4l22.7 5.6-4-1 4-3v-11z" fill="none"/><path id="243" d="M282.5 538l2.3-1.7-3.3.7 1 1z" fill="none"/><path id="244" d="M242.6 498.6l7 2.6-7-8v5.4z" fill="none"/><path id="245" d="M265.3 507l9 3.3-9-22.7V507z" fill="none"/><path id="246" d="M261.4 554.7l4 1v-4l-4 3z" fill="none"/><path id="247" d="M282.5 538l5.5 6.3-3.2-8-2.3 1.8z" fill="none"/><path id="248" d="M419.3 431l-71.8 89.4V499c1-6 2-12.2 5.7-14.3l66-53.8z" fill="#605153"/><path id="249" d="M365.5 338.2l3 2-6.8 6.5-5.7 2-2.8-1 2.8-9.5h9.5z" fill="#543b3f"/></g></g></svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Polygon Portrait - Script Codes CSS Codes

#poly-face { position: relative; display: block; margin: auto; width: 30%; margin-top: 5%;
}
body { background: #01070A; background-size: cover;
}

SVG Polygon Portrait - Script Codes JS Codes

var polygonsLeft = document.querySelectorAll("#Face-Left path");
var polygonsRight = document.querySelectorAll("#Face-Right path");
var timeline = new TimelineMax({repeat: -1, repeatDelay: 3});
timeline.add("faces")
timeline.from(polygonsLeft, 2, {x: -100, y: 200, scale: 0, opacity: 0, transformOrigin: "center"}, "faces")
timeline.from(polygonsRight, 2, {x: 100, y: -200, scale: 0, opacity: 0, transformOrigin: "center"}, "faces")
SVG Polygon Portrait - Script Codes
SVG Polygon Portrait - Script Codes
Home Page Home
Developer Mike Mangialardi
Username mikemang
Uploaded December 13, 2022
Rating 4
Size 9,347 Kb
Views 20,240
Do you need developer help for SVG Polygon Portrait?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike Mangialardi (mikemang) Script Codes
Name
VueConf Animation
Modern Landing Page
Daily CSS Images
Interactive Resume
Vue.js Pizza Maker
Freelancing Landing Page Concept
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!