Þetta er ætlað fyrir þá vefi sem hafa verið tilnefndir til Íslensku vefverðlaunanna.
Einfaldasta og fljótlegasta innleiðingin er að taka afrit af línunni í 1-one-liner.html og skella henni efst (beint á eftir <body>) eða neðst (beint á undan </body>) á síðuna þína.
Hægt er að setja dark class á <svg> elementið til að fá dökka úgáfu af horninu.
Fyrir þá sem vilja þá látum við einnig fylgja sundurliðaðar útgáfur af stílum (css & scss) og svg skjali
| <svg class="svef-corner" style="max-width:80px;width:40%;z-index:9999;position:absolute;top:0;right:0;height:auto;" viewBox="0 0 300 250"><a xlink:href="https://www.svef.is/winners/tilnefningar-2022/" target="_blank"><path class="corner" fill="#ebebea" d="M0,0 L300,0 L300,250 L0,0 Z"></path><path class="swirl" fill="#4a4a4a" d="M249.126899,37.1175228 L246.953343,40.31679 C262.317171,49.343404 269.436691,66.9855614 264.262666,83.2159151 C261.816058,90.9000069 256.299167,97.2354182 248.729732,101.059759 C241.157194,104.88102 232.4397,105.730874 224.184532,103.452281 C210.758442,99.749568 203.077304,86.5799185 207.056726,74.0876883 C210.173552,64.2974379 221.275597,58.6917921 231.797407,61.5969977 C235.772175,62.6947251 239.051901,65.1626873 241.026874,68.5528636 C243.001846,71.94304 243.442453,75.8443601 242.263365,79.5393751 C240.381478,85.4483201 233.688602,88.8292589 227.340144,87.0787455 C222.476405,85.7377629 219.691586,80.9650351 221.134417,76.4401812 C221.663455,74.7820432 222.851852,73.4164272 224.485509,72.5942864 C226.117616,71.7659872 227.999502,71.582776 229.775891,72.0769843 C231.097711,72.4403274 232.185265,73.2609287 232.843072,74.3879083 C233.499327,75.5133483 233.645162,76.8096827 233.251098,78.0382753 C232.669311,79.8657681 230.596599,80.9142287 228.634038,80.3722931 L227.478221,83.9995663 C231.591066,85.1357834 235.933524,82.9434078 237.151398,79.1129088 C237.851093,76.9143748 237.590453,74.5957529 236.41757,72.5835092 C235.243137,70.5666468 233.294538,69.0994179 230.930157,68.4466319 C228.109654,67.6691392 225.130905,67.958582 222.54622,69.264154 C219.955329,70.5728052 218.070339,72.7374682 217.234118,75.3624685 C215.155199,81.8887889 219.170304,88.7707545 226.18743,90.7075582 C234.681518,93.0508136 243.642588,88.5244201 246.163664,80.6186275 C247.651487,75.9521313 247.096075,71.0269841 244.602924,66.746925 C242.950649,63.9186989 240.57851,61.6000769 237.711464,59.952716 C235.987824,47.5697967 228.503717,36.6541063 217.182921,30 L215.010916,33.1992672 C223.734616,38.3261007 229.946549,46.2365121 232.596394,55.3847536 C229.512148,51.8329204 225.802675,48.7460432 221.680521,46.3242687 L219.513171,49.5235359 C223.034921,51.5958236 226.218459,54.2115863 228.924155,57.2045485 C223.295561,56.5887127 217.755399,57.87427 213.177124,60.6070416 C210.815845,55.9220704 206.38961,52.3348266 201.010797,50.8522018 C188.338703,47.3557938 174.970016,54.1068942 171.212449,65.9001507 C168.815487,73.4241252 170.006986,81.5623959 174.481315,88.2257398 L174.569747,88.1764729 C173.666814,100.682559 182.136079,112.580508 195.583889,116.289379 C208.093082,119.741139 221.497452,116.715846 230.913091,108.398983 C237.71767,108.840845 244.526904,107.484466 250.669022,104.383733 C259.192587,100.08058 265.40452,92.9430423 268.161414,84.2905487 C273.848962,66.4436258 266.018887,47.0463362 249.126899,37.1175228 Z M207.044315,96.1992744 C204.746644,96.9044064 202.279868,96.9459754 199.895317,96.2854914 C195.033131,94.9460484 192.251414,90.1733206 193.689591,85.6469271 C194.22018,83.9918683 195.408577,82.6247127 197.040683,81.8010323 C198.553329,81.0373958 200.280072,80.8310908 201.944759,81.194434 C201.986647,84.0596103 202.526546,86.8616634 203.486882,89.5174554 C202.765466,89.7576314 201.961824,89.793042 201.189211,89.5805786 L200.031843,93.2093914 C201.722904,93.6728078 203.480676,93.5881304 205.053828,93.023101 C205.640269,94.1177492 206.304282,95.1816057 207.044315,96.1992744 Z M175.112748,66.9732447 C178.232677,57.1814547 189.333171,51.5773485 199.856532,54.4794749 C204.409984,55.7357801 208.103942,58.8965575 209.858612,62.9903263 C208.3832,64.2604878 207.070689,65.7092416 205.964518,67.3150336 C205.810926,67.2688459 205.661989,67.2164998 205.509949,67.1780101 C205.410657,67.1472183 205.308262,67.125664 205.204317,67.099491 C204.316898,64.3574819 201.983544,62.1558688 198.989281,61.3337279 C196.168779,60.553156 193.19003,60.845678 190.602242,62.1497104 C188.014454,63.4552824 186.129464,65.6199454 185.293242,68.2480249 C185.072939,68.9485382 184.917796,69.6659869 184.829364,70.3865149 C180.623433,73.1577762 177.345258,77.1930406 175.748835,82.1197273 C173.772311,77.3085098 173.514773,71.9861485 175.112748,66.9732447 Z M200.138892,66.300444 C196.589216,66.1033765 193.107804,66.6453121 189.908752,67.8246377 C190.538633,66.8469983 191.43536,66.0356346 192.541531,65.4783032 C194.175189,64.6515435 196.053973,64.4683324 197.835016,64.9625406 C198.731744,65.2073354 199.519871,65.6830686 200.138892,66.300444 Z M196.738154,112.662106 C183.315167,108.957854 175.634029,95.7851248 179.6119,83.2959738 C182.699249,73.6042572 193.608916,68.0201656 204.034537,70.7267642 C203.700979,71.4657672 203.407759,72.2263244 203.156427,73.0115152 C202.692549,74.4664273 202.371402,75.9259583 202.177473,77.3808705 C199.755689,77.0021314 197.290464,77.371633 195.101394,78.4755187 C192.515157,79.7810907 190.630167,81.9488329 189.790843,84.5738332 C187.711924,91.098614 191.72703,97.9821192 198.737949,99.9173833 C202.352785,100.913498 206.240673,100.676401 209.673991,99.3015475 C213.167815,102.864158 217.707304,105.613865 223.025612,107.081094 C223.864937,107.313572 224.71357,107.50756 225.566857,107.683073 C217.434252,113.507341 206.765057,115.427209 196.738154,112.662106 Z"></path></a></svg><style>/* Hover styles */.svef-corner.dark .corner{fill:#4a4a4a;}.svef-corner.dark .swirl{fill:#ebebea;}.svef-corner .corner{opacity:0.8;}.svef-corner .corner,.svef-corner .swirl{transform-origin:center center;transition:all 500ms;}.svef-corner a:hover .corner{opacity:1;}.svef-corner a:hover .swirl{fill:#56A3A6;transform:rotate(10deg);}</style> |
| .svef-corner { | |
| z-index: 9999; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| height: auto; | |
| width: 40%; | |
| max-width: 80px; | |
| } | |
| .svef-corner.dark .corner { | |
| fill: #4a4a4a; | |
| } | |
| .svef-corner.dark .swirl { | |
| fill: #ebebea; | |
| } | |
| .svef-corner .corner { | |
| opacity: 0.8; | |
| } | |
| .svef-corner .corner, | |
| .svef-corner .swirl { | |
| transform-origin: center center; | |
| transition: all 500ms; | |
| } | |
| .svef-corner a:hover .corner{ | |
| opacity: 1; | |
| } | |
| .svef-corner a:hover .swirl { | |
| fill: #56A3A6; | |
| transform:rotate(10deg); | |
| } |
| .svef-corner { | |
| z-index: 9999; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| height: auto; | |
| width: 40%; | |
| max-width: 80px; | |
| &.dark .corner { | |
| fill: #4a4a4a; | |
| } | |
| &.dark .swirl { | |
| fill: #ebebea; | |
| } | |
| .corner { | |
| opacity: 0.8; | |
| } | |
| .corner, | |
| .swirl { | |
| transform-origin: center center; | |
| transition: all 500ms; | |
| } | |
| a:hover .corner{ | |
| opacity: 1; | |
| } | |
| a:hover .swirl { | |
| fill: #56A3A6; | |
| transform:rotate(10deg); | |
| } | |
| } |
