millermark / coderushed-1 Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 2.0 11.32 MB

HTML 30.52% CSS 10.69% TypeScript 58.78%

coderushed-1's People

Stargazers

Watchers

Forkers

wilbennett sql-mistermagoo

coderushed-1's Issues

Grids

I see where our thought processes were diverging now. I was thinking a grid for the overall layout with each section being flex boxes. You were thinking grids with each section being grids themselves - able to re-parent with styles as you thought. Your approach is actually the more flexible (if a bit heavy handed :) ) since the HTML can now just be a flat list of DIVs - no structure whatsoever (at least I think that should work). It requires more CSS style work though so it's a trade-off (as are most things in code).

I would keep the nested DIVs as you have though so you can switch individual sections to flex later if needed.

TS Conversion

Mark,

I think there is an easier way to do the conversion. You mentioned yesterday that you think the cost of creating a bug is much higher than not writing code. In the same vein, I argue that trying to change everything at once is much more costly than making incremental changes. Here is my suggestion:

make the Javascript files compile with Typescript
run the app
visit each .js file
- rename to .ts
- fix any issues
- convert to a class if needed
- run the app

This way you can address any errors as they come up and you are not bombarded with a bazzilion error messages. If you encounter an error that you don't know how to fix, you can easily keep that file as .js until you figure it out. The way you are doing it now, if it works, it'll be great. If it doesn't, you may be spending a lot of time trying to figure out what is wrong.

Just my $0.02

Wil

Using hover with layered SVG

CSS doesn't (quite yet - although "has()" is coming) have the tools to handle this for any old SVG, but thanks to SVG 2.0 we can place the background last and specify a Z position. This then gives us a way to use CSS to always find the background within an SVG from any :hover

Sample:

uses a class on the last element of the SVG to identify it as the background.
the CSS selector finds any element which has the :hover state inside an SVG and then selects the element with the "btnback" class in the same SVG and changes background colour.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        svg :hover ~ .btnback,.btnback:hover {fill-opacity:0.2; fill:gray;}
    </style>
