Interactive card

Developer
Maksim Surguy
Size
7,540 Kb
Views
22,264
  1. Interactive card Previews
  2. Interactive card HTML Codes
  3. Interactive card CSS Codes

How do I make an interactive card?

Using the SVG exported from my pattern maker (https://github.com/msurguy/triangles) and some CSS to create beautiful card. . What is a interactive card? How do you make a interactive card? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.

Interactive card Previews
IQ Test

Interactive card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive card</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 800" xml:space="preserve" preserveAspectRatio="xMinYMin meet" class="svg-content"> <g id="Layer_1"> <polygon class="triangle" fill="#5982C3" stroke="#5982C3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1352.764,58.536 1114.156,66.764 1272.543,299.201 "/> <polygon class="triangle" fill="#4F97F5" stroke="#4F97F5" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1385.676,461.701 1371.277,379.423 1173.809,387.65 "/> <polygon class="triangle" fill="#5098F7" stroke="#5098F7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1385.676,461.701 1173.809,387.65 1235.518,566.606 "/> <polygon class="triangle" fill="#5396F1" stroke="#5396F1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1371.277,379.423 1272.543,299.201 1173.809,387.65 "/> <polygon class="triangle" fill="#5B7AAF" stroke="#5B7AAF" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1352.764,58.536 1270.484,-23.743 1114.156,66.764 "/> <polygon class="triangle" fill="#6185C7" stroke="#6185C7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1272.543,299.201 1114.156,66.764 1050.391,149.042 "/> <polygon class="triangle" fill="#6188CD" stroke="#6188CD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1272.543,299.201 1050.391,149.042 1040.105,202.523 "/> <polygon class="triangle" fill="#5493ED" stroke="#5493ED" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1235.518,566.606 1173.809,387.65 1097.699,517.24 "/> <polygon class="triangle" fill="#627AAD" stroke="#627AAD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1270.484,-23.743 1097.699,9.169 1114.156,66.764 "/> <polygon class="triangle" fill="#5C8EDD" stroke="#5C8EDD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1272.543,299.201 1040.105,202.523 1130.611,373.252 "/> <polygon class="triangle" fill="#6075A2" stroke="#6075A2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1270.484,-23.743 1184.094,-167.73 1097.699,9.169 "/> <polygon class="triangle" fill="#5795ED" stroke="#5795ED" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1272.543,299.201 1130.611,373.252 1173.809,387.65 "/> <polygon class="triangle" fill="#4975B1" stroke="#4975B1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1243.746,846.354 1219.061,714.708 1163.523,858.696 "/> <polygon class="triangle" fill="#4D87D5" stroke="#4D87D5" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1251.973,618.03 1138.84,603.632 1233.461,698.253 "/> <polygon class="triangle" fill="#4F8CDF" stroke="#4F8CDF" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1251.973,618.03 1235.518,566.606 1138.84,603.632 "/> <polygon class="triangle" fill="#4B76B4" stroke="#4B76B4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1219.061,714.708 1085.359,780.53 1163.523,858.696 "/> <polygon class="triangle" fill="#4D83CD" stroke="#4D83CD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1233.461,698.253 1138.84,603.632 1219.061,714.708 "/> <polygon class="triangle" fill="#528DE1" stroke="#528DE1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1235.518,566.606 1097.699,517.24 1138.84,603.632 "/> <polygon class="triangle" fill="#6975A0" stroke="#6975A0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1184.094,-167.73 1025.707,-108.079 1097.699,9.169 "/> <polygon class="triangle" fill="#4E7FC4" stroke="#4E7FC4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1219.061,714.708 1138.84,603.632 1085.359,780.53 "/> <polygon class="triangle" fill="#618BD5" stroke="#618BD5" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1130.611,373.252 1040.105,202.523 1054.504,356.796 "/> <polygon class="triangle" fill="#5893E9" stroke="#5893E9" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1173.809,387.65 1130.611,373.252 1097.699,517.24 "/> <polygon class="triangle" fill="#548ADA" stroke="#548ADA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1138.84,603.632 1097.699,517.24 1087.416,552.208 "/> <polygon class="triangle" fill="#4A72AA" stroke="#4A72AA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1163.523,858.696 1085.359,780.53 1114.156,858.696 "/> <polygon class="triangle" fill="#507BBC" stroke="#507BBC" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1138.84,603.632 992.795,729.106 1085.359,780.53 "/> <polygon class="triangle" fill="#5B8FE1" stroke="#5B8FE1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1130.611,373.252 1054.504,356.796 1097.699,517.24 "/> <polygon class="triangle" fill="#5380C4" stroke="#5380C4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1138.84,603.632 1017.479,578.949 992.795,729.106 "/> <polygon class="triangle" fill="#5587D2" stroke="#5587D2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1138.84,603.632 1087.416,552.208 1017.479,578.949 "/> <polygon class="triangle" fill="#7078A3" stroke="#7078A3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1097.699,9.169 1025.707,-108.079 1005.137,-87.509 "/> <polygon class="triangle" fill="#4C71A9" stroke="#4C71A9" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1114.156,858.696 1085.359,780.53 1038.049,846.354 "/> <polygon class="triangle" fill="#6B7FB7" stroke="#6B7FB7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1114.156,66.764 1017.479,81.162 1050.391,149.042 "/> <polygon class="triangle" fill="#5F89D3" stroke="#5F89D3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1097.699,517.24 1054.504,356.796 922.857,404.106 "/> <polygon class="triangle" fill="#6B7DB1" stroke="#6B7DB1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1114.156,66.764 1097.699,9.169 1017.479,81.162 "/> <polygon class="triangle" fill="#6587CD" stroke="#6587CD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1054.504,356.796 1040.105,202.523 982.51,344.454 "/> <polygon class="triangle" fill="#707AAA" stroke="#707AAA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1097.699,9.169 1005.137,-87.509 1017.479,81.162 "/> <polygon class="triangle" fill="#5688D3" stroke="#5688D3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1097.699,517.24 1017.479,578.949 1087.416,552.208 "/> <polygon class="triangle" fill="#5C86CE" stroke="#5C86CE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1097.699,517.24 922.857,404.106 1017.479,578.949 "/> <polygon class="triangle" fill="#797BA9" stroke="#797BA9" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,81.162 1005.137,-87.509 920.801,-13.458 "/> <polygon class="triangle" fill="#6B84C4" stroke="#6B84C4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1040.105,202.523 978.396,210.752 982.51,344.454 "/> <polygon class="triangle" fill="#6586CA" stroke="#6586CA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1054.504,356.796 982.51,344.454 922.857,404.106 "/> <polygon class="triangle" fill="#4D72AA" stroke="#4D72AA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1085.359,780.53 1009.25,799.044 1038.049,846.354 "/> <polygon class="triangle" fill="#4F74AE" stroke="#4F74AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1085.359,780.53 992.795,729.106 1009.25,799.044 "/> <polygon class="triangle" fill="#5073AC" stroke="#5073AC" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1009.25,799.044 992.795,729.106 982.51,768.189 "/> <polygon class="triangle" fill="#6180C1" stroke="#6180C1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,578.949 922.857,404.106 867.32,465.814 "/> <polygon class="triangle" fill="#557AB8" stroke="#557AB8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,578.949 918.744,673.568 992.795,729.106 "/> <polygon class="triangle" fill="#6D83C2" stroke="#6D83C2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 982.51,344.454 978.396,210.752 918.744,295.087 "/> <polygon class="triangle" fill="#6C83C0" stroke="#6C83C0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1050.391,149.042 978.396,210.752 1040.105,202.523 "/> <polygon class="triangle" fill="#6F81BA" stroke="#6F81BA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1050.391,149.042 1017.479,81.162 978.396,210.752 "/> <polygon class="triangle" fill="#4E6EA2" stroke="#4E6EA2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1038.049,846.354 1009.25,799.044 900.232,883.379 "/> <polygon class="triangle" fill="#7481B9" stroke="#7481B9" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,81.162 892.004,204.581 978.396,210.752 "/> <polygon class="triangle" fill="#807DAD" stroke="#807DAD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,81.162 920.801,-13.458 844.693,77.048 "/> <polygon class="triangle" fill="#7E7FB3" stroke="#7E7FB3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,81.162 844.693,77.048 892.004,204.581 "/> <polygon class="triangle" fill="#5B7DBB" stroke="#5B7DBB" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1017.479,578.949 867.32,465.814 918.744,673.568 "/> <polygon class="triangle" fill="#4F6FA4" stroke="#4F6FA4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 1009.25,799.044 982.51,768.189 900.232,883.379 "/> <polygon class="triangle" fill="#847FB2" stroke="#847FB2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 892.004,204.581 844.693,77.048 844.693,171.669 "/> <polygon class="triangle" fill="#5C78B1" stroke="#5C78B1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 918.744,673.568 867.32,465.814 844.693,665.341 "/> <polygon class="triangle" fill="#8C7EAC" stroke="#8C7EAC" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 920.801,-13.458 848.807,42.08 844.693,77.048 "/> <polygon class="triangle" fill="#516FA3" stroke="#516FA3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 982.51,768.189 902.289,747.62 900.232,883.379 "/> <polygon class="triangle" fill="#5273AB" stroke="#5273AB" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 992.795,729.106 902.289,747.62 982.51,768.189 "/> <polygon class="triangle" fill="#5474AD" stroke="#5474AD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 992.795,729.106 918.744,673.568 902.289,747.62 "/> <polygon class="triangle" fill="#7381BB" stroke="#7381BB" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 978.396,210.752 892.004,204.581 918.744,295.087 "/> <polygon class="triangle" fill="#6A83C2" stroke="#6A83C2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 982.51,344.454 918.744,295.087 922.857,404.106 "/> <polygon class="triangle" fill="#6076AD" stroke="#6076AD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 867.32,465.814 766.527,605.688 844.693,665.341 "/> <polygon class="triangle" fill="#526D9E" stroke="#526D9E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 902.289,747.62 820.01,809.329 900.232,883.379 "/> <polygon class="triangle" fill="#5C73A7" stroke="#5C73A7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 844.693,665.341 766.527,605.688 815.896,657.113 "/> <polygon class="triangle" fill="#727FB8" stroke="#727FB8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 918.744,295.087 838.523,251.891 838.523,432.904 "/> <polygon class="triangle" fill="#7780B8" stroke="#7780B8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 918.744,295.087 892.004,204.581 838.523,251.891 "/> <polygon class="triangle" fill="#6B80BC" stroke="#6B80BC" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 922.857,404.106 918.744,295.087 838.523,432.904 "/> <polygon class="triangle" fill="#5773AA" stroke="#5773AA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 918.744,673.568 838.523,675.625 902.289,747.62 "/> <polygon class="triangle" fill="#687EB9" stroke="#687EB9" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 922.857,404.106 838.523,432.904 867.32,465.814 "/> <polygon class="triangle" fill="#5974AA" stroke="#5974AA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 918.744,673.568 844.693,665.341 838.523,675.625 "/> <polygon class="triangle" fill="#917EAA" stroke="#917EAA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 920.801,-13.458 799.439,-36.084 848.807,42.08 "/> <polygon class="triangle" fill="#6578AE" stroke="#6578AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 867.32,465.814 782.984,474.044 766.527,605.688 "/> <polygon class="triangle" fill="#5670A3" stroke="#5670A3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 902.289,747.62 838.523,675.625 820.01,809.329 "/> <polygon class="triangle" fill="#787DB2" stroke="#787DB2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 838.523,251.891 739.787,266.289 838.523,432.904 "/> <polygon class="triangle" fill="#7E7FB4" stroke="#7E7FB4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 892.004,204.581 844.693,171.669 838.523,251.891 "/> <polygon class="triangle" fill="#767BAE" stroke="#767BAE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 838.523,432.904 739.787,266.289 706.877,399.992 "/> <polygon class="triangle" fill="#8D7FB0" stroke="#8D7FB0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 844.693,77.048 797.383,109.96 844.693,171.669 "/> <polygon class="triangle" fill="#697BB3" stroke="#697BB3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 867.32,465.814 838.523,432.904 782.984,474.044 "/> <polygon class="triangle" fill="#9F80AB" stroke="#9F80AB" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 822.066,52.365 799.439,-36.084 774.756,-3.173 "/> <polygon class="triangle" fill="#5870A3" stroke="#5870A3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 838.523,675.625 815.896,657.113 820.01,809.329 "/> <polygon class="triangle" fill="#837EB1" stroke="#837EB1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 844.693,171.669 739.787,266.289 838.523,251.891 "/> <polygon class="triangle" fill="#917FAD" stroke="#917FAD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 848.807,42.08 822.066,52.365 844.693,77.048 "/> <polygon class="triangle" fill="#977FAB" stroke="#977FAB" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 848.807,42.08 799.439,-36.084 822.066,52.365 "/> <polygon class="triangle" fill="#937FAE" stroke="#937FAE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 844.693,77.048 822.066,52.365 797.383,109.96 "/> <polygon class="triangle" fill="#5A73A7" stroke="#5A73A7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 844.693,665.341 815.896,657.113 838.523,675.625 "/> <polygon class="triangle" fill="#8B7FB0" stroke="#8B7FB0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 844.693,171.669 797.383,109.96 739.787,266.289 "/> <polygon class="triangle" fill="#6675A8" stroke="#6675A8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 782.984,474.044 706.877,535.752 766.527,605.688 "/> <polygon class="triangle" fill="#5A70A1" stroke="#5A70A1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 820.01,809.329 815.896,657.113 702.763,611.859 "/> <polygon class="triangle" fill="#5C6D9B" stroke="#5C6D9B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 820.01,809.329 702.763,611.859 591.687,712.651 "/> <polygon class="triangle" fill="#6E79AE" stroke="#6E79AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 838.523,432.904 706.877,399.992 782.984,474.044 "/> <polygon class="triangle" fill="#967FAF" stroke="#967FAF" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 797.383,109.96 706.877,103.789 739.787,266.289 "/> <polygon class="triangle" fill="#9B80AE" stroke="#9B80AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 822.066,52.365 752.129,37.966 797.383,109.96 "/> <polygon class="triangle" fill="#A180AD" stroke="#A180AD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 822.066,52.365 774.756,-3.173 752.129,37.966 "/> <polygon class="triangle" fill="#566893" stroke="#566893" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 820.01,809.329 591.687,712.651 649.281,945.089 "/> <polygon class="triangle" fill="#7F7AAA" stroke="#7F7AAA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 739.787,266.289 678.079,311.542 706.877,399.992 "/> <polygon class="triangle" fill="#5F72A4" stroke="#5F72A4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 815.896,657.113 766.527,605.688 702.763,611.859 "/> <polygon class="triangle" fill="#A281AE" stroke="#A281AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 797.383,109.96 752.129,37.966 706.877,103.789 "/> <polygon class="triangle" fill="#A981AD" stroke="#A981AD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 774.756,-3.173 752.129,-5.23 752.129,37.966 "/> <polygon class="triangle" fill="#6B75A6" stroke="#6B75A6" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 782.984,474.044 657.51,482.271 706.877,535.752 "/> <polygon class="triangle" fill="#6F77A8" stroke="#6F77A8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 782.984,474.044 706.877,399.992 657.51,482.271 "/> <polygon class="triangle" fill="#9A7FAC" stroke="#9A7FAC" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 739.787,266.289 706.877,103.789 604.028,206.638 "/> <polygon class="triangle" fill="#6372A3" stroke="#6372A3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 766.527,605.688 706.877,535.752 702.763,611.859 "/> <polygon class="triangle" fill="#AD82AF" stroke="#AD82AF" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 752.129,37.966 715.105,37.966 706.877,103.789 "/> <polygon class="triangle" fill="#AE82AE" stroke="#AE82AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 752.129,37.966 752.129,-5.23 715.105,37.966 "/> <polygon class="triangle" fill="#57658F" stroke="#57658F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 649.281,945.089 591.687,712.651 529.979,877.208 "/> <polygon class="triangle" fill="#BB84AF" stroke="#BB84AF" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 752.129,-5.23 638.997,-27.857 715.105,37.966 "/> <polygon class="triangle" fill="#8D7CAA" stroke="#8D7CAA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 739.787,266.289 604.028,206.638 678.079,311.542 "/> <polygon class="triangle" fill="#7D79A7" stroke="#7D79A7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,399.992 678.079,311.542 643.111,367.081 "/> <polygon class="triangle" fill="#7476A4" stroke="#7476A4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,399.992 618.428,418.505 657.51,482.271 "/> <polygon class="triangle" fill="#6671A0" stroke="#6671A0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,535.752 618.428,570.72 702.763,611.859 "/> <polygon class="triangle" fill="#BA84B0" stroke="#BA84B0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 715.105,37.966 638.997,-27.857 706.877,103.789 "/> <polygon class="triangle" fill="#8C7BA7" stroke="#8C7BA7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 678.079,311.542 604.028,206.638 626.654,319.771 "/> <polygon class="triangle" fill="#626E9B" stroke="#626E9B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 702.763,611.859 618.428,570.72 591.687,712.651 "/> <polygon class="triangle" fill="#C987B1" stroke="#C987B1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,103.789 638.997,-27.857 509.408,42.08 "/> <polygon class="triangle" fill="#BD84AE" stroke="#BD84AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,103.789 509.408,42.08 538.205,149.042 "/> <polygon class="triangle" fill="#AB81AC" stroke="#AB81AC" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,103.789 538.205,149.042 604.028,206.638 "/> <polygon class="triangle" fill="#7977A5" stroke="#7977A5" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,399.992 643.111,367.081 618.428,418.505 "/> <polygon class="triangle" fill="#6A72A1" stroke="#6A72A1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 706.877,535.752 657.51,482.271 618.428,570.72 "/> <polygon class="triangle" fill="#8279A6" stroke="#8279A6" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 678.079,311.542 626.654,319.771 643.111,367.081 "/> <polygon class="triangle" fill="#D789B1" stroke="#D789B1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 638.997,-27.857 536.148,-34.028 509.408,42.08 "/> <polygon class="triangle" fill="#7574A1" stroke="#7574A1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 657.51,482.271 618.428,418.505 556.718,404.106 "/> <polygon class="triangle" fill="#70729F" stroke="#70729F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 657.51,482.271 556.718,404.106 618.428,570.72 "/> <polygon class="triangle" fill="#636C97" stroke="#636C97" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 618.428,570.72 507.352,669.454 591.687,712.651 "/> <polygon class="triangle" fill="#957CA7" stroke="#957CA7" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 626.654,319.771 604.028,206.638 567.003,206.638 "/> <polygon class="triangle" fill="#7F77A3" stroke="#7F77A3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 643.111,367.081 626.654,319.771 556.718,404.106 "/> <polygon class="triangle" fill="#7A76A2" stroke="#7A76A2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 643.111,367.081 556.718,404.106 618.428,418.505 "/> <polygon class="triangle" fill="#6D709A" stroke="#6D709A" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 618.428,570.72 556.718,404.106 484.725,605.688 "/> <polygon class="triangle" fill="#8176A1" stroke="#8176A1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 626.654,319.771 521.75,350.625 556.718,404.106 "/> <polygon class="triangle" fill="#A47EA8" stroke="#A47EA8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 604.028,206.638 538.205,149.042 567.003,206.638 "/> <polygon class="triangle" fill="#666C96" stroke="#666C96" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 618.428,570.72 484.725,605.688 507.352,669.454 "/> <polygon class="triangle" fill="#8C79A4" stroke="#8C79A4" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 626.654,319.771 567.003,206.638 521.75,350.625 "/> <polygon class="triangle" fill="#716F98" stroke="#716F98" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 556.718,404.106 394.218,476.101 484.725,605.688 "/> <polygon class="triangle" fill="#5A658E" stroke="#5A658E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 591.687,712.651 427.129,821.67 529.979,877.208 "/> <polygon class="triangle" fill="#5E6791" stroke="#5E6791" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 591.687,712.651 507.352,669.454 427.129,821.67 "/> <polygon class="triangle" fill="#79729A" stroke="#79729A" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 556.718,404.106 478.553,383.536 394.218,476.101 "/> <polygon class="triangle" fill="#6D6D94" stroke="#6D6D94" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 484.725,605.688 394.218,476.101 398.332,548.094 "/> <polygon class="triangle" fill="#9079A1" stroke="#9079A1" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 567.003,206.638 416.844,262.176 521.75,350.625 "/> <polygon class="triangle" fill="#B982AA" stroke="#B982AA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 538.205,149.042 509.408,42.08 495.01,136.7 "/> <polygon class="triangle" fill="#AA7FA8" stroke="#AA7FA8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 567.003,206.638 538.205,149.042 495.01,136.7 "/> <polygon class="triangle" fill="#9F7CA3" stroke="#9F7CA3" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 567.003,206.638 495.01,136.7 416.844,262.176 "/> <polygon class="triangle" fill="#D188AE" stroke="#D188AE" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 536.148,-34.028 478.553,15.34 509.408,42.08 "/> <polygon class="triangle" fill="#7F749E" stroke="#7F749E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 556.718,404.106 521.75,350.625 478.553,383.536 "/> <polygon class="triangle" fill="#BC83A9" stroke="#BC83A9" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 509.408,42.08 449.756,79.105 495.01,136.7 "/> <polygon class="triangle" fill="#D288AD" stroke="#D288AD" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 536.148,-34.028 478.553,-27.857 478.553,15.34 "/> <polygon class="triangle" fill="#86769D" stroke="#86769D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 521.75,350.625 416.844,262.176 478.553,383.536 "/> <polygon class="triangle" fill="#5E658D" stroke="#5E658D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 507.352,669.454 379.819,813.442 427.129,821.67 "/> <polygon class="triangle" fill="#7A7198" stroke="#7A7198" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 478.553,383.536 425.073,385.594 394.218,476.101 "/> <polygon class="triangle" fill="#83759B" stroke="#83759B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 478.553,383.536 416.844,262.176 425.073,385.594 "/> <polygon class="triangle" fill="#9D7BA0" stroke="#9D7BA0" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 495.01,136.7 367.477,181.954 416.844,262.176 "/> <polygon class="triangle" fill="#62678F" stroke="#62678F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 507.352,669.454 338.68,607.746 379.819,813.442 "/> <polygon class="triangle" fill="#C585AA" stroke="#C585AA" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 509.408,42.08 478.553,15.34 449.756,79.105 "/> <polygon class="triangle" fill="#666A92" stroke="#666A92" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 507.352,669.454 484.725,605.688 338.68,607.746 "/> <polygon class="triangle" fill="#B481A5" stroke="#B481A5" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 495.01,136.7 449.756,79.105 402.446,79.105 "/> <polygon class="triangle" fill="#A97FA2" stroke="#A97FA2" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 495.01,136.7 402.446,79.105 367.477,181.954 "/> <polygon class="triangle" fill="#6A6B93" stroke="#6A6B93" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 484.725,605.688 398.332,548.094 338.68,607.746 "/> <polygon class="triangle" fill="#C485A8" stroke="#C485A8" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 478.553,15.34 478.553,-27.857 402.446,79.105 "/> <polygon class="triangle" fill="#BC83A6" stroke="#BC83A6" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 478.553,15.34 402.446,79.105 449.756,79.105 "/> <polygon class="triangle" fill="#C185A5" stroke="#C185A5" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 478.553,-27.857 385.99,-108.079 402.446,79.105 "/> <polygon class="triangle" fill="#867599" stroke="#867599" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 425.073,385.594 416.844,262.176 320.167,303.314 "/> <polygon class="triangle" fill="#A48198" stroke="#A48198" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 385.99,-108.079 231.717,-38.142 274.914,77.048 "/> <polygon class="triangle" fill="#AE819E" stroke="#AE819E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 402.446,79.105 385.99,-108.079 274.914,77.048 "/> <polygon class="triangle" fill="#897699" stroke="#897699" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 416.844,262.176 324.281,282.745 320.167,303.314 "/> <polygon class="triangle" fill="#63658D" stroke="#63658D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 379.819,813.442 338.68,607.746 209.091,687.968 "/> <polygon class="triangle" fill="#A37E9C" stroke="#A37E9C" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 402.446,79.105 274.914,77.048 328.395,103.789 "/> <polygon class="triangle" fill="#A37D9E" stroke="#A37D9E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 402.446,79.105 328.395,103.789 367.477,181.954 "/> <polygon class="triangle" fill="#777096" stroke="#777096" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 425.073,385.594 324.281,459.644 394.218,476.101 "/> <polygon class="triangle" fill="#7D7196" stroke="#7D7196" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 425.073,385.594 320.167,303.314 324.281,459.644 "/> <polygon class="triangle" fill="#90789A" stroke="#90789A" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 416.844,262.176 367.477,181.954 324.281,282.745 "/> <polygon class="triangle" fill="#726D94" stroke="#726D94" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 398.332,548.094 394.218,476.101 324.281,459.644 "/> <polygon class="triangle" fill="#797094" stroke="#797094" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 324.281,459.644 320.167,303.314 303.711,455.53 "/> <polygon class="triangle" fill="#5F638B" stroke="#5F638B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 379.819,813.442 209.091,687.968 272.857,852.525 "/> <polygon class="triangle" fill="#6E6C92" stroke="#6E6C92" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 398.332,548.094 324.281,459.644 338.68,607.746 "/> <polygon class="triangle" fill="#8C7798" stroke="#8C7798" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 367.477,181.954 301.654,274.518 324.281,282.745 "/> <polygon class="triangle" fill="#6D6B91" stroke="#6D6B91" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 338.68,607.746 324.281,459.644 229.66,566.606 "/> <polygon class="triangle" fill="#716C92" stroke="#716C92" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 324.281,459.644 303.711,455.53 229.66,566.606 "/> <polygon class="triangle" fill="#7E7295" stroke="#7E7295" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 320.167,303.314 297.541,299.201 303.711,455.53 "/> <polygon class="triangle" fill="#8E7897" stroke="#8E7897" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 367.477,181.954 235.831,194.296 301.654,274.518 "/> <polygon class="triangle" fill="#5F628A" stroke="#5F628A" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 272.857,852.525 209.091,687.968 217.319,834.012 "/> <polygon class="triangle" fill="#967A99" stroke="#967A99" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 367.477,181.954 328.395,103.789 235.831,194.296 "/> <polygon class="triangle" fill="#947A96" stroke="#947A96" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 328.395,103.789 239.946,105.846 235.831,194.296 "/> <polygon class="triangle" fill="#68678F" stroke="#68678F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 338.68,607.746 229.66,566.606 209.091,687.968 "/> <polygon class="triangle" fill="#997F94" stroke="#997F94" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 274.914,77.048 231.717,-38.142 209.091,-1.116 "/> <polygon class="triangle" fill="#786F93" stroke="#786F93" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 303.711,455.53 297.541,299.201 167.952,469.93 "/> <polygon class="triangle" fill="#997C97" stroke="#997C97" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 328.395,103.789 274.914,77.048 239.946,105.846 "/> <polygon class="triangle" fill="#857496" stroke="#857496" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 324.281,282.745 297.541,299.201 320.167,303.314 "/> <polygon class="triangle" fill="#867596" stroke="#867596" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 324.281,282.745 301.654,274.518 297.541,299.201 "/> <polygon class="triangle" fill="#797091" stroke="#797091" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 297.541,299.201 60.989,323.885 167.952,469.93 "/> <polygon class="triangle" fill="#6F6B91" stroke="#6F6B91" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 303.711,455.53 174.123,511.068 229.66,566.606 "/> <polygon class="triangle" fill="#726C91" stroke="#726C91" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 303.711,455.53 167.952,469.93 174.123,511.068 "/> <polygon class="triangle" fill="#807392" stroke="#807392" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 297.541,299.201 192.635,216.922 60.989,323.885 "/> <polygon class="triangle" fill="#887694" stroke="#887694" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 301.654,274.518 235.831,194.296 192.635,216.922 "/> <polygon class="triangle" fill="#867595" stroke="#867595" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 301.654,274.518 192.635,216.922 297.541,299.201 "/> <polygon class="triangle" fill="#68678E" stroke="#68678E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 229.66,566.606 165.894,609.803 209.091,687.968 "/> <polygon class="triangle" fill="#937C94" stroke="#937C94" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 274.914,77.048 186.464,85.276 239.946,105.846 "/> <polygon class="triangle" fill="#957D93" stroke="#957D93" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 274.914,77.048 209.091,-1.116 186.464,85.276 "/> <polygon class="triangle" fill="#8C7993" stroke="#8C7993" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 239.946,105.846 132.983,128.473 235.831,194.296 "/> <polygon class="triangle" fill="#8D7A92" stroke="#8D7A92" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 239.946,105.846 186.464,85.276 132.983,128.473 "/> <polygon class="triangle" fill="#756D90" stroke="#756D90" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 167.952,469.93 60.989,323.885 56.875,414.392 "/> <polygon class="triangle" fill="#61628B" stroke="#61628B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 217.319,834.012 209.091,687.968 60.989,768.189 "/> <polygon class="triangle" fill="#887792" stroke="#887792" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 235.831,194.296 132.983,128.473 192.635,216.922 "/> <polygon class="triangle" fill="#8F7F8D" stroke="#8F7F8D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 209.091,-1.116 100.071,-93.68 122.698,7.111 "/> <polygon class="triangle" fill="#6C698F" stroke="#6C698F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 229.66,566.606 174.123,511.068 165.894,609.803 "/> <polygon class="triangle" fill="#907D90" stroke="#907D90" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 209.091,-1.116 126.812,27.681 186.464,85.276 "/> <polygon class="triangle" fill="#60608A" stroke="#60608A" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 217.319,834.012 60.989,768.189 44.534,825.784 "/> <polygon class="triangle" fill="#7E7390" stroke="#7E7390" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 192.635,216.922 63.046,212.809 60.989,323.885 "/> <polygon class="triangle" fill="#67658E" stroke="#67658E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 209.091,687.968 165.894,609.803 71.274,646.828 "/> <polygon class="triangle" fill="#65638D" stroke="#65638D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 209.091,687.968 71.274,646.828 60.989,768.189 "/> <polygon class="triangle" fill="#8E7E8F" stroke="#8E7E8F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 209.091,-1.116 122.698,7.111 126.812,27.681 "/> <polygon class="triangle" fill="#847690" stroke="#847690" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 192.635,216.922 132.983,128.473 63.046,212.809 "/> <polygon class="triangle" fill="#66638E" stroke="#66638E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 71.274,646.828 58.932,655.056 60.989,768.189 "/> <polygon class="triangle" fill="#8B7B90" stroke="#8B7B90" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 186.464,85.276 126.812,27.681 132.983,128.473 "/> <polygon class="triangle" fill="#887B8F" stroke="#887B8F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 132.983,128.473 126.812,27.681 85.672,77.048 "/> <polygon class="triangle" fill="#6B668F" stroke="#6B668F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 174.123,511.068 -0.72,618.03 71.274,646.828 "/> <polygon class="triangle" fill="#726B90" stroke="#726B90" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 174.123,511.068 167.952,469.93 56.875,414.392 "/> <polygon class="triangle" fill="#6F6990" stroke="#6F6990" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 174.123,511.068 56.875,414.392 -0.72,618.03 "/> <polygon class="triangle" fill="#6B678F" stroke="#6B678F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 174.123,511.068 71.274,646.828 165.894,609.803 "/> <polygon class="triangle" fill="#84788F" stroke="#84788F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 132.983,128.473 85.672,77.048 63.046,212.809 "/> <polygon class="triangle" fill="#89818A" stroke="#89818A" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 122.698,7.111 100.071,-93.68 -4.834,-91.623 "/> <polygon class="triangle" fill="#8A7D8E" stroke="#8A7D8E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 126.812,27.681 122.698,7.111 85.672,77.048 "/> <polygon class="triangle" fill="#706991" stroke="#706991" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 56.875,414.392 -66.542,453.474 -0.72,618.03 "/> <polygon class="triangle" fill="#867D8B" stroke="#867D8B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 122.698,7.111 -45.973,-11.401 85.672,77.048 "/> <polygon class="triangle" fill="#868189" stroke="#868189" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 122.698,7.111 -4.834,-91.623 -45.973,-11.401 "/> <polygon class="triangle" fill="#65628E" stroke="#65628E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 60.989,768.189 58.932,655.056 -4.834,731.163 "/> <polygon class="triangle" fill="#81798D" stroke="#81798D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 85.672,77.048 -52.144,83.219 63.046,212.809 "/> <polygon class="triangle" fill="#7F788D" stroke="#7F788D" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 63.046,212.809 -52.144,83.219 -80.941,116.131 "/> <polygon class="triangle" fill="#7B728F" stroke="#7B728F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 63.046,212.809 -56.258,260.119 60.989,323.885 "/> <polygon class="triangle" fill="#827C8B" stroke="#827C8B" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 85.672,77.048 -45.973,-11.401 -52.144,83.219 "/> <polygon class="triangle" fill="#746D90" stroke="#746D90" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 60.989,323.885 -66.542,453.474 56.875,414.392 "/> <polygon class="triangle" fill="#69648F" stroke="#69648F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 71.274,646.828 -0.72,618.03 58.932,655.056 "/> <polygon class="triangle" fill="#7C758E" stroke="#7C758E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 63.046,212.809 -80.941,116.131 -56.258,260.119 "/> <polygon class="triangle" fill="#766E90" stroke="#766E90" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 60.989,323.885 -56.258,260.119 -66.542,453.474 "/> <polygon class="triangle" fill="#63608C" stroke="#63608C" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 60.989,768.189 -4.834,731.163 44.534,825.784 "/> <polygon class="triangle" fill="#6E6792" stroke="#6E6792" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" -0.72,618.03 -66.542,453.474 -111.796,566.606 "/> <polygon class="triangle" fill="#68638F" stroke="#68638F" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 58.932,655.056 -0.72,618.03 -4.834,731.163 "/> <polygon class="triangle" fill="#635F8E" stroke="#635F8E" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" 44.534,825.784 -4.834,731.163 -134.423,831.956 "/> <polygon class="triangle" fill="#686291" stroke="#686291" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" -0.72,618.03 -177.619,722.936 -4.834,731.163 "/> <polygon class="triangle" fill="#6B6393" stroke="#6B6393" stroke-width="1" stroke-linejoin="round" stroke-miterlimit="1" points=" -0.72,618.03 -111.796,566.606 -177.619,722.936 "/> </g> <g id="Layer_2"> <g> <path fill="#DDDDDD" d="M315.722,363.402h-21.479v-14.879h60.717v14.879h-21.479v63.357h-17.759V363.402z"/> <path fill="#DDDDDD" d="M367.202,348.523h17.639v30.119h26.999v-30.119H429.6v78.237H411.84v-32.639h-26.999v32.639h-17.639 V348.523z"/> <path fill="#DDDDDD" d="M484.8,408.16h-23.879l-4.8,18.6h-17.999l24.479-78.237h21.239l24.479,78.237H489.6L484.8,408.16z M481.201,394.361l-1.8-7.199c-2.16-7.8-4.32-17.04-6.36-25.199h-0.48c-1.92,8.28-3.96,17.399-6.12,25.199l-1.92,7.199H481.201z" /> <path fill="#DDDDDD" d="M516.842,348.523h18.119l20.399,38.878l7.68,17.279h0.48c-0.72-8.28-2.16-19.319-2.16-28.559v-27.599 h16.799v78.237H560.04l-20.399-38.999l-7.68-17.039h-0.48c0.72,8.64,2.16,19.079,2.16,28.319v27.719h-16.799V348.523z"/> <path fill="#DDDDDD" d="M596.641,348.523h17.639v32.039h0.48l23.279-32.039h19.439l-23.64,31.199l27.959,47.038h-19.319 l-19.079-32.999l-9.12,12v20.999h-17.639V348.523z"/> <path fill="#DDDDDD" d="M708.719,398.921l-23.639-50.398h18.959l6.96,17.999c2.159,5.88,4.2,11.28,6.36,17.279h0.479 c2.28-6,4.44-11.399,6.6-17.279l7.079-17.999h18.48l-23.64,50.398v27.839h-17.64V398.921z"/> <path fill="#DDDDDD" d="M752.4,387.281c0-25.559,14.398-40.198,35.518-40.198s35.52,14.759,35.52,40.198 c0,25.559-14.4,40.918-35.52,40.918S752.4,412.84,752.4,387.281z M805.318,387.281c0-15.599-6.721-24.959-17.4-24.959 c-10.679,0-17.398,9.36-17.398,24.959c0,15.719,6.72,25.68,17.398,25.68C798.598,412.961,805.318,403,805.318,387.281z"/> <path fill="#DDDDDD" d="M837.719,348.523h17.76v43.798c0,15.359,4.8,20.64,13.559,20.64c8.76,0,13.801-5.28,13.801-20.64v-43.798 h17.039v41.998c0,26.28-10.68,37.678-30.84,37.678c-20.278,0-31.318-11.398-31.318-37.678V348.523z"/> </g> </g> </svg>
</div>
</body>
</html>

Interactive card - Script Codes CSS Codes

 body{ background: #FFF; padding: 0; margin: 0; } #container{ margin:0; padding:0; display: inline-block; position: relative; width: 100%; padding-bottom: 67%; vertical-align: middle; overflow: hidden; } .svg-content { display: inline-block; position: absolute; top: 0; left: 0; } .triangle { fill-opacity: 1; -webkit-transition: all 0.1s linear; } .triangle:hover{ fill-opacity: 0.7; } path { -webkit-transition: all 0.1s linear; } path:hover{ fill: #444; }
Interactive card - Script Codes
Interactive card - Script Codes
Home Page Home
Developer Maksim Surguy
Username msurguy
Uploaded September 12, 2022
Rating 4.5
Size 7,540 Kb
Views 22,264
Do you need developer help for Interactive card?

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!

Maksim Surguy (msurguy) Script Codes
Name
Mesmerizing Delaunay
Polygon background generator
Avatar Blur
Bootstrap - shop item
Bootstrap - flat ui buttons
Sortable Grid UI JS
Coolest clock ever
Magnetic particles - iOS version
Sort algorithms illustrated
Dynamic SVG poster
Create amazing video scripts 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!