Mechanical Heart

HTML
<svg viewBox="-1250 -1250 2500 2500"> <g class="train"> <g class="pos" transform="translate(-625 -312.5)rotate(0)"> <polygon points="253.82925969022156,-20.000000000000004 253.82925969022156,20.000000000000004 301.89307210030245,39.65844250282257 294.08945921965733,78.88985371895178 242.16132642758967,78.65866168271796 226.8539891329861,115.61384298316945 263.7362014211899,152.16910035821869 241.5133921004058,185.42788485032054 193.6265264142478,165.34225516678586 165.3422551667859,193.62652641424776 185.42788485032054,241.51339210040575 152.1691003582187,263.7362014211899 115.61384298316946,226.85398913298607 78.65866168271796,242.16132642758967 78.88985371895181,294.0894592196573 39.65844250282258,301.89307210030245 20.000000000000032,253.82925969022156 -20,253.82925969022156 -39.65844250282254,301.89307210030245 -78.88985371895178,294.08945921965733 -78.65866168271793,242.1613264275897 -115.61384298316943,226.8539891329861 -152.16910035821869,263.7362014211899 -185.4278848503204,241.5133921004059 -165.34225516678586,193.6265264142478 -193.62652641424776,165.3422551667859 -241.51339210040587,185.42788485032045 -263.7362014211899,152.1691003582187 -226.85398913298607,115.61384298316948 -242.16132642758967,78.65866168271799 -294.0894592196573,78.88985371895183 -301.8930721003024,39.65844250282273 -253.82925969022153,20.000000000000046 -253.82925969022156,-19.999999999999986 -301.8930721003024,-39.65844250282265 -294.08945921965733,-78.88985371895177 -242.1613264275897,-78.65866168271792 -226.8539891329861,-115.61384298316943 -263.7362014211899,-152.16910035821866 -241.5133921004059,-185.4278848503204 -193.6265264142478,-165.34225516678586 -165.342255166786,-193.62652641424768 -185.42788485032048,-241.51339210040584 -152.16910035821874,-263.7362014211899 -115.61384298316949,-226.85398913298604 -78.6586616827182,-242.16132642758961 -78.88985371895184,-294.0894592196573 -39.658442502822744,-301.8930721003024 -19.99999999999995,-253.82925969022156 19.999999999999854,-253.82925969022156 39.65844250282264,-301.89307210030245 78.88985371895174,-294.08945921965733 78.65866168271812,-242.16132642758961 115.6138429831694,-226.8539891329861 152.16910035821863,-263.73620142118995 185.42788485032037,-241.5133921004059 165.34225516678592,-193.62652641424773 193.62652641424768,-165.342255166786 241.5133921004058,-185.42788485032048 263.7362014211899,-152.16910035821877 226.85398913298604,-115.6138429831695 242.1613264275896,-78.65866168271822 294.0894592196573,-78.88985371895187 301.8930721003024,-39.658442502822766"></polygon> </g> <g class="pos" transform="translate(-339.9522812544588 114.10405850922842)rotate(236.25)"> <polygon points="205.89352386246233,-20 205.89352386246233,20 253.24403641232715,41.820492301508146 243.67140984082482,80.65816499855022 191.6041247878656,77.97437099956865 173.01519790611485,113.39261202569703 204.80150616324713,154.71857880685835 178.2765998336153,184.65900873370242 133.420529804388,158.08575329617392 100.50117516864175,180.80834316542015 109.44141897787321,232.17250346855934 72.04076927045658,246.35669895026078 44.67189933441247,201.98159465247934 4.963544370490299,206.80306186269226 -10.990378383256358,256.438505567595 -50.69873334717856,251.61703835738206 -54.31052491832974,199.60588681599003 -91.7111746257463,185.42169133428865 -128.9044125051995,221.95753646010297 -161.8237671409457,199.2349465908568 -140.85106242506018,151.5028758216627 -167.37596875469202,121.56244589481867 -217.28799918877536,136.62877062788547 -235.87692607052608,101.21052960175714 -195.1243189695222,68.69238178417241 -204.69694554102455,29.854709087130324 -255.89352386246236,20 -255.89352386246236,-19.999999999999932 -204.69694554102455,-29.854709087130185 -195.12431896952225,-68.69238178417228 -235.87692607052608,-101.21052960175709 -217.2879991887754,-136.62877062788542 -167.37596875469208,-121.56244589481855 -140.8510624250603,-151.5028758216626 -161.82376714094585,-199.2349465908567 -128.90441250519947,-221.957536460103 -91.71117462574634,-185.42169133428862 -54.31052491832992,-199.60588681599 -50.69873334717879,-251.617038357382 -10.990378383256477,-256.438505567595 4.963544370490202,-206.80306186269226 44.671899334412196,-201.98159465247937 72.04076927045647,-246.3566989502608 109.44141897787321,-232.17250346855934 100.50117516864175,-180.80834316542015 133.42052980438785,-158.08575329617403 178.27659983361514,-184.65900873370256 204.80150616324707,-154.7185788068584 173.01519790611482,-113.3926120256971 191.60412478786552,-77.97437099956886 243.67140984082474,-80.65816499855053 253.24403641232712,-41.8204923015083"></polygon> </g> <g class="pos" transform="translate(-90.0918655217863 488.0465965567408)rotate(596.25)"> <polygon points="189.89385281812878,-20 189.89385281812878,20 236.8960489070696,42.77058138657138 226.54328710296875,81.40761443813412 174.45290056300274,77.62641833337561 154.45290056300274,112.26743448475317 183.77270571639738,155.48843446893548 155.48843446893548,183.77270571639735 112.26743448475317,154.45290056300274 77.62641833337565,174.45290056300274 81.40761443813419,226.54328710296875 42.77058138657141,236.8960489070696 20.000000000000004,189.89385281812878 -19.99999999999998,189.89385281812878 -42.77058138657133,236.89604890706963 -81.4076144381341,226.54328710296878 -77.6264183333756,174.45290056300277 -112.26743448475312,154.4529005630028 -155.48843446893545,183.7727057163974 -183.77270571639738,155.48843446893548 -154.45290056300271,112.26743448475321 -174.45290056300271,77.6264183333757 -226.54328710296875,81.4076144381342 -236.8960489070696,42.77058138657143 -189.89385281812878,20.000000000000014 -189.8938528181288,-19.999999999999964 -236.89604890706963,-42.770581386571266 -226.54328710296878,-81.40761443813405 -174.45290056300277,-77.62641833337558 -154.4529005630028,-112.26743448475311 -183.7727057163975,-155.48843446893537 -155.48843446893557,-183.7727057163973 -112.26743448475324,-154.45290056300271 -77.62641833337571,-174.45290056300271 -81.40761443813422,-226.54328710296872 -42.77058138657165,-236.89604890706954 -20.000000000000025,-189.89385281812878 19.999999999999954,-189.8938528181288 42.77058138657136,-236.8960489070696 81.40761443813392,-226.54328710296883 77.6264183333755,-174.4529005630028 112.26743448475304,-154.45290056300286 155.48843446893548,-183.77270571639735 183.7727057163973,-155.48843446893557 154.4529005630027,-112.26743448475324 174.45290056300271,-77.62641833337572 226.54328710296872,-81.40761443813423 236.89604890706954,-42.77058138657166"></polygon> </g> <g class="pos" transform="translate(276.0902578865493 363.74451524614676)rotate(881.25)"> <polygon points="141.78204549044273,-20 141.78204549044273,20 187.0565758131098,46.79947027021297 173.37577008008304,84.38717510164929 121.4671002757266,75.8148532548903 95.75559588826503,106.4566309796494 113.21153082091017,156.08812338446623 78.5705146695326,176.08812338446623 44.31634888554938,136.15509408357894 4.924038765061038,143.10102119025618 -13.606447648407537,192.34140884086656 -52.99875776889587,185.39548173418936 -53.57051466953255,132.78685319524433 -88.21153082091008,112.78685319524433 -134.05781804421392,138.5960114639764 -159.76932243167548,107.95423373921733 -126.39113904078764,67.28616793536587 -140.07194477381438,29.69846310392958 -191.7820454904427,19.99999999999999 -191.78204549044273,-19.999999999999943 -140.07194477381438,-29.698463103929544 -126.39113904078765,-67.28616793536584 -159.76932243167548,-107.95423373921729 -134.05781804421395,-138.59601146397634 -88.21153082091021,-112.78685319524422 -53.57051466953261,-132.7868531952443 -52.99875776889584,-185.39548173418936 -13.606447648407585,-192.34140884086656 4.9240387650609385,-143.10102119025618 44.316348885549345,-136.15509408357897 78.57051466953263,-176.08812338446623 113.21153082091013,-156.08812338446626 95.75559588826495,-106.45663097964947 121.4671002757266,-75.8148532548903 173.37577008008302,-84.3871751016494 187.05657581310976,-46.79947027021314"></polygon> </g> <g class="pos" transform="translate(444.10323795305123 86.86769319232735)rotate(1201.25)"> <polygon points="125.68348730314621,-19.999999999999996 125.68348730314621,19.999999999999996 169.96404676688508,48.753569280810915 154.65670947228148,85.70875058126238 103.01378177895897,74.72951053149707 74.72951053149708,103.01378177895897 85.70875058126241,154.65670947228148 48.753569280810915,169.96404676688508 20,125.68348730314621 -19.999999999999986,125.68348730314621 -48.75356928081089,169.9640467668851 -85.70875058126235,154.6567094722815 -74.72951053149707,103.01378177895897 -103.01378177895897,74.72951053149708 -154.65670947228148,85.70875058126238 -169.96404676688508,48.753569280810964 -125.6834873031462,20.000000000000007 -125.68348730314621,-19.99999999999998 -169.96404676688508,-48.753569280810915 -154.6567094722815,-85.70875058126235 -103.01378177895899,-74.72951053149706 -74.72951053149704,-103.013781778959 -85.70875058126246,-154.65670947228145 -48.75356928081104,-169.96404676688505 -20.00000000000007,-125.6834873031462 20.000000000000025,-125.6834873031462 48.753569280810986,-169.96404676688505 85.70875058126241,-154.65670947228148 74.72951053149701,-103.01378177895903 103.013781778959,-74.72951053149706 154.65670947228145,-85.70875058126248 169.96404676688505,-48.75356928081105"></polygon> <circle r="62.693865604121925"></circle> </g> <g class="pos" transform="translate(695.4666458960577 -348.506500528622)rotate(0)"> <polygon points="221.8811368742439,-19.999999999999996 221.8811368742439,19.999999999999996 269.51492781355347,41.00068625872483 260.6140904553009,79.99780274599777 208.58567148084043,78.25123994860327 191.2303219161381,114.28999466470002 225.03502833465814,153.8784865094889 200.09543626030876,185.15174580821017 153.97725571527346,161.0038621369073 122.7039964165523,185.9434542112566 135.98418162057794,236.278765311259 99.94542690448117,253.63411487596133 68.87175604818206,211.8676948462098 29.874639560909138,220.76853220446236 20.000000000000032,271.8811368742439 -19.999999999999996,271.8811368742439 -29.874639560909106,220.76853220446236 -68.87175604818204,211.8676948462098 -99.94542690448114,253.63411487596136 -135.9841816205779,236.278765311259 -122.70399641655223,185.94345421125666 -153.9772557152735,161.0038621369073 -200.0954362603087,185.15174580821017 -225.0350283346581,153.87848650948894 -191.23032191613805,114.28999466470009 -208.58567148084043,78.25123994860326 -260.6140904553009,79.99780274599782 -269.51492781355347,41.00068625872485 -221.8811368742439,20.000000000000068 -221.8811368742439,-20.000000000000018 -269.5149278135535,-41.00068625872478 -260.6140904553009,-79.99780274599776 -208.58567148084046,-78.2512399486032 -191.23032191613808,-114.28999466470005 -225.03502833465814,-153.87848650948888 -200.09543626030876,-185.15174580821008 -153.97725571527351,-161.00386213690723 -122.70399641655237,-185.94345421125658 -135.98418162057789,-236.27876531125904 -99.94542690448131,-253.63411487596127 -68.87175604818204,-211.8676948462098 -29.874639560909213,-220.76853220446233 -19.99999999999994,-271.8811368742439 19.999999999999844,-271.8811368742439 29.87463956090913,-220.76853220446236 68.87175604818196,-211.86769484620982 99.94542690448121,-253.63411487596133 135.9841816205778,-236.2787653112591 122.7039964165523,-185.9434542112566 153.9772557152734,-161.00386213690737 200.0954362603088,-185.15174580821008 225.035028334658,-153.87848650948908 191.2303219161381,-114.28999466470005 208.58567148084038,-78.25123994860337 260.6140904553009,-79.99780274599773 269.51492781355347,-41.000686258725"></polygon> <circle r="123.12066851483469"></circle> <path d="M14.798869158131383,-122.22803478408836A123.12066851483469 123.12066851483469 0 1 0 14.798869158131383 122.22803478408836L495.1911330044576 62.23933055469297A62.693865604121925 62.693865604121925 0 1 0 495.1911330044576 -62.23933055469297z" transform="rotate(120)"></path> </g> <g class="pos" transform="translate(368.393638670191 -609.3385200129927)rotate(38.571428571428555)"> <polygon points="141.78204549044273,-20 141.78204549044273,20 187.0565758131098,46.79947027021297 173.37577008008304,84.38717510164929 121.4671002757266,75.8148532548903 95.75559588826503,106.4566309796494 113.21153082091017,156.08812338446623 78.5705146695326,176.08812338446623 44.31634888554938,136.15509408357894 4.924038765061038,143.10102119025618 -13.606447648407537,192.34140884086656 -52.99875776889587,185.39548173418936 -53.57051466953255,132.78685319524433 -88.21153082091008,112.78685319524433 -134.05781804421392,138.5960114639764 -159.76932243167548,107.95423373921733 -126.39113904078764,67.28616793536587 -140.07194477381438,29.69846310392958 -191.7820454904427,19.99999999999999 -191.78204549044273,-19.999999999999943 -140.07194477381438,-29.698463103929544 -126.39113904078765,-67.28616793536584 -159.76932243167548,-107.95423373921729 -134.05781804421395,-138.59601146397634 -88.21153082091021,-112.78685319524422 -53.57051466953261,-132.7868531952443 -52.99875776889584,-185.39548173418936 -13.606447648407585,-192.34140884086656 4.9240387650609385,-143.10102119025618 44.316348885549345,-136.15509408357897 78.57051466953263,-176.08812338446623 113.21153082091013,-156.08812338446626 95.75559588826495,-106.45663097964947 121.4671002757266,-75.8148532548903 173.37577008008302,-84.3871751016494 187.05657581310976,-46.79947027021314"></polygon> </g> <g class="pos" transform="translate(42.84965276149603 -322.04424784665656)rotate(318.57142857142856)"> <polygon points="237.85911135556464,-19.999999999999996 237.85911135556464,19.999999999999996 285.72693293816616,40.286322544557 277.41046530545583,79.41222657390924 225.42984359929767,78.47510732490328 209.16037787626567,115.0169256306073 244.63861811817173,153.01900050531876 221.1272080264728,185.37968028031665 174.02170791887605,163.38115566936196 144.29591489978026,190.14637992371632 161.25006375347115,239.2933031447326 126.60904760209361,259.2933031447326 92.52363800169557,220.03711792738537 54.48137734988947,232.39779770238323 49.979908454955044,284.19161975901 10.19903264022411,288.3727582897161 -4.972609476841354,238.6466635213024 -44.75348529157225,234.46552499059626 -69.9322270686368,279.95062351714097 -107.97448772044295,267.5899437421431 -101.60904760209347,215.99203295551067 -136.25006375347107,195.99203295551064 -177.75244521772305,227.30362119758618 -207.47823823681895,200.5383969432318 -180.67635830772534,155.990417665693 -204.1877683994243,123.62973789069505 -254.83765075839568,135.3537577843975 -271.10711648142774,98.81193947869333 -228.5030852687654,69.01664203302137 -236.81955290147582,29.890738003669092 -287.8591113555647,20.0000000000001 -287.8591113555647,-20.00000000000003 -236.81955290147584,-29.89073800366893 -228.50308526876546,-69.01664203302123 -271.10711648142785,-98.81193947869316 -254.8376507583958,-135.35375778439732 -204.18776839942433,-123.629737890695 -180.67635830772537,-155.99041766569295 -207.47823823681907,-200.53839694323165 -177.75244521772322,-227.3036211975861 -136.2500637534712,-195.99203295551055 -101.60904760209361,-215.99203295551058 -107.97448772044295,-267.5899437421431 -69.93222706863693,-279.95062351714097 -44.75348529157251,-234.4655249905962 -4.972609476841518,-238.6466635213024 10.199032640223974,-288.3727582897161 49.979908454954774,-284.19161975901005 54.481377349889364,-232.39779770238326 92.52363800169556,-220.03711792738537 126.60904760209344,-259.2933031447327 161.2500637534709,-239.29330314473276 144.29591489978012,-190.1463799237164 174.02170791887596,-163.38115566936207 221.1272080264728,-185.37968028031665 244.63861811817162,-153.01900050531887 209.16037787626553,-115.01692563060752 225.4298435992976,-78.47510732490345 277.4104653054558,-79.41222657390931 285.72693293816616,-40.28632254455722"></polygon> </g> </g> <mask id="heart"> <rect class="w" x="-1250" y="-1250" width="2500" height="2500"></rect> <path d="M0,-281.25C0 -781.25 781.25 -781.25 781.25 -250Q781.25 312.5 0 703.125Q-781.25 312.5 -781.25 -250C-781.25 -781.25 0 -781.25 0 -281.25"></path> </mask> <rect class="cover" x="-1250" y="-1250" width="2500" height="2500" mask="url(#heart)"></rect> </svg>
SCSS
$bg: #000; $svg-dim: 100vmin; $g0: radial-gradient($bg 14%, transparent 17%); $g1: radial-gradient(#999 15%, transparent 20%); $bs: 1.5em; $off: .05*$bs; $data: 16 #fbd047, 13 #fb7c6d, 12 #f561ca, 9 #dd7aef, 8 #c4a6dd .35, 14 #62b6f2 .45, 9 #84d2ba, 15 #b8ed83; $nc: length($data); $t: .5s; $k: 1; $f: 0; $dir: normal reverse; body { display: flex; justify-content: center; margin: 0; height: 100vh; background: $bg; } svg { align-self: center; width: $svg-dim; height: $svg-dim; box-shadow: inset 0 0 0 .125em $bg; background: $g0, $g0 .5*$bs .5*$bs, $g1 0 $off, $g1 .5*$bs .5*$bs + $off #666; background-size: $bs $bs; } @for $i from 0 to $nc { $cdata: nth($data, $i + 1); $c: nth($cdata, 2); $nt: nth($cdata, 1); @if $i > 0 and length($cdata) > 2 { $pdata: nth($data, $i); @if length($pdata) > 2 { $hap: .5*180deg/nth($pdata, 1); $hac: .5*180deg/$nt; $f: 1 - $f; $k: $k*nth($cdata, 3)/nth($pdata, 3)*(.5/sin($hac) + 1/cos($hac))/(.5/sin($hap) + 1/cos($hap)); } } .pos:nth-child(#{$i + 1}) { polygon { fill: $c; animation-duration: $nt*$k*$t; animation-direction: nth($dir, ($i + $f)%2 + 1); } circle { fill: darken($c, 20%) } } } polygon { animation: r 0s linear infinite; } @keyframes r { to { transform: rotate(1turn); } } .pos path { fill: none; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; } mask .w { fill: #fff; } .cover { fill: $bg; }
JAVASCRIPT
Expand for more options Login