</head>
<body>
    <svg class="svgthing" xmlns="http://www.w3.org/2000/svg">
        <path id="svg_2" d="m65.70423,67.70454l15.85485,-9.54545l-30.65457,0l-30.6545,0l0,-5.90909l0,-5.90909l30.30283,0c16.66653,0 30.3028,-0.2995 30.3028,-0.66556c0,-0.36605 -6.6349,-4.66151 -14.74419,-9.54545l-14.74424,-8.8799l13.62818,0l13.62814,0l20.81325,12.51197l20.81323,12.51197l-20.85316,12.48803l-20.85315,12.48803l-14.34716,0l-14.3472,0l15.85489,-9.54546l0.00001,0l-0.00001,0z" fill-opacity="0.1" stroke-opacity="null" stroke-width="1.5" fill="#110" stroke="#000" />
        <path fill="#000" stroke="#000" stroke-width="1.5" stroke-opacity="null" d="m153.91089,83.12464c-1.0529,-1.61154 -2.6902,-1.79531 -3.0839,-4.08913c-0.30859,-1.24765 -3.21768,-2.92099 -1.49594,-0.68163c1.32949,1.34942 2.90901,6.32672 -0.36182,4.75414c-2.48771,-1.02168 -2.59439,-4.17653 -3.26121,-6.53845c-2.16847,-1.68358 0.56064,-5.24339 -1.77418,-7.4005c-1.9816,-2.25177 -0.60154,-6.469 -3.43309,-8.06562c-1.42125,-0.64551 -2.03643,3.81146 -2.27573,0.55089c-0.77864,-3.29774 -3.52859,1.60306 -5.36234,1.0835c-1.47973,-0.14395 2.4752,-1.29513 0.58789,-1.60492c-1.10959,0.67973 -2.13624,1.85504 -2.31178,-0.09044c-1.33478,-0.88711 -4.13383,-2.30378 -4.06112,-3.71304c1.15912,-0.40747 5.07216,0.77157 4.39405,-0.86668c-1.1636,-0.49416 -1.37498,-1.845 0.05021,-0.93841c2.80864,0.0986 6.10117,-1.15601 8.43814,1.24356c1.21897,0.83932 2.41751,3.84955 3.07008,0.92417c2.1036,-2.83924 6.34831,-3.07973 7.64508,-6.75583c0.3138,-1.77854 -0.96376,-2.79326 -2.0491,-3.15351c-0.21115,-0.58449 -0.5706,-3.06603 -1.4681,-1.81377c0.04091,-1.09603 0.8828,-3.71702 -0.98203,-2.5567c-0.18915,-2.33447 1.5942,-4.6635 -0.76493,-6.36349c2.21038,0.45886 1.7745,-2.36106 1.29306,-2.80829c1.31029,-0.20821 2.84798,-1.52767 2.12553,-3.16227c1.42294,2.8908 1.47228,-3.50707 2.64378,-0.7494c2.15615,0.39556 -0.66984,-2.15567 1.31329,-1.58623c1.13239,0.04336 0.88089,-1.38847 1.89817,-0.30782c1.34635,-0.82207 -1.03211,-3.30648 1.14171,-1.58028c0.73076,0.71043 3.0573,2.57114 2.63986,0.11576c2.06561,2.46576 3.69115,-2.29027 5.40759,-3.27519c0.68083,-0.91149 2.16136,-1.87613 0.79593,-0.13619c-0.90647,2.21788 -3.98182,4.61716 -3.15446,6.82094c-0.74889,0.76296 1.51101,1.72187 -0.28797,1.43302c-1.06577,1.2874 1.42885,3.69603 1.62793,5.7222c-0.57142,1.38828 -2.74725,2.96435 -3.62742,2.91453c0.3217,-1.78741 -0.3757,-4.1171 -2.41265,-3.10678c1.14106,2.33639 2.68376,4.56839 3.65032,7.10917c0.94474,2.49771 2.47647,5.38207 4.49168,2.16751c1.28443,-2.04883 4.95374,-2.01917 3.94582,1.30813c-0.51526,3.26731 0.86424,7.57951 -1.78643,9.83014c-1.59903,3.44808 -3.37178,-1.28207 -2.1155,-3.07153c-0.32011,-0.51137 -0.56775,-0.87235 0.36897,-1.57136c-0.19342,-0.52433 2.69574,-2.497 1.23961,-3.70747c-1.6561,2.1015 -4.07936,4.53399 -3.40591,7.65784c0.54658,2.09336 -3.96135,5.68222 -3.60087,2.2081c0.08075,-1.35016 1.80333,-3.96692 1.40681,-4.30404c-1.25764,2.64066 -3.0467,5.17759 -5.75016,5.9616c-2.24874,0.14912 -3.42672,2.17528 -2.35884,4.42333c0.20408,3.18558 -1.29858,6.06869 -1.64453,9.1703c0.64308,3.28967 4.55832,3.95443 5.08975,7.31014c0.91317,2.2537 -1.37103,1.92064 -2.43527,1.29002l0.00001,0l0.00001,-0.00002zm-5.5678,-9.81414c-0.32962,-1.48703 -1.00795,3.86554 -0.17178,1.02462l0.12518,-0.50191l0.04661,-0.5227l0,0l-0.00001,-0.00001z" id="svg_4" />
        <rect class="btnback" rx="5" id="svg_1" height="101" width="200" y="3.75" x="3.75" z="0" stroke-width="1.5" stroke="#000" fill="none" />
    </svg>
</body>
</html>

Organization

Mark,

In the show today, you were trying to group items together in columns by using HTML elements. I think this is the wrong way to go. You should view it more like creating classes/interfaces in C# - keep everything small and encapsulated and then you can combine however you want. You can add multiple class names to each section/element so you can hide/show an entire group of elements/sections using a single style. You can swap in different layouts even allowing users to select the layout they want.

