Twitch Logo

In this example below you will see how to do a Twitch Logo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©
  • HTML
  • CSS
  • JavaScript
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   width="1000"
   height="1139.412"
   xml:space="preserve"
   sodipodi:docname="Twitch logo black.svg"><metadata
     id="metadata2991"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs2989" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1234"
     inkscape:window-height="1038"
     id="namedview2987"
     showgrid="false"
     fit-margin-left="0.5"
     fit-margin-bottom="0.5"
     fit-margin-top="0.5"
     fit-margin-right="0.5"
     inkscape:zoom="0.33712566"
     inkscape:cx="344.76544"
     inkscape:cy="201.71567"
     inkscape:window-x="675"
     inkscape:window-y="11"
     inkscape:window-maximized="0"
     inkscape:current-layer="g2993" /><g
     id="g2993"
     inkscape:groupmode="layer"
     inkscape:label="Twitch_IntegrationGuidelines"
     transform="matrix(1.25,0,0,-1.25,-779.56837,2089.8162)"><g
       id="g2995"
       transform="matrix(9.5324427,0,0,9.5324427,1348.9493,1188.2344)"><path
         d="m 0,0 -13.652,-13.651 -21.445,0 -11.699,-11.697 0,11.697 -17.548,0 0,56.544 L 0,42.893 0,0 z m -72.146,50.692 -3.899,-15.599 0,-70.19 17.55,0 0,-9.751 9.746,0 9.752,9.751 15.596,0 31.196,31.192 0,54.597 -79.941,0 z"
         style="fill:#6441a5;fill-opacity:1;fill-rule:evenodd;stroke:none"
         id="path2997"
         inkscape:connector-curvature="0" /></g><path
       d="m 940.03601,1225.3756 74.34349,0 0,223.0687 -74.34349,0 0,-223.0687 z m 204.43279,0 74.3435,0 0,223.0687 -74.3435,0 0,-223.0687 z"
       style="fill:#6441a5;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2999"
       inkscape:connector-curvature="0" /></g></svg>

/*Downloaded from https://www.codeseek.co/r3b311i0n/twitch-logo-pNZvzd */
    


/*Downloaded from https://www.codeseek.co/r3b311i0n/twitch-logo-pNZvzd */
    

Comments