• Home
  • Free Trial
  • Sign In
  • Techdegree
  • Tracks
  • Content Library
  • Community
  • Support
  • Jobs
    • Newest
      • Newest
      • Active
      • Unanswered
      • Featured
    • All Topics
      • All Topics
      • • General Discussion
      • • 21st Century Skills
      • • Android
      • • APIs
      • • Business
      • • C#
      • • Computer Science
      • • CSS
      • • Data Analysis
      • • Databases
      • • Design
      • • Development Tools
      • • Digital Literacy
      • • Equity, Diversity, and Inclusion (EDI)
      • • Go
      • • HTML
      • • Java
      • • JavaScript
      • • Learning Resources
      • • Machine Learning
      • • PHP
      • • Python
      • • Quality Assurance
      • • Ruby
      • • Security
  • Sadaf Partovi
    seal-mask
    .a{fill-rule:evenodd;}techdegree seal-36
    Sadaf Partovi
    Front End Web Development Techdegree Graduate 14,594 Points

    nothing works

    Posted December 30, 2020 11:06pm by Sadaf Partovi
    .a{fill-rule:evenodd;}techdegree seal-36
    Sadaf Partovi
    Front End Web Development Techdegree Graduate 14,594 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    1 Answer

  • Amandeep Pasricha
    Amandeep Pasricha
    14,932 Points

    Could you not make the dash-offset start at 0 and at 100, make it 150?

    Posted June 25, 2019 9:27pm by Amandeep Pasricha
    Amandeep Pasricha
    14,932 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • Amandeep Pasricha
    Amandeep Pasricha
    14,932 Points

    How is that when he was setting stroke-dash array to 650, without using stroke-dashoffset, there no gaps in the drawing?

    Posted June 21, 2019 5:21pm by Amandeep Pasricha
    Amandeep Pasricha
    14,932 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • Amandeep Pasricha
    Amandeep Pasricha
    14,932 Points

    I don't get why at 100%, the stroke dash offset goes to zero?

    Posted June 21, 2019 5:16pm by Amandeep Pasricha
    Amandeep Pasricha
    14,932 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • gene c
    gene c
    13,630 Points

    Shouldn't the last step of animating line drawings be animating stroke-dashOFFSET to 0 instead of stroke-dasharray?

    Posted January 8, 2018 6:44am by gene c
    gene c
    13,630 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    3 Answers

  • armand Rodriguez
    armand Rodriguez
    7,830 Points

    Animations question...

    Posted June 15, 2017 7:32pm by armand Rodriguez
    armand Rodriguez
    7,830 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    1 Answer

  • Ross Wilkinson
    Ross Wilkinson
    5,430 Points

    Animation direction incorrect and fill not staying

    Posted March 28, 2017 3:35pm by Ross Wilkinson
    Ross Wilkinson
    5,430 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    1 Answer

  • Daniel Garcia
    Daniel Garcia
    12,877 Points

    Choppy Animation in FireFox

    Posted January 9, 2017 4:12am by Daniel Garcia
    Daniel Garcia
    12,877 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • Megan Weber
    Megan Weber
    27,261 Points

    Trying to Use Javascript to Initialize Array & Offset. Why is it Not Working?

    Posted June 7, 2016 2:44am by Megan Weber
    Megan Weber
    27,261 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    1 Answer

  • Edgar Gil
    Edgar Gil
    13,322 Points

    Something II Notice stroke-dasharray finding the perfect length.

    Posted March 17, 2016 1:35am by Edgar Gil
    Edgar Gil
    13,322 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • Stetson Nash
    Stetson Nash
    17,603 Points

    Fill not working Safari

    Posted March 13, 2016 12:36am by Stetson Nash
    Stetson Nash
    17,603 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • Alex Oates
    Alex Oates
    7,171 Points

    Line animation fill won't work with safari?

    Posted March 4, 2016 10:53pm by Alex Oates
    Alex Oates
    7,171 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    0 Answers

  • Pier-Luc Cossette
    Pier-Luc Cossette
    4,588 Points

    The line animate in the wrong direction

    Posted January 16, 2016 8:39pm by Pier-Luc Cossette
    Pier-Luc Cossette
    4,588 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    1 Answer

  • Amanda Williamson
    Amanda Williamson
    1,295 Points

    None of the css properties work for the path element?

    Posted August 4, 2015 5:59pm by Amanda Williamson
    Amanda Williamson
    1,295 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • Animating stroke-dasharray and stroke-dashoffset

    1 Answer

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

    Treehouse

  • About
  • Blog
  • Careers
  • Community
  • Stories
  • Shop
  • Contact
  • Gift Card

See Full Catalogue

Techdegree

  • Front End Web Development
  • Full Stack JavaScript
  • Python Development
  • Data Analysis
  • UX Design

Tracks

  • Learn to Code for Beginners
  • Beginning Python
  • Beginning SQL
  • Beginning Java
  • ...see more

Courses

  • JavaScript Basics
  • Intro to HTML & CSS
  • Python Basics
  • CSS Layout
  • ...see more

Explore

  • Perks
  • Treehouse for Libraries
  • Treehouse for Teams
  • Twitter
  • YouTube
  • Facebook
  • LinkedIn
  • Instagram
Terms & Conditions | Privacy

© 2022 Treehouse Island, Inc.