If you create small divs with the elements that make up a cohesive group, you can then lay them out in the CSS however you want. This provides much better flexibility, especially if you later want to convert to a proper framework such as Angular or React (each section becomes a component). The more you pack into the HTML the more rigid you make the design.

With the grid layout, you just specify how you want the layout to look by stacking the individual sections how you want. Note that you can have elements span multiple columns and/or rows.

e.g.

Create specific sections: create, modify, canvas, scale, nav, preview, draw, animate, share, load

Now just lay them out:

'create modify scale'
'nav preview scale'
' animate share load'
'preview preview preview'

Notice preview spans three columns and scale spans two rows. You are free to lay it out however you want. All the pieces are separate so you have ultimate flexibility. If you combine them in HTML then you are stuck with that combination and if you want to adapt the design for different screen sizes or landscape vs portrait, it becomes unnecessarily difficult.

Wil

SVG Hover

Hi Mark,

Just as a follow up - and not a suggestion for your project - this SVG hover thing has been bugging me and I think I finally figured it out. I thought you might like closure as well.

The key points are:

disable pointer events on all child elements of an SVG (CSS pointer-events:none)
use CSS to style the "first-child" of any SVG that is in state "hover"
don't include inline styles on the SVG children as it overrides everything

This sample shows it working with my SVG and your New Character SVG

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    svg:hover :first-child {
      fill-opacity: 1;
      fill: red;
    }

    svg * {
      pointer-events: none;
    }
  </style>
</head>
<body>
  <svg class="svgthing" xmlns="http://www.w3.org/2000/svg">
    <rect rx="5" id="svg_1" height="101" width="200" y="3.75" x="3.75" stroke-width="1.5" stroke="#000" fill="#000" fill-opacity="0"></rect>
    <path id="svg_2" fill-opacity="1" d="m65.70423,67.70454l15.85485,-9.54545l-30.65457,0l-30.6545,0l0,-5.90909l0,-5.90909l30.30283,0c16.66653,0 30.3028,-0.2995 30.3028,-0.66556c0,-0.36605 -6.6349,-4.66151 -14.74419,-9.54545l-14.74424,-8.8799l13.62818,0l13.62814,0l20.81325,12.51197l20.81323,12.51197l-20.85316,12.48803l-20.85315,12.48803l-14.34716,0l-14.3472,0l15.85489,-9.54546l0.00001,0l-0.00001,0z" stroke-opacity="1" stroke-width="1.5" fill="#ddd" stroke="#000"></path>
    <path fill-opacity="1" fill="#000" stroke="#000" stroke-width="1.5" stroke-opacity="null" d="m153.91089,83.12464c-1.0529,-1.61154 -2.6902,-1.79531 -3.0839,-4.08913c-0.30859,-1.24765 -3.21768,-2.92099 -1.49594,-0.68163c1.32949,1.34942 2.90901,6.32672 -0.36182,4.75414c-2.48771,-1.02168 -2.59439,-4.17653 -3.26121,-6.53845c-2.16847,-1.68358 0.56064,-5.24339 -1.77418,-7.4005c-1.9816,-2.25177 -0.60154,-6.469 -3.43309,-8.06562c-1.42125,-0.64551 -2.03643,3.81146 -2.27573,0.55089c-0.77864,-3.29774 -3.52859,1.60306 -5.36234,1.0835c-1.47973,-0.14395 2.4752,-1.29513 0.58789,-1.60492c-1.10959,0.67973 -2.13624,1.85504 -2.31178,-0.09044c-1.33478,-0.88711 -4.13383,-2.30378 -4.06112,-3.71304c1.15912,-0.40747 5.07216,0.77157 4.39405,-0.86668c-1.1636,-0.49416 -1.37498,-1.845 0.05021,-0.93841c2.80864,0.0986 6.10117,-1.15601 8.43814,1.24356c1.21897,0.83932 2.41751,3.84955 3.07008,0.92417c2.1036,-2.83924 6.34831,-3.07973 7.64508,-6.75583c0.3138,-1.77854 -0.96376,-2.79326 -2.0491,-3.15351c-0.21115,-0.58449 -0.5706,-3.06603 -1.4681,-1.81377c0.04091,-1.09603 0.8828,-3.71702 -0.98203,-2.5567c-0.18915,-2.33447 1.5942,-4.6635 -0.76493,-6.36349c2.21038,0.45886 1.7745,-2.36106 1.29306,-2.80829c1.31029,-0.20821 2.84798,-1.52767 2.12553,-3.16227c1.42294,2.8908 1.47228,-3.50707 2.64378,-0.7494c2.15615,0.39556 -0.66984,-2.15567 1.31329,-1.58623c1.13239,0.04336 0.88089,-1.38847 1.89817,-0.30782c1.34635,-0.82207 -1.03211,-3.30648 1.14171,-1.58028c0.73076,0.71043 3.0573,2.57114 2.63986,0.11576c2.06561,2.46576 3.69115,-2.29027 5.40759,-3.27519c0.68083,-0.91149 2.16136,-1.87613 0.79593,-0.13619c-0.90647,2.21788 -3.98182,4.61716 -3.15446,6.82094c-0.74889,0.76296 1.51101,1.72187 -0.28797,1.43302c-1.06577,1.2874 1.42885,3.69603 1.62793,5.7222c-0.57142,1.38828 -2.74725,2.96435 -3.62742,2.91453c0.3217,-1.78741 -0.3757,-4.1171 -2.41265,-3.10678c1.14106,2.33639 2.68376,4.56839 3.65032,7.10917c0.94474,2.49771 2.47647,5.38207 4.49168,2.16751c1.28443,-2.04883 4.95374,-2.01917 3.94582,1.30813c-0.51526,3.26731 0.86424,7.57951 -1.78643,9.83014c-1.59903,3.44808 -3.37178,-1.28207 -2.1155,-3.07153c-0.32011,-0.51137 -0.56775,-0.87235 0.36897,-1.57136c-0.19342,-0.52433 2.69574,-2.497 1.23961,-3.70747c-1.6561,2.1015 -4.07936,4.53399 -3.40591,7.65784c0.54658,2.09336 -3.96135,5.68222 -3.60087,2.2081c0.08075,-1.35016 1.80333,-3.96692 1.40681,-4.30404c-1.25764,2.64066 -3.0467,5.17759 -5.75016,5.9616c-2.24874,0.14912 -3.42672,2.17528 -2.35884,4.42333c0.20408,3.18558 -1.29858,6.06869 -1.64453,9.1703c0.64308,3.28967 4.55832,3.95443 5.08975,7.31014c0.91317,2.2537 -1.37103,1.92064 -2.43527,1.29002l0.00001,0l0.00001,-0.00002zm-5.5678,-9.81414c-0.32962,-1.48703 -1.00795,3.86554 -0.17178,1.02462l0.12518,-0.50191l0.04661,-0.5227l0,0l-0.00001,-0.00001z" id="svg_4"></path>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="163px" height="163px" viewBox="0 0 163 163">
    <polygon points="141,0 141,141 0,141 0,0" fill-opacity="0" />
    <path stroke="#2F528F" stroke-width="1" fill="#4472C4" d="M31,81L41,81C42.4375,81,43.5,82.1875,43.5,83.5625L43.5,98.875 58.5,98.875C59.9375,98.875,61,100,61,101.4375L61,111.625C61,113.0625,59.9375,114.1875,58.5,114.1875L43.5,114.1875 43.5,129.5C43.5,130.875,42.4375,132,41,132L31,132C29.625,132,28.5,130.875,28.5,129.5L28.5,114.1875 13.5,114.1875C12.125,114.1875,11,113.0625,11,111.625L11,101.4375C11,100,12.125,98.875,13.5,98.875L28.5,98.875 28.5,83.5625C28.5,82.1875,29.625,81,31,81z" />
    <path stroke="#000000" stroke-width="1" fill="#6B567A" d="M109,58.3125L110.125,58.3125 111,58.3125 111.9375,58.3125 113.0625,58.3125 113.375,58.3125 113.5,58.375 115.9375,58.4375C117,58.4375,117,59.375,117.5625,60.75C118.75,64.5625,118.9375,65.9375,118.875,69.25C118.6875,70.75,119.1875,72.9375,117.9375,73L117.4375,73.125 117.9375,73.25C118.8125,73.625,119.4375,74.5,119.4375,75.5625L119.4375,77.1875C119.4375,77.5625,119.375,77.875,119.25,78.1875L119.1875,78.25 119.5625,78.875C121.125,84.3125,118.9375,91.8125,119.1875,101.5625C119.1875,101.8125,119,102.125,118.6875,102.375L118.125,102.625 118.375,103.125 118.375,104.125 118.1875,104.5625 118.375,104.625C118.9375,104.8125,119.125,105.3125,119.25,105.6875C119.625,107.9375,119.875,114.0625,119.5,117.9375C119.125,121.8125,119.125,124.5625,119.4375,128.4375C119.4375,128.6875,119.375,129.625,119.3125,130.5625L119,131.5 119.1875,131.6875C119.25,131.9375,119.3125,132.1875,119.3125,132.4375L119.3125,133.625C119.3125,133.875,119.25,134.125,119.1875,134.375L119.1875,134.375 121.3125,134.8125C124.1875,135.125,127.6875,136.375,129.375,138.5C129.625,139,131.0625,139.75,128.625,139.9375C124.6875,140.125,121.4375,139.9375,117.8125,139.875L116.3125,140C115.6875,139.625,115.1875,139.0625,114.8125,138.4375L114.6875,137.625 115.4375,135.3125 114.625,134.9375C114.25,134.625,114.0625,134.125,114.0625,133.625L114.0625,132.4375C114.0625,132.1875,114.125,131.9375,114.25,131.6875L114.5625,131.1875 114.5,130.875C114.4375,130,114.375,129.0625,114.375,128.8125C114.4375,125.1875,113.5,122.75,113.1875,118.875C112.875,115.0625,112.4375,108.5,112.4375,105.75C112.4375,105.25,112.75,104.8125,113.25,104.75L113.75,104.75 113.5,104.125 113.5,103.125 113.75,102.625 113.5,102.625C113,102.625,112.5,102.0625,112.5,101.5625C112.5,93.875,110.875,84.5,112.5,78.4375L112.75,77.9375 112.5625,77.1875 112.5625,75.5625C112.5625,74.875,112.875,74.25,113.3125,73.8125L113.375,73.75 112.3125,73.8125 111.9375,73.8125 111,73.875 110.125,73.8125 109.75,73.8125 108.6875,73.75 108.75,73.8125C109.1875,74.25,109.4375,74.875,109.4375,75.5625L109.4375,77.1875 109.3125,77.9375 109.5625,78.4375C111.1875,84.5,109.5625,93.875,109.5625,101.5625C109.5625,102.0625,109.0625,102.625,108.5625,102.625L108.3125,102.625 108.5625,103.125 108.5625,104.125 108.3125,104.75 108.8125,104.75C109.25,104.8125,109.625,105.25,109.625,105.75C109.625,108.5,109.1875,115.0625,108.875,118.875C108.5625,122.75,107.625,125.1875,107.6875,128.8125C107.6875,129.0625,107.625,130,107.5625,130.875L107.5,131.1875 107.8125,131.6875C107.9375,131.9375,108,132.1875,108,132.4375L108,133.625C108,134.125,107.75,134.625,107.4375,134.9375L106.5625,135.3125 107.375,137.625 107.25,138.4375C106.875,139.0625,106.375,139.625,105.75,140L104.25,139.875C100.625,139.9375,97.375,140.125,93.375,139.9375C91,139.75,92.4375,139,92.6875,138.5C94.375,136.375,97.875,135.125,100.75,134.8125L102.875,134.375 102.875,134.375C102.8125,134.125,102.75,133.875,102.75,133.625L102.75,132.4375C102.75,132.1875,102.8125,131.9375,102.875,131.6875L103.0625,131.5 102.75,130.5625C102.6875,129.625,102.625,128.6875,102.625,128.4375C102.9375,124.5625,102.9375,121.8125,102.5625,117.9375C102.1875,114.0625,102.4375,107.9375,102.8125,105.6875C102.9375,105.3125,103.125,104.8125,103.6875,104.625L103.875,104.5625 103.6875,104.125 103.6875,103.125 103.9375,102.625 103.3125,102.375C103.0625,102.125,102.875,101.8125,102.875,101.5625C103.125,91.8125,100.9375,84.3125,102.5,78.875L102.875,78.25 102.8125,78.1875C102.6875,77.875,102.625,77.5625,102.625,77.1875L102.625,75.5625C102.625,74.5,103.25,73.625,104.125,73.25L104.5625,73.125 104.125,73C102.875,72.9375,103.375,70.75,103.1875,69.25C103.125,65.9375,103.3125,64.5625,104.5,60.75C105.0625,59.375,105.0625,58.4375,106.125,58.4375L108.5625,58.375 108.6875,58.3125z M107,54.0625L115.0625,54.0625C115.625,54.0625,116.0625,54.5625,116.0625,55.125L116.0625,57.25C116.0625,57.8125,115.625,58.3125,115.0625,58.3125L107,58.3125C106.4375,58.3125,106,57.8125,106,57.25L106,55.125C106,54.5625,106.4375,54.0625,107,54.0625z M110.75,33.5C113.5625,33.5,116.5625,33.875,119.125,34.625C119.9375,34.9375,120.3125,35.5,120.4375,36.1875L120.5,37.25 121.25,36.6875C121.625,36.5625,122,36.5,122.375,36.5L124.1875,36.5C125.375,36.5,126.4375,37.25,126.8125,38.25L127.0625,39.375 126.8125,40.5625C126.5625,41.25,126,41.8125,125.3125,42.0625L124.625,42.25 125.25,42.4375C125.5,42.625,125.6875,42.875,125.9375,43.25C127.625,45.125,126.125,53.75,125.875,58.875C125.875,59.25,125.6875,59.5625,125.4375,59.75L124.9375,60 125.4375,60.1875C125.6875,60.4375,125.875,60.8125,125.875,61.1875C125.875,61.625,125.6875,62,125.4375,62.25L124.625,62.5625 124.9375,62.625C125.1875,62.8125,125.375,63.0625,125.6875,63.375C127.375,65.125,126.75,73.875,126.9375,79C127,79.6875,126.375,80.3125,125.8125,80.3125L125.1875,80.375 126.25,80.8125C126.375,81,126.5,81.1875,126.625,81.375L126.75,82.0625 126.625,82.75C126.5,83.0625,126.25,83.375,126,83.5625L125.5,83.6875 125.6875,85.0625 125.4375,87.625C125.4375,89.6875,124.875,92.25,123.5625,93.5625C123.25,93.8125,122.8125,94.875,122.5,93.1875C122.0625,90.375,122,88.0625,121.75,85.5L121.5625,84.5C121.75,84,122.125,83.625,122.5,83.3125L123,83.1875 122.75,82.75C122.6875,82.5625,122.625,82.3125,122.625,82.0625L122.625,82.0625C122.625,81.5625,122.8125,81.125,123.125,80.8125L124.0625,80.4375 123.8125,80.4375C123.1875,80.3125,122.375,79.9375,122.3125,79.375C121.0625,72.5,120.4375,67.9375,120.75,64.1875C120.9375,63.8125,121.125,62.6875,121.75,62.625L121.875,62.625 121,62.25C120.75,62,120.625,61.625,120.625,61.1875C120.625,60.8125,120.75,60.4375,121,60.1875L121.875,59.8125 121.6875,59.75C121.25,59.5625,120.875,59.25,120.875,58.875C120.1875,51.9375,119.9375,47.3125,120.625,43.5625C120.75,43.375,120.875,43,121.0625,42.6875L121.6875,42.1875 121.25,42.0625C120.75,41.875,120.3125,41.5,120,41L119.9375,40.8125 117.5,51.625C117.0625,53.8125,116.5,54.0625,115.25,54.0625L105.4375,53.875C104.25,53.875,103.8125,52.4375,103.5625,50.8125C103.4375,48.3125,103.125,46.125,102.8125,44.25L102.25,40.625 102.0625,41C101.75,41.5,101.3125,41.875,100.75,42.0625L100.3125,42.1875 101,42.6875C101.1875,43,101.3125,43.375,101.375,43.5625C102.125,47.3125,101.875,51.9375,101.1875,58.875C101.1875,59.25,100.8125,59.5625,100.375,59.75L100.1875,59.8125 101.0625,60.1875C101.3125,60.4375,101.4375,60.8125,101.4375,61.1875C101.4375,61.625,101.3125,62,101.0625,62.25L100.1875,62.625 100.3125,62.625C100.9375,62.6875,101.125,63.8125,101.3125,64.1875C101.625,67.9375,101,72.5,99.75,79.375C99.6875,79.9375,98.875,80.3125,98.25,80.4375L98,80.4375 98.9375,80.8125C99.25,81.125,99.4375,81.5625,99.4375,82.0625L99.4375,82.0625C99.4375,82.3125,99.375,82.5625,99.3125,82.75L99.0625,83.1875 99.5625,83.3125C99.9375,83.625,100.3125,84,100.5,84.5L100.3125,85.5C100.0625,88.0625,100,90.375,99.5625,93.1875C99.25,94.875,98.8125,93.8125,98.5,93.5625C97.1875,92.25,96.625,89.6875,96.625,87.625L96.375,85.0625 96.5625,83.6875 96.0625,83.5625C95.8125,83.375,95.5625,83.0625,95.4375,82.75L95.3125,82.0625 95.4375,81.375C95.5625,81.1875,95.6875,81,95.8125,80.8125L96.875,80.375 96.25,80.3125C95.6875,80.3125,95.0625,79.6875,95.125,79C95.3125,73.875,94.6875,65.125,96.375,63.375C96.6875,63.0625,96.875,62.8125,97.125,62.625L97.4375,62.5625 96.625,62.25C96.375,62,96.1875,61.625,96.1875,61.1875C96.1875,60.8125,96.375,60.4375,96.625,60.1875L97.125,60 96.625,59.75C96.375,59.5625,96.1875,59.25,96.1875,58.875C95.9375,53.75,94.4375,45.125,96.125,43.25C96.375,42.875,96.5625,42.625,96.8125,42.4375L97.4375,42.25 96.75,42.0625C96.0625,41.8125,95.5,41.25,95.1875,40.5625L95,39.375 95.1875,38.25C95.625,37.25,96.6875,36.5,97.8125,36.5L99.6875,36.5C100.0625,36.5,100.4375,36.5625,100.75,36.6875L101.625,37.3125 101.5625,36.875C101.5625,35.9375,102,35.0625,103.4375,34.625C105.3125,33.9375,107.9375,33.5625,110.75,33.5z M111,12L111.625,12.1875 111.8125,12.125 112.75,12.25C114.4375,12.6875,116.0625,13.875,116.9375,15.875C117.9375,17.6875,116.8125,22.5625,115.4375,26.75C115,28,114.6875,28.875,114.4375,29.5625L113.9375,30.5625 114.1875,30.6875C114.375,30.875,114.4375,31.125,114.4375,31.375L114.4375,32.375C114.4375,32.9375,114,33.375,113.5,33.375L108.5625,33.375C108.0625,33.375,107.625,32.9375,107.625,32.375L107.625,31.375C107.625,31.125,107.6875,30.875,107.875,30.6875L108.125,30.5625 107.625,29.5625C107.375,28.875,107.0625,28,106.625,26.75C105.25,22.5625,104.125,17.6875,105.125,15.875C106,13.875,107.625,12.6875,109.3125,12.25L110.25,12.125 110.4375,12.1875z" />
  </svg>
</body>
</html>

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.